性能优化概览
优化的角度
1、耗时
网络耗时、页面加载耗时、脚本执行耗时、渲染耗时等耗时情况会影响用户的等待时长
2、资源占用
cpu 占用、内存占用、本地缓存占用等可能回导致页面卡顿甚至卡死
时间角度优化：减少耗时
页面加载过程中，会进行：
网络请求获取资源
浏览器解析 HTML 和渲染页面
加载 JavaScript 代码时会暂停页面渲染
浏览器首次加载和渲染完之后，页面还会分别进入开始渲染、渲染完成、用户可交互等阶段
因此从四个方面进行耗时优化：
1、网络请求优化
2、首屏加载优化
3、渲染过程优化
4、计算/逻辑运行提速
在前端性能优化实践中，网络请求优化和首屏加载优化方案使用频率最高
网络请求优化
1、请求链路
DNS 查询、部署 DNS 节点、缓存等
使用缓存，比如 DNS 缓存、CDN 缓存、HTTP 缓存、后台缓存等等，还可以考虑使用 Service Worker、PWA 等计数
考虑使用 HTTP/2、HTTP/3 等提升资源请求速度，以及对多个请求合并，减少通信次数；对请求进行域名拆分，提升并发请求数量
2、数据大小
代码大小、图片资源等
对请求资源进行合理的拆分（CSS，JavaScript 脚本，图片/音频/视频等）和压缩，减少请求资源体积，比如使用 Tree-shaking、代码分割、移除用不上的依赖项等
首屏加载优化
1、将页面尽快展示给用户，减少页面白屏时间
首屏加载耗时优化，使用一些过渡的动画，让用户感知到页面正在顺利加载，从而避免用户对于白屏页面或是静止页面产生烦躁和困惑
对页面的内容进行分片/分屏加载
仅加载需要的资源，通过异步或是懒加载的方式加载剩余资源
使用骨架屏进行预渲染
使用差异化服务，比如读写分离，对于不同场景按需加载所需要的模块
使用服务端直出渲染，减少页面二次请求和渲染的耗时
2、将用户可操作的时间提前，避免用户无法操作的卡顿体验
配合客户端进行资源预请求和预加载，比如使用预热 Web 容器
配合客户端将资源和数据进行离线，可用于下一次页面的快速渲染
使用秒看技术，通过生成预览图片的方式提前将页面内容提供给用户
渲染过程优化
减少用户的操作等待时间，以及通过将页面渲染帧率保持在 60FPS 左右，提升页面交互和渲染的流畅度
使用资源预加载，提升空闲时间的资源利用率
减少/合并 DOM 操作，减少浏览器渲染过程中的计算耗时
使用离屏渲染，在页面不可见的地方提前进行渲染（比如 Canvas 离屏渲染）
通过合理使用浏览器 GPU 能力，提升浏览器渲染效率（比如使用 css transform 代替 Canvas 缩放绘制）
计算/逻辑运行提速
拆大为小、多路并行
通过将 Javscript 大任务进行拆解，结合异步任务的管理，避免出现长时间计算导致页面卡顿的情况
将耗时长且非关键逻辑的计算拆离，比如使用 Web Worker
JS执行100万个并发任务，如何保证浏览器不卡顿？
通过使用运行效率更高的方式，减少计算耗时，比如使用 WebAssembly
通过将计算过程提前，减少计算等待时长，比如使用 AOT 技术
通过使用更优的算法或是存储结构，提升计算效率，比如 VSCode 使用红黑树优化文本缓冲区的计算
通过将计算结果缓存的方式，减少运算次数
空间角度优化：降低资源占用
资源占用常见的优化方式包括：
合理使用缓存，不滥用用户的缓存资源（比如浏览器缓存、IndexDB），及时进行缓存清理
避免存在内存泄露，比如尽量避免全局变量的使用、及时解除引用等
避免复杂/异常的递归调用，导致调用栈的溢出
通过使用数据结构享元的方式，减少对象的创建，从而减少内存占用