前端性能优化
性能优化的方向
如何提高网页的加载速度
- 保持低代码冗余度
- 对于引用的第三方模块，采用CDN方式引入， 不要打包到代码中
- 充分发挥webpack等工具的treeshaking， 避免打包冗余代码
- 对代码压缩优化
- 对于不改变的库或者分包名，不要改变包名，充分利用浏览器的缓存功能
经过这样的操作我们就得到了一份低冗余度的代码，然而这仍然是不够的，即使我们代码冗余度很低，但是如果项目足够大，仍然会造成http加载资源的速度过慢
- 尽量使用异步加载组件， esm为我们提供了import()的异步引入函数， 例如在vue组件中使用（）=》import(’’)的方式
- webpack可以使用splitchunk 的优化项， 此优化项一般来说只会对懒加载的组件有效，在http请求30个以内尽量拆分小的包，来进行异步加载
运行时的性能优化
运行时的网页优化思路，就是避免卡死主线程， 减少主线程的js工作量
- 避免回流重绘， 减少操作dom，避免改变dom形状与颜色。*
- 如果有动画需求，尽量使用transform来进行操作，因为transform的行为运行在合成线程和栅格化线程中，
并不会阻塞主线程的运行 - 使用DocumentFragment创建游离节点， 它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题， 它在插入操作时只会触发一次重绘重排
- 避免大的计算量的任务
- 计算量任务尽量放在后端进行计算好，尽量做到前端拿来就用
- 如果有会影响到主线程运行的计算任务， 放在webworker中运行
- 还可以使用requestAnimationFrame() api来进行优化， 这个api会在每一帧刷新之前调用， js需要在这个函数中把执行权交还渲染流程，以免造成线程阻塞
|