前端性能优化

一、代码编写

1、CSS优化

（1）异步加载非首屏所需CSS——优化白屏时间
（2）不要使用嵌套过多过于复杂的选择器。
（3）去除无用CSS
（4）优化重排与重绘
重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。

会引起重排的操作：

• 添加或者删除可见的DOM元素
• 元素位置改变
• 元素尺寸改变
• 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
• 页面渲染初始化（这个无法避免）
• 浏览器窗口尺寸改变
• CSS伪类激活

常见重排元素：

• 大小有关的 width,height,padding,margin,border-width,border,min-height
• 布局有关的 display,top,position,float,left,right,bottom
• 字体有关的
  font-size,text-align,font-weight,font-family,line-height,white-space,vertical-align
• 隐藏有关的 overflow,overflow-x,overflow-y

使用以下步骤可以避免页面中的大部分重排：

• 使用绝对位置定位页面上的动画元素，将其脱离文档流
• 让元素动起来。当它扩大时，会临时覆盖部分页面。但这只是页面一个小区域的重绘过程，不会产生重排并重绘页面的大部分内容。
• 当动画结束时恢复定位，从而只会下移一次文档的其他元素
• 使用Flex时，比使用inline-block和float时重排更快，所以在布局时可以优先考虑Flex。
  （5）合并css文件
  如果页面加载10个css文件,每个文件1k，那么也要比只加载一个100k的css文件慢。
  （6）避免使用通配符（*）
  （7）提取公用样式增强可复用性

2、JS优化

（1）js中尽量减少闭包使用

• 闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能
• 还会容易造成内存的泄漏

（2）使用事件委托

（3）图片懒加载

（4）路由懒加载

（5）异步组件

• React.lazy()
• React.Suspense

二、代码打包优化

1、使用webpack压缩html、css、js代码
2、图片压缩
3、优化 SourceMap

• 开发环境推荐：cheap-module-eval-source-map
• 生产环境推荐：cheap-module-source-map

4、使用tree shaking去除无用代码
5、分割代码以按需加载