性能优化

页面优化分为加载优化，运行时候优化

性能优化的 24 条建议

  1. (性能优化的 24 条建议)[https://juejin.cn/post/6892994632968306702]
  2. (送你一张图，搞懂性能优化，再也不怕面试官拷问)(https://juejin.cn/post/6844904099515727886)
  3. (Web 性能领域常见的专业术语) https://github.com/berwin/Blog/issues/46)

加载优化（交付优化） && HTTP 请求

  1. 一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程

  2. 多个请求合并

  3. 精灵图

  4. 域名分片 ，减少域名解析，但是会增加域名解析时间

  5. 缓存 Etag last-modifer

  6. 减少重定向

  7. HTTP 2

  8. 解析速度快

  9. 多路复用,解决队头阻塞问题

  10. 首部压缩

  11. 优先级

  12. 流量控制

  13. 服务器主动推送数据

  14. 异步无阻塞加载 JS

  15. 优先加载关键的 CSS

  16. 懒加载

  17. 可以加载 低质量或模糊的图片，当图片加载完毕后在用完整图片替换它

  18. 可以通过 Intersection Observer 延迟加载图片、视频、广告脚本、或任何其他资源

  19. 资源提示（Resource Hints）

  20. dns-prefetch

  21. preconnect 用于启动预链接，其中包含 DNS 查找，TCP 握手，以及可选的 TLS 协议，允许浏览器减少潜在的建立连接的开销

  22. Prefetch 用于标识下一个导航可能需要的资源

  23. prerender

  24. Preload

  25. 快速响应的用户界面 web Worker 大任务 分开

  26. 可以尝试使用骨架屏或添加一些 Loading 过渡动画提示用户体验

  27. 骨架屏 是在 页面数据尚未加载前 先给用户展示出 页面的大致结构

服务端渲染

服务器会查看当前路由组件需要哪些资源文件，然后将这些文件的内容填充到 HTML 文件。如果有 ajax 请求，就会执行它进行数据预取并填充到 HTML 文件里，最后返回这个 HTML 页面。
当客户端接收到这个 HTML 页面时，可以马上就开始渲染页面。与此同时，页面也会加载资源，当必要的资源都加载完毕后，开始执行 new Vue() 开始实例化并接管页面

CSS

  1. 将 CSS 放在文件头部, 因为先加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就要将 CSS 文件放在头部了
  2. 避免 CSS 表达式
  3. 降低 CSS 选择器的复杂性

JS && 编码优化

  1. 把所有 script标签都放到文档的末尾，body之前
    把脚本放在中会导致浏览器无法并行加载其他文件，根据 HTTP 规范，浏览器每次从同一个域名中最多只能同时下载 2 个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才能下载

  2. 编码优化

    1. 字面量与局部变量的访问速度最快，数组元素和对象成员相对较慢
    2. 变量从局部作用域到全局作用域的搜索过程越长速度越慢
    3. 对象嵌套的越深，读取速度就越慢
    4. 对象在原型链中存在的位置越深，找到它的速度就越慢

  3. DOM

  4. 减少 操作 DOM

  5. 减少重排，重绘

  6. 使用事件委托

  7. 流程控制

  8. 避免使用 for…in（它能枚举到原型，所以很慢）

  9. 在 JS 中倒序循环会略微提升性能

  10. 减少迭代的次数

  11. 基于循环的迭代比基于函数的迭代快 8 倍

  12. 用 Map 表代替大量的 if-else 和 switch 会提升性能

  13. 使用 requestAnimationFrame

  14. requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的中完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒 60 帧。

  16. 使用 Web Workers

  17. 避免卡顿

静态资源优化

  1. 静态 CDN
  2. 图片
  3. 图片延迟加载 IntersectionObserver
  4. 当图片出现在浏览器的可看见区域的时候
  5. 响应式图片
  6. 通过 picture 实现
  7. @media
  8. 调整图片大小
    你有一个 1920 * 1080 大小的图片，用缩略图的方式展示给用户，并且当用户鼠标悬停在上面时才展示全图。如果用户从未真正将鼠标悬停在缩略图上，则浪费了下载图片的时间
    所以，我们可以用两张图片来实行优化。一开始，只加载缩略图，当用户悬停在图片上时，才加载大图。还有一种办法，即对大图进行延迟加载，在所有元素都加载完成后手动更改大图的 src 进行下载
  9. 降低图片质量
  10. 尽量利用 CSS3 效果代替图片
  11. 使用 webp 格式的图片
    webp 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
  12. 使用字体图标 iconfont 代替图片图标 使用 fontmin-webpack 插件对字体文件进行压缩

构建优化 && webpack

Vue

性能监控