性能优化

Author: zhangdong

configure/opt.md

@@ -0,0 +1,17 @@
+---
+outline: deep
+layout: doc
+---
+
+## 性能优化
+首先一些web指标,例如fcp,lcp等能帮助我们找到哪方面的不足,并且在后面的优化过后有一个对比的效果.并且性能优化的维度很大,对于不同场景应该具体分析
+
+
+* 从打包上来看,拿webpack来说,使用webpack-bundle-analyse插件分析打包产物,对比较大的文件进行拆包，目的是保证不要太小或者太大，因为太大稍微修改之后整个文件就过期了，太小的话http请求会多发送，尽可能利用浏览器的缓存策略.最后使用gzip或者brotile压缩，当然依赖也可以直接放在cdn上
+* 预操作,例如我们有使用的到图床,可以使用preconnect提前建立连接,如果有多个域名需要连接,则可以改用dns-prefetch.还可以使用preload或prefetch进行资源预加载
+* 懒加载,他既能优化资源下载又能优化页面解析.懒加载在首次加载只展示最基础的元素,所以他能减少资源下载的数量,并且如果出现重拍重绘只涉及展示的元素
+* 减少重排重绘,页面默认采用流式布局,这意味着任何元素大小位置变动都会对后面元素和内部元素产生影响,所以性能开销很大.所以不要频繁的读取布局信息,因为每读取一次就会重排一次.批量进行dom操作,可以将父元素display:none,修改结束后在将父元素置为可见,这样就只会触发一次重排.使用transform修改属性跳过重排.也可以使用虚拟列表来减少重排重绘 
+* 图片方面可以考虑webp或者avlf格式.为了降低cls，图片尽可能设置固定宽高
+* 数据请求方面可以使用http2代替http1.1
+* 代码上要写成支持tree-shaking的格式以及提高复用率变相降低打包体积，框架上都会提供一些性能优化相关的api
+* 从指标inp来看,我们应该减少用户ui交互响应时间,这通常是因为长任务引起的阻塞,所以可以将长任务放到web woker里执行,甚至web worker里又可以创建其他线程,来加速任务的执行.充分利用现代计算机多核的优势.另一方面对于cpu密集型任务,js是一门解释型语言,我们可以利用web assembly直接提供二进制代码交给计算机执行