优化方式

网络层面

• CDN

• Gzip

• http2

• 缓存

资源层面

• 代码压缩

• 图片压缩

• 小图片转base64

• 图标使用字体图标

• 图片懒加载、合适的大小及格式

• css、js文件合并

• 雪碧图

• 抽象复用

• 模块动态加载

• 切分文件chunk

• 使用摇树不打包未引用的模块

• 文件名加版本号（通过webpack hash）

• 预加载css/js、预渲染html、预解析DNS

逻辑层面

• 虚拟滚动

• 虚拟dom

• vue：keep-live

• vue：计算属性

• react：hook - memo

• react：shouldcomponentUpdate

• react：useMemo/useCallback

• 代码分割

• React.lazy

• React.Profiler 查看渲染耗时

• 节流防抖

• 减少回流重绘

• 大量计算使用 Web Workers

• react：减少bind

• 使用事件委托

• v-if 和 v-shew

• 虚拟DOM绑定key

• 动画使用requestAnimationFrame代替setTimeout

• 骨架屏

• SSR

• 关闭productionSourceMap，关闭css-sourceMap

• webpack-bundle-analyzer查看包大小

性能指标

• FCP【First Contentful Paint】显示第一段dom所花费的时间

• LCP【Largest Contentful Paint】最大内容绘制标记绘制最大文本或图像的时间

• TTI【Time to Interactive】交互时间是指页面完全交互所需的时间

• Speed Index 衡量页面加载期间内容以视觉方式显示的速度

• TBT【Total Blocking Time】当任务长度超过50ms时，FCP和交互时间之间的所有时间段的总和，以毫秒为单位。测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或键盘按下）的总时间