前端性能优化？

文章目录

前言一、网络优化二、页面渲染优化三、JS优化四、图片优化五、webpack优化六、react优化七、vue优化 一、网络优化1、DNS预解析2、使用缓存3、使用CDN（内容分发网络）4、压缩响SEO靠我应5、使用多个域名6、避免图片src为空 二、页面渲染优化1、避免css阻塞2、降低css选择器的复杂度3、避免使用CSS 表达式4、避免js阻塞5、使用外链式的js和css6、使用字体图标 iconSEO靠我font 代替图片图标7、首屏加载优化8、减少重绘和回流 三、JS中的性能优化1、使用事件委托2、防抖和节流3、尽量不要使用JS动画4、多线程5、计算结果缓存 四、图片的优化1、雪碧图2、图片懒加载3SEO靠我、使用CSS3代替图片4、图片压缩5、使用渐进式jpeg6、使用 webp 格式的图片 五、webpack打包优化1、缩小loader 匹配范围2、resolve.modules3、resolve.eSEO靠我xtensions4、抽离css5、代码压缩6、JS代码压缩7、CSS代码压缩8、Html文件代码压缩9、文件大小压缩10、图片压缩11、Tree shaking 去除死代码12、usedExportSEO靠我s13、sideEffects14、css tree shaking15、babel-plugin-transform-runtime减少ES6转化ES5的冗余16、代码分离17、多线程打包提升打包速SEO靠我度 六、vue1、v-for添加key2、路由懒加载3、第三方插件按需引入4、合理使用computed和watch5、v-for的同时避免使用v-if6、destory时销毁事件 七、react1、mSEO靠我ap循环展示添加key2、路由懒加载3、第三方插件按需引入4、使用scu，memo或者pureComponent避免不必要的渲染5、合理使用useMemo、memo、useCallback

前言

提示：在SEO靠我这个内卷时代，前端面试几乎都逃不出性能优化这个点。：

前端优化大概可以有以下几个方向。

一、网络优化

二、页面渲染优化

三、JS优化

四、图片优化

五、webpack优化

六、react优化

七、vue优化

一、网络优SEO靠我化

1、DNS预解析

link标签的rel属性设置dns-prefetch，提供获取域名对应的IP地址

2、使用缓存

减轻服务端压力，快速得到数据（强缓存和协商缓存看这里）

3、使用CDN（内容分发网络）

用户与SEO靠我服务器的物理距离对响应时间也有影响。

内容分发网络（CDN）是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容地服务器是基于网络距离的衡量标准的。例如：选跳数（SEO靠我hop）最少的或者响应时间最快的服务器。

4、压缩响应

压缩组件通过减少 HTTP 请求产生的响应包的大小，从而降低传输时间的方式来提高性能。从 HTTP1.1 开始，Web 客户端可以通过 HTTP 请SEO靠我求中的 Accept-Encoding 头来标识对压缩的支持（这个请求头会列出一系列的压缩方法）

如果 Web 服务器看到请求中的这个头，就会使用客户端列出的方法中的一种来压缩响应。Web 服务器通过响SEO靠我应中的 Content-Encoding 头来告知 Web 客户端使用哪种方法进行的压缩

目前许多网站通常会压缩 HTML 文档，脚本和样式表的压缩也是值得的（包括 XML 和 JSON 在内的任何文本SEO靠我响应理论上都值得被压缩）。但是，图片和 PDF 文件不应该被压缩，因为它们本来已经被压缩了。

5、使用多个域名

Chrome 等现代化浏览器，都会有同域名限制并发下载数的情况，不同的浏览器及版本都不一样，SEO靠我使用不同的域名可以最大化下载线程，但注意保持在 2~4 个域名内，以避免 DNS 查询损耗。

6、避免图片src为空

虽然 src 属性为空字符串，但浏览器仍然会向服务器发起一个 HTTP 请求：

IE 向SEO靠我页面所在的目录发送请求；Safari、Chrome、Firefox 向页面本身发送请求；Opera 不执行任何操作。

二、页面渲染优化

Webkit 渲染引擎流程：

处理 HTML 并构建 DOM 树处理 SEO靠我CSS 构建 CSS 规则树(CSSOM)DOM Tree 和 CSSOM Tree 合成一棵渲染树 Render Tree。根据渲染树来布局，计算每个节点的位置调用 GPU 绘制，合成图层，显示在屏SEO靠我幕上

1、避免css阻塞

css影响renderTree的构建，会阻塞页面的渲染，因此应该尽早（将 CSS 放在 head 标签里）和尽快（启用 CDN 实现静态资源加载速度的优化)的将css资源加载

2、SEO靠我降低css选择器的复杂度

浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。

减少嵌套：最多不要超过三层，并且后代选择器的开销较高，慎重使用避免使用通配符，对用到的元素进行匹配即可利用继承，避免重复SEO靠我匹配和定义正确使用类选择器和id选择器

3、避免使用CSS 表达式

css 表达式会被频繁地计算。

4、避免js阻塞

js可以修改CSSOM和DOM，因此js会阻塞页面的解析和渲染，并且会等待css资源的加载SEO靠我。也就是说js会抢走渲染引擎的控制权。所以我们需要给js资源添加defer或者async，延迟js脚本的执行。

5、使用外链式的js和css

在现实环境中使用外部文件通常会产生较快的页面，因为 JavaSSEO靠我cript 和 CSS 有机会被浏览器缓存起来。对于内联的情况，由于 HTML 文档通常不会被配置为可以进行缓存的，所以每次请求 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 SEO靠我JavaScript 和 CSS 在外部文件中，浏览器可以缓存它们，HTML 文档的大小会被减少而不必增加 HTTP 请求数量。

6、使用字体图标 iconfont 代替图片图标

图片会增加网络请求次数，SEO靠我从而拖慢页面加载时间iconfont可以很好的缩放并且不会添加额外的请求

7、首屏加载优化

使用骨架屏或者动画优化用户体验资源按需加载，首页不需要的资源延迟加载

8、减少重绘和回流

增加多个节点使用documSEO靠我entFragment：不是真实dom的部分，不会引起重绘和回流

用 translate 代替 top ，因为 top 会触发回流，但是translate不会。所以translate会比top节省了一个SEO靠我layout的时间

使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）；opacity 代替 visiability，visiabilitSEO靠我y会触发重绘（paint），但opacity不会。

把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改 100 次，然后再把它显示出来

不要把 SEO靠我DOM 结点的属性值放在一个循环里当成循环里的变量

for (let i = 0; i < 1000; i++) {// 获取 offsetTop 会导致回流，因为需要去获取正确的值console.loSEO靠我g(document.querySelector(.test).style.offsetTop) }

尽量少用table布局，table布局的话，每次有单元格布局改变，都会进行整个tabSEO靠我el回流重绘；

最好别频繁去操作DOM节点，最好把需要操作的样式，提前写成class，之后需要修改。只需要修改一次，需要修改的时候，直接修改className，做成一次性更新多条css DOM属性，一次SEO靠我回流重绘总比多次回流重绘要付出的成本低得多；

动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame

每次访问DOM的偏移量属性的时候，例如获取一个元SEO靠我素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回SEO靠我流取得最新的值，所以如果你要多次操作，最取完做个缓存。更加不要for循环中访问DOM偏移量属性，而且使用的时候，最好定义一个变量，把要需要的值赋值进去，进行值缓存，把回流重绘的次数减少；

将频繁运行的动SEO靠我画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将该节点变为图层。

三、JS中的性能优化

1、使用事件委托

2、防抖和节流

3、尽量不要使用JS动画

css3动画和canSEO靠我vas动画都比JS动画性能好

4、多线程

复杂的计算开启webWorker进行计算，避免页面假死

5、计算结果缓存

减少运算次数，比如vue中的computed

四、图片的优化

1、雪碧图

借助减少http请求次数SEO靠我来进行优化

2、图片懒加载

在图片即将进入可视区域的时候进行加载

3、使用CSS3代替图片

有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好

4、图片压缩

压缩方法有两种，SEO靠我一是通过在线网站进行压缩，二是通过 webpack 插件 image-webpack-loader。它是基于 imagemin 这个 Node 库来实现图片压缩的。

5、使用渐进式jpeg

使用渐进式jpSEO靠我eg，会提高用户体验

6、使用 webp 格式的图片

webp 是一种新的图片文件格式，它提供了有损压缩和无损压缩两种方式。在相同图片质量下，webp 的体积比 png 和 jpg 更小。

五、webpacSEO靠我k打包优化

1、缩小loader 匹配范围

优化loader配置

test、include、exclude三个配置项来缩⼩loader的处理范围

推荐include

include: path.resolve(SEO靠我__dirname, "./src"),

2、resolve.modules

resolve.modules用于配置webpack去哪些目录下寻找第三方模块，默认是 node_modules。

寻找第三方，SEO靠我默认是在当前项目目录下的node_modules里面去找，如果没有找到，就会去上一级目录…/node_modules找，再没有会去…/…/node_modules中找，以此类推，和Node.js的模块SEO靠我寻找机制很类似。

如果我们的第三⽅模块都安装在了项⽬根⽬录下，就可以直接指明这个路径。

module.exports={resolve:{modules: [path.resolve(__dirname,SEO靠我 "./node_modules")]} }

3、resolve.extensions

resolve.extensions在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试SEO靠我查找⽂件是否存在。

后缀尝试列表尽量的⼩导⼊语句尽量的带上后缀。

如果想优化到极致的话，不建议用extensionx, 因为它会消耗一些性能。虽然它可以带来一些便利。

4、抽离css

借助mini-css-eSEO靠我xtract-plugin:本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

const MinSEO靠我iCssExtractPlugin = require("mini-css-extract-plugin");{test: /\.less$/,use: [// "style-loader", // SEO靠我不再需要style-loader，⽤MiniCssExtractPlugin.loader代替MiniCssExtractPlugin.loader,"css-loader", // 编译css"poSEO靠我stcss-loader","less-loader" // 编译less]}, plugins: [new MiniCssExtractPlugin({filename: "css/SEO靠我[name]_[contenthash:6].css",chunkFilename: "[id].css"})]

5、代码压缩

6、JS代码压缩

mode:production，使用的是terser-webSEO靠我pack-plugin

module.exports = {// ...optimization: {minimize: true,minimizer: [new TerserPlugin({}),]}SEO靠我 }

7、CSS代码压缩

css-minimizer-webpack-plugin

module.exports = {// ...o8ptimization: {minimize: truSEO靠我e,minimizer: [new CssMinimizerPlugin({})]} }

8、Html文件代码压缩

module.exports = {...plugin:[new HtmSEO靠我lwebpackPlugin({...minify:{minifyCSS:false, // 是否压缩csscollapseWhitespace:false, // 是否折叠空格removeCommeSEO靠我nts:true // 是否移除注释}})] }

设置了minify，实际会使用另一个插件html-minifier-terser

9、文件大小压缩

对文件的大小进行压缩，减少http传输过SEO靠我程中宽带的损耗。

npm install compression-webpack-plugin -D new ComepressionPlugin({test:/.(css|js)$/,SEO靠我 // 哪些文件需要压缩threshold:500, // 设置文件多大开始压缩minRatio:0.7, // 至少压缩的比例algorithm:"gzip", // 采用的压缩算法 SEO靠我 })

10、图片压缩

一般来说在打包之后，一些图片文件的大小是远远要比 js 或者 css 文件要来的大，所以图片压缩较为重要。

配置方法如下：module: {rules: [{test: /.(pngSEO靠我|jpg|gif)$/,use: [{loader: file-loader,options: {name: [name]_[hash].[ext],outputPath: images/,}},{lSEO靠我oader: image-webpack-loader,options: {// 压缩 jpeg 的配置mozjpeg: {progressive: true,quality: 65},// 使用 iSEO靠我magemin**-optipng 压缩 png，enable: false 为关闭optipng: {enabled: false,},// 使用 imagemin-pngquant 压缩 pngpSEO靠我ngquant: {quality: 65-90,speed: 4},// 压缩 gif 的配置gifsicle: {interlaced: false,},// 开启 webp，会把 jpg 和 pSEO靠我ng 图片压缩为 webp 格式webp: {quality: 75}}}]},] }

11、Tree shaking 去除死代码

Tree Shaking 是一个术语，在计算机中表示消除SEO靠我死代码，依赖于ES Module的静态语法分析（不执行任何的代码，可以明确知道模块的依赖关系）

在webpack实现Tree shaking有两种不同的方案：

usedExports：通过标记某些函数是否SEO靠我被使用，之后通过Terser来进行优化的sideEffects：跳过整个模块/文件，直接查看该文件是否有副作用

两种不同的配置方案， 有不同的效果

12、usedExports

配置方法也很简单，只需要将uSEO靠我sedExports设为true。

module.exports = {...optimization:{usedExports}

使用之后，没被用上的代码在webpack打包中会加入unused harSEO靠我mony export mul注释，用来告知 Terser 在优化时，可以删除掉这段代码。

13、sideEffects

sideEffects用于告知webpack compiler哪些模块时有副作用，SEO靠我配置方法是在package.json中设置sideEffects属性

如果sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports

如果有些文件需要保留，可以设置SEO靠我为数组的形式。

"sideEffecis":["./src/util/format.js","*.css" // 所有的css文件 ]

上述都是关于javascript的tree shakSEO靠我ing，css同样也能够实现tree shaking

14、css tree shaking

css进行tree shaking优化可以安装PurgeCss插件

npm install purgecss-pSEO靠我lugin-webpack -D const PurgeCssPlugin = require(purgecss-webpack-plugin) module.expSEO靠我orts = {...plugins:[new PurgeCssPlugin({path:glob.sync(`${path.resolve(./src)}/**/*`), {nodir:true}/SEO靠我/ src里面的所有文件satelist:function(){return {standard:["html"]}}})] } paths：表示要检测哪些目录下的内SEO靠我容需要被分析，配合使用glob默认情况下，Purgecss会将我们的html标签的样式移除掉，如果我们希望保留，可以添加一个safelist的属性

15、babel-plugin-transform-rSEO靠我untime减少ES6转化ES5的冗余

Babel 插件会在将 ES6 代码转换成 ES5 代码时会注入一些辅助函数。在默认情况下， Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码，如果多个源SEO靠我代码文件都依赖这些辅助函数，那么这些辅助函数的代码将会出现很多次，造成代码冗余。为了不让这些辅助函数的代码重复出现，可以在依赖它们时通过 require(‘babel-runtime/helpers/SEO靠我createClass’) 的方式导入，这样就能做到只让它们出现一次。babel-plugin-transform-runtime 插件就是用来实现这个作用的，将相关辅助函数进行替换成导入语句，从而减SEO靠我小 babel 编译出来的代码的文件大小。

16、代码分离

将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件

默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂SEO靠我时没有用到的模块）在首页全部都加载，就会影响首页的加载速度

代码分离可以分出更小的bundle，以及控制资源加载优先级，提供代码的加载性能

这里通过splitChunksPlugin来实现，该插件webpSEO靠我ack已经默认安装和集成，只需要配置即可

默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all。

module.exports = {...optimizatiSEO靠我on:{splitChunks:{chunks:"all"}} }

splitChunks主要属性有如下：

Chunks，对同步代码还是异步代码进行处理minSize：拆分包的大小, 至少SEO靠我为minSize，如何包的大小不超过minSize，这个包不会拆分maxSize：将大于maxSize的包，拆分为不小于minSize的包minChunks：被引入的次数，默认是1

17、多线程打包提升SEO靠我打包速度

六、vue

1、v-for添加key

2、路由懒加载

3、第三方插件按需引入

4、合理使用computed和watch

5、v-for的同时避免使用v-if

6、destory时销毁事件

比如：addEveSEO靠我ntListener添加的事件、setTimeout、setInterval、bus.$on绑定的监听事件等

七、react

1、map循环展示添加key

2、路由懒加载

3、第三方插件按需引入

4、使用scuSEO靠我，memo或者pureComponent避免不必要的渲染

5、合理使用useMemo、memo、useCallback

他们三个的应用场景都是缓存结果，当依赖值没有改变时避免不必要的计算或者渲染。

useCSEO靠我allback 是针对函数进行“记忆”的，当它依赖项没有发生改变时，那么该函数的引用并不会随着组件的刷新而被重新赋值。当我们觉得一个函数不需要随着组件的更新而更新引用地址的时候，我们就可以使用 useSEO靠我Callback 去修饰它。React.memo 是对组件进行 “记忆”，当它接收的 props 没有发生改变的时候，那么它将返回上次渲染的结果，不会重新执行函数返回新的渲染结果。React.useMSEO靠我emo是针对 值计算 的一种“记忆“，当依赖项没有发生改变时，那么无需再去计算，直接使用之前的值，对于组件而言，这带来的一个好处就是，可以减少一些计算，避免一些多余的渲染。当我们遇到一些数据需要在组件SEO靠我内部进行计算的时候，可以考虑一下 React.useMemo