前端性能优化方法

0.引言

总的来说性能优化这个领域的很多内容都很碎⽚化。

1. 加载优化

CDN 的原理是尽可能的在各个地⽅分布机房缓存数据，这样即使我们的根服务器远在国外，在国内的⽤户也可以通过国内的机房迅速加载资源。因此，我们可以将静态资源尽量使⽤ CDN 加载，由于浏览器对于单个域名有
并发请求上限，可以考虑使⽤多个 CDN 域名。

1. 压缩合并
2. 代码分割(code spliting)，可以基于路由或动态加载
3. 第三方模块放在CDN
4. 大模块异步加载，例如: Echarts，可以使用require.ensure，在加载成功后，在显示对应图表
5. 小模块适度合并，将一些零散的小模块合并一起加载，速度较快
6. 可以使用pefetch预加载，在分步场景中非常适合

2. 图片优化

图片懒加载–实现原理是判断当前图片是否到了可视区域进行加载，目的是减轻服务器的压力、减少请求数或延迟请求数。
图片懒加载有以下优点：

减少资源的加载，页面启动只加载首屏的图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
防止并发加载的资源过多而阻塞 js 的加载，影响整个网站的启动。
能提升用户的体验，不妨设想下，用户打开页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长这就严重影响用户体验。
步骤：先获取所有图片的 dom，通过 document.body.clientHeight 获取可视区高度，再使用 element.getBoundingClientRect() API 直接得到元素相对浏览的 top 值， 遍历每个图片判断当前图片是否到了可视区范围内。
scroll 事件加一个节流函数来控制函数的多次触发，在一段时间内（如 200ms）只执行一次回调。

1. 小图使用雪碧图(将多个图标文件整合到一张图中)，iconFont，base64格式内联，目的是大幅减轻服务器对图片的请求数量。
2. 图片使用懒加载
3. 图片一定要压缩：减少像素点、减少每个像素点显示的颜色。
4. 可以使用的img的srcset，根据不同分辨率显示不同尺寸图片，这样既保证显示效果，又能节省带宽，提高加载速度

前端中关于雪碧图的操作

3. css优化

CSS 优化主要是四个方面：

1. 加载性能
2. 选择器性能
3. 渲染性能
4. 可维护性、健壮性
   解决方法：
   1. css写在头部
   2. 避免css表达式
   3. 移除空置的css规则
   4. 将CSS和JS放到外部文件中
   5. 剔除重复的JS和CSS（一般大的工程很容易出现这样的问题）
   6. 避免行内style样式
   7. 遵守编码规范、语义化标签，避免乱嵌套，合理命名属性,使用高效简洁的css选择器等等

4. js优化

由于脚本会阻塞页面其他资源的下载，因此推荐将所有

5. 渲染优化

1. 尽量减少reflow和repaint 涉及到样式，尺寸，节点增减的操作，都会触发reflow和repaint。
1.1 用变量缓存dom样式，不要频繁读取
1.2 通过DocumentFragment或innerHTML批量操作dom
1.3 dom隐藏，或复制到内存中，类似virtual dom，进行修改，完成后再替换回去
1.4 动画元素一定要absolute，脱离文档流，不影响其他元素。动画不要用left，top等操作，要使用transform和opacity，同时开启渲染层(will-change或translate3d(0,0,0))
1.5 动画尽量用requestAnimationFrame，不要用定时器
1.6 移动端硬件加速，触发GPU渲染，还是translate3d(0,0,0)

6. 首屏优化 原则：显示快，滚动流畅，懒加载，懒执行，渐进展现

1. 代码分离，将首屏不需要的代码分离出去
2. 服务端渲染或预渲染，加载完html直接渲染，减少白屏时间
3. DNS prefetch，使用dns-prefetch减少dns查询时间，PC端域名发散，移动端域名收敛
4. 减少关键路径css，可以将关键的css内联，这样可以减少加载和渲染时间

7. 打包优化（主要是webpack优化）

DllPlugin 可以将特定的类库提前打包然后引⼊。这种⽅式可以极⼤的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独⽂件的优化⽅案。

1. 拆包--externals dllPlugin
2. 提取公共包 commonChunkPlugin或splitChunks
3. 缩小范围(优化Loader) --优化 Loader 的⽂件搜索范围：各种loader配置include和exclude，noParse跳过文件。
4. 开启缓存 各种loader开启cache
5. 多线程加速 HappyPack 或thead-loader--HappyPack 可以将 Loader 的同步执⾏转换为并⾏的，这样就能充分利⽤系统资源来加快打包效率了
6. 代码压缩--将 mode 设置为production 
7. tree-shaking--(可以实现删除项⽬中未被引⽤的代码) ES模块分析，移除死代码
8. Scope Hoisting --(会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到⼀个函数中去)ES6模块分析，将多个模块合并到一个函数里，减少内存占用，减小体积，提示运行速度

8. webpack长缓存优化

1. js文件使用chunkhash，不使用hash
2. css文件使用contenthash，不使用chunkhash，不受js变化影响
3. 提取vendor，公共库不受业务模块变化影响
4. 内联webpack runtime到页面，chunkId变化不影响vendor
5. 保证module Id稳定，不使用数字作为模块id，改用文件内容的hash值，使用HashedModuleIdsPlugin，模块的新增或删除，会导致其后面的所有模块id重新排序，为避免这个问题
6. 保证chunkhash稳定，使用webpack-chunk-hash，替代webpack自己的hash算法。webpack自己的hash算法，对于同一个文件，在不同开发环境下，会计算出不用的hash值，不能满足跨平台需求。

9. vue优化

懒加载是当路由被访问的时候才加载对应组件，而不是在首页就全部加载，以此来提高首页反应速度。
v-show，v-if 用哪个？
（1）只要涉及到权限相关的展示无疑要用 v-if
（2）在没有权限限制时根据用户点击的频次选择，频繁切换的使用 v-show，不频繁切换的使用 v-if（减少页面中 dom 数量）

1. 路由懒加载组件
2. keep-alive缓存组件：用来缓存组件,避免多次加载相应的组件,减少性能消耗，保持原显示状态 
3. v-for遍历避免同时使用v-if （使用computed属性过滤需要显示的数据项 ）
4. 长列表性能优化
(1)如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应话, 使用object.freeze(data)
(2)如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容，参考vue-virtual-scroller、vue-virtual-scroll-list
5. 事件的销毁 vue组件销毁时，会自动解绑它的全部指令及事件监听，但是仅限于组件本身的限制 
6. 图片懒加载 
7. 第三方插件按需引入，像element-ui这样的第三方组件库可以按需引入避免体积太大。 
8. 列表项添加key，key 可以唯一标识一个循环个体，保证唯一
9. 列表项绑定事件，使用事件代理(v-for)
10. v-if和v-for不要用在一个标签上，它会在每个项上进行v-if判断
11. 合理利用vue生命周期，减少在created生命周期中做ajax请求,而是放在mounted生命周期中,以不阻塞页面生成dom

10. react优化

1. 路由组件懒加载，使用react-loadable
2. 类组件添加shouldComponent或PureComponent
3. 函数组件添加React.memo
4. 列表项添加key，保证唯一
5. 函数组件使用hook优化，useMemo，useCallback

11. SEO优化

1. 添加各种meta信息
2. 预渲染
3. 服务端渲染