时间角度优化：减少耗时
网络请求优化
- 请求链路：dns查询、部署cdn节点、缓存等：http缓存、后台缓存，前端还可以考虑service worker、pwa技术
- 数据大小：代码大小、图片资源：对于请求资源合理的拆分和压缩，比如代码分割、tree-shaking。
首屏加载优化
- 对页面的内容进行分片/分屏加载。
- 仅加载需要的资源，对于剩余资源采用异步或者懒加载的方式。
- 使用骨架屏进行预渲染
- 用差异化服务，比如读写分离，对于不同场景按需加载所需要的模块
- 使用服务端直接渲染，减少页面二次请求和渲染的耗时
渲染过程优化（用户的操作触发二次渲染）
- 使用资源预加载，提升空闲时间的资源利用率
- 减少/合并 DOM 操作，减少浏览器渲染过程中的计算耗时
- 使用离屏渲染，在页面不可见的地方提前进行渲染（比如 Canvas 离屏渲染）
- 通过合理使用浏览器 GPU 能力，提升浏览器渲染效率（比如使用 css transform 代替 Canvas 缩放绘制
计算/运行逻辑提速（拆大为小、多路并行）
- 通过将 Javscript 大任务进行拆解，结合异步任务的管理，避免出现长时间计算导致页面卡顿的情况
- 将耗时长且非关键逻辑的计算拆离，比如使用 Web Worker
- 通过使用运行效率更高的方式，减少计算耗时，比如使用 Webassembly
- 通过将计算过程提前，减少计算等待时长，比如使用 AOT 技术
- 通过使用更优的算法或是存储结构，提升计算效率，比如 VSCode 使用红黑树优化文本缓冲区的计算
- 通过将计算结果缓存的方式，减少运算次数
空间角度优化：降低资源占用
- 合理使用缓存，不滥用用户的缓存资源（比如浏览器缓存、IndexDB），及时进行缓存清理
- 避免存在内存泄露，比如尽量避免全局变量的使用、及时解除引用等
- 避免复杂/异常的递归调用，导致调用栈的溢出
- 通过使用数据结构享元的方式，减少对象的创建，从而减少内存占用
出处：godbasin.github.io/front-end-p…
