[toc] ### 1.网络优化策略 1. 减少http请求，合并js，css，合理内嵌css, js 2. 设置服务端缓存，提高服务端处理速度，强缓存，协商缓存 ```js 强缓存：// Expires/Cache-Control 协商缓存：// Etag/last-modified, if-modified-since/last-modified ``` 3. 避免重定向，重定向会降低响应速度(301, 302) 4. 使用dns-prefetch，实现dns预解析 ```js <link ref="dns-prefetch" href="" > ``` 5. 域名分片技术，将资源放到不同的域名下。解决同一个域名最多处理6个tcp链接问题 6. 采用cdn，加快访问速度 ``` cdn：内容分发网络，指派最近的网络服务提供资源 ``` 7. gzip压缩优化对传输资源进行体积压缩(html, js, css) ```js Content-Encoding: gzip ``` 8. 加载数据优化级： + preload(预先请求当前页面需要的资源)，首页的内容都用preload + prefetch（空闲的时候请求资源，将数据缓存到http缓存中），子页的内容都用prefetch ```js <link ref="preload" href="style.css"> ``` ### 2.减少重绘和重排 关键渲染路径： ```js js触发视觉变化 -> 样式计算 -> 重排布局(回流) -> 重绘绘制 -> 合成 ``` 重排（回流）Reflow：添加元素，删除元素，修改大小，移动元素位置，获取位置相关信息 重绘Repaint：页面中元素样式的改变并不影响它在文档流中的位置 + 脱离文档流：absolute定位 + 渲染时给图片固定宽高 + 尽量使用css3动画(scale替代width，因为css3绘制会少一些) + will-change: transform，gpu加速，会产生一个覆盖的图层，变化不会影响文档流 ### 3.静态文件优化 #### 1.图片优化 + 图片懒加载，原生的图片懒加载，loading="lazy" ```js <img loading="lazy" src="./images/1.jpg" width="300" height="450" /> ``` + 减少图片尺寸 + img 设置 alt 属性，也可以提升 seo 优化，图片给宽高 + 采用 base64url减少图片请求 + 采用渐进式图片，从模糊到清晰，ui提供 #### 2.HTML优化 + 语义化html，nav, section, bottom，提高 seo #### 3.css优化 1.减少伪类选择器，减少样式层数，减少通配符 2.删除空行，注释，无意义单位，css压缩 3.抽离css：使用外链css，可以对css进行缓存 4.减少@import使用，因为@import采用的是串行加载 #### 4.JS优化 1. 使用async, defer 异步加载文件 2. 减少dom操作 3. 操作dom时，使用虚拟dom，最后再一口气添加到真实dom 4. webWorker