前端性能优化 ​

时间和空间

时间角度 ​

减少耗时

网络请求优化 ​

• 减少 DNS 查询时间，使用浏览器 DNS 缓存、计算机 DNS 缓存、服务器 DNS 缓存
• 合理地使用 CDN，有效的减少网络请求耗时
• 对请求资源进行缓存（浏览器缓存、HTTP 缓存、后台缓存）Service Worker、PWA 技术
• Tree-shaking 代码分割
• 对请求资源进行合理的拆分，减少请求资源的体积
• 对资源进行压缩，减少传输数据大小
• 使用 HTTP2、HTTP3 提升资源请求速度
• 对请求进行优化（多个请求合并，减少通信次数；请求进行域名拆分，提升并发请求数量）

首屏加载优化 ​

将页面尽快展示给用户看，减少白屏时间

• 对页面进行分片/分屏加载，将页面可见/可交互时间提前
• 优化资源加载的顺序和粒度，仅加载需要的资源，采用异步加载的方式加载其他资源
• 按需加载（差异化服务，读写分离）
• 使用服务端渲染，减少页面二次请求和渲染的耗时
• 使用秒看技术，通过预览的方式提前给用户观看（图片）
• 配合客户端进行资源预请求和预加载（预热 Web 容器）
• 配合客户端将资源和数据进行离线，可用于下一次的页面快速渲染

渲染过程优化 ​

• 使用资源预加载，空闲时间将用户可能需要用到的资源进行获取并加载
• 减少 DOM 数量、减少/合并 DOM 操作，减少浏览器渲染过程中的计算耗时
• 通过合理使用浏览器 GPU 进程合成，提升浏览器渲染效率
• 使用离屏渲染，在页面不可见的地方进行提前渲染（Canvas 渲染）
• 通过将浏览帧率保持在 60FPS，提升页面交互和渲染的流畅度

计算/逻辑提速 ​

• 将 JavaScript 大任务拆解 + 并行计算的方式，有效的降低整体计算耗时（Web Worker)
• 使用更高运行效率的方式，减少计算耗时（Webassembly）
• 将计算过程提前，减少计算等待时长（AOT 技术）
• 使用更优的算法或数据结构，提升计算效率（红黑树）
• 将结果缓存，减少运行次数

空间角度 ​

降低资源占用 ​

• 合理使用缓存，不滥用用户的缓存资源（浏览器缓存，IndexDB）及时进行缓存清理
• 通过使用数据结构享元的方式，减少对象的创建，从而减少内存占用
• 避免存在内存泄漏（避免全局变量的使用，及时解除引用）
• 避免复杂/异常的递归调用，防止栈溢出

性能数据 ​

• 网络资源请求时间。
• Time To Start Render(TTSR)：浏览器开始渲染的时间。
• Dom Ready：页面解析完成的时间。
• Time To Interact(TTI))：页面可交互时间。
• Total Blocking Time (TBT)：总阻塞时间，代表页面处于不可交互状态的耗时。
• First Input Delay(FID)：从用户首次交互，到浏览器响应的时间。