度量标准
标准
首次有效绘制：主要内容呈现在页面上
英雄渲染时间：用户最关心的内容渲染完成
可交互时间：页面布局稳定，关键页面字体可见，主程序可用于处理用户输入，可以交互
输入响应：界面响应用户输入所需时间
感知速度指数：页面加载视觉变化速度
自定义指标
目标
100毫秒界面响应时间与60FPS
速度指标小于 1250 ms
3G网络环境可交互时间小于5s
重要文件大小预算小于170kb
编码优化
数据读取速度
字面量与局部变量的访问速度最快，数组和对象相对较慢
变量从局部作用域到全局作用域的搜索过程越长速度越慢
对象嵌套越深，读取速度越慢
对象在原型链中存在位置越深，查找速度越慢
DOM
JS中对DOM访问的代价非常高
重排和重绘的代价非常高
善于使用事件委托
流程控制
避免使用 for … in (能够枚举到原型，所以慢)
JS 中倒序循环可以略微提升性能
减少迭代次数
基于循环的迭代比基于函数的迭代快 8 倍
用 Map 表代替大量的 if-else 和 switch
静态资源优化
压缩
使用Brotli或Zopfli进行纯文本压缩
图片优化
通过srcset，sizes 和
交付优化
异步无阻塞加载JS
defer、async、动态创建 script 标签、使用 XHR 异步请求 JS 代码并注入到页面
Intersection Observer实现懒加载
优先加载关键的CSS
Critical
资源提示
Resource Hints（资源提示）定义了HTML中的Link元素与dns-prefetch、preconnect、prefetch与prerender之间的关系
Preload
构建优化
使用预编译
Tree-shaking、Scope hoisting、Code-spliting
SSR 服务端渲染
使用import函数动态导入模块
使用HTTP缓存头
Cache-control: immutable避免重新验证