性能优化

Author: zhangdong

configure/opt.md

@@ -4,10 +4,10 @@ layout: doc
 ---
 
 ## 性能优化
-首先一些web指标,例如fcp,lcp等能帮助我们找到哪方面的不足,并且在后面的优化过后有一个对比的效果.并且性能优化的维度很大,对于不同场景应该具体分析
+首先一些web指标,例如fcp,lcp等能帮助我们找到哪方面的不足,并且在后面的优化过后有一个对比的效果.并且性能优化的维度很广,对于不同场景应该具体分析
 
 
-* 从打包上来看,拿webpack来说,使用webpack-bundle-analyse插件分析打包产物,对比较大的文件进行拆包，目的是保证不要太小或者太大，因为太大稍微修改之后整个文件就过期了，太小的话http请求会多发送，尽可能利用浏览器的缓存策略.最后使用gzip或者brotile压缩，当然依赖也可以直接放在cdn上
+* 从打包上来看,拿webpack来说,使用webpack-bundle-analyse插件分析打包产物,对比较大的文件进行拆包，目的是保证不要太小或者太大，因为太大稍微修改之后整个文件就过期了，太小的话http请求会多发送，尽可能利用http缓存.最后使用gzip或者brotile压缩，当然依赖也可以直接放在cdn上
 * 预操作,例如我们有使用的到图床,可以使用preconnect提前建立连接,如果有多个域名需要连接,则可以改用dns-prefetch.还可以使用preload或prefetch进行资源预加载
 * 懒加载,他既能优化资源下载又能优化页面解析.懒加载在首次加载只展示最基础的元素,所以他能减少资源下载的数量,并且如果出现重拍重绘只涉及展示的元素
 * 减少重排重绘,页面默认采用流式布局,这意味着任何元素大小位置变动都会对后面元素和内部元素产生影响,所以性能开销很大.所以不要频繁的读取布局信息,因为每读取一次就会重排一次.批量进行dom操作,可以将父元素display:none,修改结束后在将父元素置为可见,这样就只会触发一次重排.使用transform修改属性跳过重排.也可以使用虚拟列表来减少重排重绘