前端页面性能优化整理

1. 减少http请求

• 合并css文件
  

• 使用精灵图（也可以使用iconfont、base64等）
  

• 懒加载
  

• 合理使用缓存
  

2. 减少操作dom

• 尽量不要直接操作dom（会触发重绘、重构），如果一定要操作，可以使用documentFlagment
  

• 图片压缩、尺寸控制在2倍图或3倍图
  

• 如果要操作nodeList，需要转化成Array后再进行修改
  

3. css方向

• css样式尽量使用简写
  

• 一些属性比较耗费性能，要慎重使用，比如：border-radius, box-shadow, filter, :nth-child
  

• link放在页面顶部，或者使用preload
  

• 尽量用css替换图片（浏览器操作图片很耗性能）
  

4. js方向

• 慎重使用闭包、with语句（会造成内存泄漏）、eval（不能优化上下文）
  

• js文件放在页面底部，因为js文件会阻塞页面，也可以使用async|defer
  

5. cnd方向

• 增加cdn服务器
  

• 将资源放在多个cdn域名上，提高并行加载数量
  

6. Head缓存

• 使用expires、catch-control、etag、Last-Modified 缓存资源，可以有效减少请求，提升加载速度和用户体验
  

7. 交互优化

• 页面懒加载可以有效节省流量资源，提升用户体验
  

• 一些活动页面，可以使用图片预加载，在接口处理完后，提前加载未展示组件内部的图片
  

• 简化设计方案
  

• 页面滚动时，避免页面hover事件
  

8. http2优势

• 多路复用
  

• 二进制传输数据
  

• head头压缩
  

• 直接将资源存到客户端缓存中
  

9. react 方面优化

• memo 
  

• pureComponent 
  

• useMemo 
  

• react-lazy 
  

• react-loadable
  

  父组件更新时，也会触发子组件的更新（即使子组件的数据没有变化） 所以就有了 memo、useMemo 和 pureComponent，只有子组件依赖的数据变化了，才会触发子组件更新，或者使用shoudComponentUpdate自定义判断逻辑

memo、useMemo 和 pureComponent区别

•   useMemo 通过某个字段 判断副作用是否需要更新 
  

•   pPureComponent针对类组件，React.memo针对函数式组件
  

•   React.memo可以传入第二个参数，props比较函数，自定义比较逻辑，PureComponent只会使用默认的props浅比较
  

react-lazy|react-loadable

• react-lazy|react-loadable 处理router懒加载的中间件