> For the complete documentation index, see [llms.txt](https://bvct1742.gitbook.io/one-book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bvct1742.gitbook.io/one-book/knowledge/http/qian-duan-xing-neng-you-hua.md). # 前端性能优化 前端性能优化：减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用更好性能的api和构建优化。 参考链接: [前端性能优化的七大手段](https://www.cnblogs.com/xiaohuochai/p/9178390.html#anchor1) #### 减少请求数量 **合并** 如果不合并影响 * 文件之间插入的上行请求，增加了 n - 1 个网络延迟 * 受丢包问题影响更严重 * 经过代理服务器时可能会被断开 合并带来的问题 * 首屏渲染 * 缓存失效 建议 * 公共库合并 * 不同页面单独合并 **图片处理** ``` 1. 雪碧图 减少了请求数量，但如果图片过大一次加载过慢。现在因字体图片和 svg 图片流行渐渐使用少了 2. base64 base64 格式嵌入到 html 中，减少了请求数量，但是编码用8位字符表示信息中的6个位，编码后大小比原始值扩大了 33% 3. 使用字体图标来替代图片 ``` **减少重定向** 如果使用重定向，要使用 301 永久重定向 **使用缓存** Cache-Control 和 Expires **不使用 @import** **避免使用空 src 和 href** #### 减小资源大小 **压缩** * html 压缩 * css 压缩 * js 压缩与混淆 * 图片压缩（tinypng） **gzip** #### 优化网络连接 **cdn(Content Delivery Network)** **dns 预解析** ```markup ``` **并行连接** 域名发散，使用多个域名增加并发数 **持久连接** keep-alive **管道化连接** http2协议，单条连接多路复用 #### 优化资源下载 **资源加载位置** css 头部，js 尾部，布局 js 放在 head 中 **资源加载时机** 1. 异步 script 标签 ``` defer: html 加载完后执行 async: 下载完成立即执行 2. 模块按需加载 webpack 1. import() 2.require.ensure 3. 懒加载 ``` #### 减少重绘回流 **样式** 1. 避免使用层级较深的选择器 2. 避免使用 css 表达式 3. 避免使用 table 布局 4. 能用 css 尽量不要用 js **渲染层** 1. 将需要多次重绘的元素独立，如设置 absolute，可以减少重绘范围 2. 动画使用硬件渲染 **dom 优化** 1. 缓存 dom 2. 减少 dom 深度和数量 3. 批量操作 dom 4. * 事件代理 5. * 防抖节流 6. 及时清理环境 #### 使用更好的api **用对 css 选择器** **使用 requestAnimationFrame 替代计时器** **使用 IntersectionObserver 实现图片可视区域懒加载** **使用 webworker** #### 构建优化 webpack **打包公共代码** **动态导入 按需加载** **剔除无用代码** tree shaking js - uglifyjs css - purify css **长缓存优化** 1. hash 替换为 chunkhash 2. 使用 name 而不是 id **公用代码内联**