前端性能优化概述

⭐时间都去哪了？

由图不不难看出，脚本解析花费的时间最长，而时间第二长的便是花在了Idle（无事可做）的空闲上，这段空闲是由于等待资源加载（接口请求等）而产生的。

⭐首屏优化

0. 压缩、分包（利用浏览器并行的能力加载）、删除无用代码
1. 静态资源分离，如放在CDN上面
2. JS脚本非阻塞加载（或将其放在最底部，最后加载，以防阻塞页面渲染）
3. 合理利用缓存
4. 服务器端渲染（SSR）
5. 预置loading、骨架屏

⭐渲染优化

0. GPU加速，利用GPU来处理复合图层（像素密集型）进行“加速”

1. 减少回流、重绘，例如：

   0. 避免使用CSS表达式，因为当页面变化时，都会进行重新计算
   1. 不适用table布局，因为该布局中的一个小改动都会引起整个table重新布局，所以现在table布局已经几乎淘汰
   2. 能使用css就不使用js

2. 离屏渲染，正常情况下数据经过计算和渲染后，就会直接显示在屏幕上，而使用离屏渲染，就会在内存将画面全部渲染好，再放在页面上，以防画面过于复杂而使用户感到掉帧

3. 懒加载，将需要的资源提前加载到本地，需要时直接从缓存中取出，节约时间。

⭐JS优化

0. 防止内存泄露，比如：

   0. 使用全局变量不当产生的内存泄露
   1. DOM引用没有及时清除，导致DOM删除后但JS引用依旧存在，占用资源
   2. 定时器没有及时关闭（所以建议自己封装可以自动关闭的定时器组件）

1. 循环语句尽早break

2. 合理使用闭包

3. 减少DOM访问，因为JS引擎和渲染引擎交互较为费时，如果需要常用，要使用一个变量将其缓存起来，不要每次都去查询获取

4. 防抖——多次点击，只执行最后一次

5. 节流——一定时间内，多次调用只执行一次

6. Web Worker（工作线程），可以将一些耗时的数据处理操作从主线程中剥离出来，使主线程更加专注于页面渲染和交互。