优化方式

网络层面

• 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和交互时间之间的所有时间段的总和，以毫秒为单位。测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或键盘按下）的总时间