前端性能优化思路总结

前端性能优化

性能优化的方向

• 提高网页的加载速度
• 提高运行时的性能

如何提高网页的加载速度

• 保持低代码冗余度
  • 封装公共组件库
  • 封装公共工具库或者使用成熟的类库
• 对于引用的第三方模块，采用CDN方式引入， 不要打包到代码中
• 充分发挥webpack等工具的treeshaking， 避免打包冗余代码
• 对代码压缩优化
• 对于不改变的库或者分包名，不要改变包名，充分利用浏览器的缓存功能

经过这样的操作我们就得到了一份低冗余度的代码，然而这仍然是不够的，即使我们代码冗余度很低，但是如果项目足够大，仍然会造成http加载资源的速度过慢

• 尽量使用异步加载组件， esm为我们提供了import()的异步引入函数， 例如在vue组件中使用（）=》import(’’)的方式
• webpack可以使用splitchunk 的优化项， 此优化项一般来说只会对懒加载的组件有效，在http请求30个以内尽量拆分小的包，来进行异步加载

运行时的性能优化

运行时的网页优化思路，就是避免卡死主线程， 减少主线程的js工作量

• 避免回流重绘， 减少操作dom，避免改变dom形状与颜色。*
  • 如果有动画需求，尽量使用transform来进行操作，因为transform的行为运行在合成线程和栅格化线程中，
    并不会阻塞主线程的运行
  • 使用DocumentFragment创建游离节点， 它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题， 它在插入操作时只会触发一次重绘重排
• 避免大的计算量的任务
  • 计算量任务尽量放在后端进行计算好，尽量做到前端拿来就用
  • 如果有会影响到主线程运行的计算任务， 放在webworker中运行
  • 还可以使用requestAnimationFrame() api来进行优化， 这个api会在每一帧刷新之前调用， js需要在这个函数中把执行权交还渲染流程，以免造成线程阻塞