一篇文章总结所有的前端性能优化方案/优化场景/优化指标

1. 用户体验方面的优化
   1. 首屏加载优化 FCP
      1. 使用懒加载  
         1. 动态加载
         2. 按需加载
      2. 使用骨架屏
      3. 使用缓存
         1. 本地缓存 web storage
         2. http 缓存
         3. cdn 缓存
      4. 资源压缩
         1. 图片压缩
         2. 打包后的静态资源压缩 
            1. 使用 compress-webpack-plugin
         3. 开启 gzip 压缩
            1. http网络传输中，服务端配置Gzip 压缩来对数据进行压缩，浏览器接收到压缩的响应后会自动解压
            2. express 开始 Gzip 压缩的方式
            3. 
      5. 使用SSR
2. 代码层面的优化
   1. 图片优化
      1. 图片压缩
         1. 打包过程中，使用 image-webpack-loader 压缩
         2. 使用 tinypng 压缩
      2. 合理选择图片格式
         1. 使用 jpeg/jpg 格式的图片
            1. 24 位存储单个图，可以呈现多达 1600 万种颜色
            2. jpeg 有损压缩
            3. 多用作大背景图、轮播图、banner
            4. 不适合做 logo 等线条感强、颜色对比强烈的图片，会模糊
            5. 不支持透明处理
         2. 使用 png
            1. 支持 8 位和 24 位，8 位的 PNG 最多支持 256 种颜色，而 24 位的可以呈现约 1600 万种颜色。
            2. 无损压缩
            3. 支持透明度
            4. 体积大
            5. 色彩表现力强，对线条的处理更加细腻
            6. 可用于小 logo、颜色简单且对比强烈的图片或背景
         3. 使用 gif
            1. 最多支持 256 种颜色的 8 位
            2. 无损压缩
            3. 文件体积很小
            4. 支持透明
            5. 支持动图
            6. 适合展示一些无限循环的动画，表情、图标
            7. 只适合简单色彩的图片
         4. webp
            1. 可以支持丰富的图片细节
            2. 支持有损压缩和无损压缩
            3. 支持透明
            4. 支持动图
            5. 集万千优点于一身
            6. 文件体积小
            7. 兼容性不太好
      3. 使用雪碧图
         1. 就是 css Sprites ，是一种 css 图片合成技术，用于展示小图片
         2. 把小图片合成大图片，使用 background-position 定位
         3. 减少多个图片的 http 请求
         4. 是用于页面图片多且丰富的场景
         5. 缺点是生成的图片体积较大，减少了请求的同时增加了图片大小，不合理拆分将不利于加载
         6. 使用 webpack-spritesmith / postcss-sprites 生成雪碧图
      4. 使用 iconfont 字体图标
         1. 通过字体的方式展示图标，用于渲染图标，简单图形，特殊字体
         2. 可以设置大小、颜色、样式，不失真
         3. 轻量，易修改
         4. 减少 http 请求次数
         5. 可以使用 iconfont 字体库
      5. 使用 svg 图标字体
         1. 类似 iconfont
         2. 以矢量形式显示图标，并可以通过 css 来控制样式和颜色
         3. 图标的分辨率不会受限于字体大小，因为是矢量图
         4. 相同的图标不同的颜色只需要一个svg图片
         5. 更加灵活，可以使用css/js进行更复杂的动态效果和交互操作
         6. 可以学习svg 原理
      6. 使用 base64 格式
         1. 将图片转成 base64 格式，以字符串的形式在 css 中使用
         2. 减少 https 请求
         3. 方便在样式中引用，写个样式放入全局的css文件中即可，因为是一个字符串
         4. webpack 中 url-loader 的 limit 字段，表示小于配置的文件都转成 base64
            1. 
         5. base64 的本质是 DataURL
      7. 使用 cdn 缓存
         1. 内容分发网络
      8. 图片懒加载
         1. 只请求可视区域的图片
         2. 暂时不设置 img 的 src 属性，注意不赋值 src 就不会发起 http 请求
         3. 而把图片 url 存放在data-src中
         4. 图片到了可视区域再给 src 赋值，才发起网络请求
         5. 判断是否到可视区域
            1. 可以监听 scroll 时间，根据 scrollTop、offsetHeight 等属性计算
            2. 可以使用 intersectionObserver 监听
      9. 图片预加载
         1. 提前加载图片资源
         2. 使用 js
            1. new Image 创建对象，然后赋值 src
            2. 可以监听 load 事件，在图片加载完之后执行对应操作
            3. 可以在页面window.onload 后再加载，不会影响页面的加载
            4. 当其他地方使用同一个图片时，会使用浏览器的缓存
         3. 使用 css 隐藏预加载图片
            1. 通过c ss 的 background 属性，将图片与加载到屏幕外的背景上
            2. 当其他地方使用同一个图片时，会使用浏览器的缓存
            3. 但是加载的图片会同页面的其他内容一起加载，增加页面的整体加载时间
      10. 响应式图片加载
          1. 根据不同分辨率的设备显示不同尺寸的图片
          2. 使用媒体查询，媒体查询可以根据不同的条件，选择加载合适的图片资源
          3. 使用 h5 的 picture 属性进行响应式处理
             1. picture 标签
             2. 内放置多个source标签，指定不同图片
             3. 根据 media 指定不同的现实条件
             4. 兼容不太好
             5. 
      11. 渐进式图片
          1. 先显示一张模糊的图，然后逐步替换成清晰的图
          2. 模糊的图尺寸小，加载快
   2. js 代码优化
      1. 将非必要脚本script标签放到body底部
         1. 如果不设置 async/defer 放在 head 的 script 会阻塞 html 解析/渲染
      2. 脚本异步加载
         1. async  异步加载，加载完执行，会阻塞 html 解析，多个脚本按照加载顺序执行
         2. defer 异步加载，加载完等 html 解析完再执行，不会阻塞 html 解析，多个脚本按顺序执行
         3. 使用 web workers 执行 js 脚本
      3. 脚本压缩
         1. 使用 compression-webpack-plugin 减小文件大小
      4. 使用 keep-alive等缓存
      5. 使用v-show代替v-if（看情况）
      6. 使用 节流/ 防抖
      7. 图片懒加载
      8. 组件动态/按需导入
      9. 减少 cookie 大小
      10. 引入资源的域名不要包含 cookie
   3. css 优化
      1. 资源压缩
         1. 打包过程中 compression-webpack-plugin  压缩文件
         2. css-minimizer-webpack-plugin 压缩优化
         3. 打包过程中 purgecss-webpack-plugin 对css 进行 tree-shaking
      2. 首屏使用内联样式
      3. 异步加载 css 
         1. 如果js 中有对样式的引用，那么 css 会阻塞渲染
         2. link 不会阻塞解析，但是会阻塞渲染
      4. 合理使用选择器
         1. 减少嵌套层级，最好不好超过3层
         2. 使用 id 选择器就没必要再进行嵌套
         3. 通配符和属性选择器效率低，少用
         4. 避免使用 !important
         5. 尽可能精简
         6. 使用语义话的名字，BEM规范命名
         7. 避免后代选择器
         8. 避免链式选择符
      5. 样式隔离
         1. 内联样式
         2. css-in js
         3. 模块化 css 文件
         4. css 作用域隔离，使用 scope
      6. 减少使用昂贵的属性
         1. box-shadow /border-radius/filter等
         2. 页面发生重绘的时候，昂贵属性会降低性能
      7. 使用 gpu 加速
         1. css3 动画使用 transform 和 opacity / filter/animation/transition，不适用 left ,top 等
         2. 前者是硬件加速，浏览器有专门的合成线程
      8. 不要使用 @import
         1. 会增加额外的延迟
         2. 多个 @import 会导致下载顺序紊乱

         3. 比如一个css文件index.css包含了以下内容：@import url("reset.css")

            那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

      9. 减少重排和不必要的重绘

      10. cssSprite 合成icon，

          1. 多个小图标或按钮合并成一张大图，并使用 CSS 的 background-position/background-image/background-repeat 属性将相应的图标或按钮定位到正确的位置上

          2. 可以减少 http 请求次数

      11. 把小的 icon 图片转成 base64 编码

3. 请求服务相关的优化

   1. 减少http请求

   2. 使用 http2

      1. h2 相对于 http1.1 没有并发限制

      2. 但是浏览器可能会做一些限制

         1. ​​​​​​​对操作系统资源的考虑

         2. 过多并发导致线程频繁切换产生性能问题

         3. 避免统一客户端发送大量请求超过服务器的并发阈值 【DDOS 攻击】

   3. 开启 http 使用缓存

      1. ​​​​​​​强缓存

      2. 协商缓存

   4. 服务端开始 gzip 压缩

   5. 减少 DNS 查询

   6. 减少 iframe 数量

   7. 使用 CDN

4. 使用 webpack 等构建工具优化性能

   1. ​​​​​​​代码分割

   2. 代码压缩

   3. 图片/资源大小压缩

   4. tree-shaking