2021-3-29 前端性能优化相关措施

性能优化措施

1.减少重排和重绘

1. 避免多次直接操作DOM，可以采用document.createDocumentFragment()文档片段，直接替换 只会触发一次。
2. 修改样式的时候，如果存在多次修改同一元素的宽高等，建议直接赋值class只会触发一次重排
3. 缓存布局高度属性，比如offset/clientHeight这种，会重置渲染队列，强制触发重排

参考 前端性能优化之重排和重绘

2.减少HTTP请求

1. 对于静态文件，启用强缓存，【使用文件后缀加hash值来避免浏览器缓存已经更新了的文件】
2. css采用雪碧图，将多个图片合成一张
3. 对于不常更新的ajax请求，采用过期时间短的强缓存【避免获得脏数据】
4. 采用节流和防抖，避免重复发送相同的http请求

3.首屏优化

1. 减少打包文件体积，考虑采用CDN【还可以负载均衡】，按需加载第三方依赖等方法
2. 采用SSR（服务端渲染），直接返回渲染好的HTML，显著减少加载时间
3. 服务端对于静态资源，开启gzip压缩
4. 路由、组件懒加载

4.虚拟DOM和操作真实DOM性能哪个好？

简单来说，虚拟DOM的最大优势，不是性能好，而是优化了使用模板渲染带来的性能损耗。

1. 在没有虚拟DOM以前，每次修改模板里的值，整个DOM都需要重新渲染，多次重排，性能非常低
2. 有了虚拟DOM后，每次模板更新，会使用diff算法（O(n)）去生成新的虚拟DOM，再挂载到真实DOM上，其中存在依赖收集和队列判重的过程，同一个vue实例对应一个watcher只会进一次同步队列，即保证了多次修改同一模板上的值，只会触发一次render,只会触发一次重排
3. 在现代浏览器中，存在渲染队列，即如果你多次操作DOM，他不会触发多次渲染->重排，而是会缓存操作进队列，只会触发一次渲染->重排。所以实际上，虚拟DOM在这种场景下，由于还需要走diff算法等额外开销，性能是不如直接操作真实DOM的

浏览器渲染队列机制

前端性能优化之重排和重绘