performance-checklist.md

性能优化篇

• 减少请求
• 减小资源体积
• 加快首屏时间

减少请求

• 使用http2，复用tcp连接
• 合理使用缓存
  • 强缓存和协商缓存
  • service worker缓存字体，样式，图片

减小资源体积

• gzip 压缩文本
• 减少图片体积
  • 响应式图片 srcset和size
  • 使用 webp 格式
  • 压缩png
• 减小js体积
  • 压缩 uglifyjs
  • 使用webpack中的tree-shaking去掉不必要的代码

加快首屏时间

• 使用cdn
• css放头部，js放底部
• 字体文件预加载

<link rel='preload' href="https://shuch.im/font.woff2" />

• 域名预解析

<link rel='dns-prefetch' href="https://github.githubassets.com"/>

• 首屏使用SSR
  • react使用renderToString
  • nextjs
• 减少重排和重绘
  • dom操作离线，DocumentFragment，display: none
  • 使用class代替style
  • 使用transform,filter,opacity,will-change开启GPU加速
• 延迟加载
  • react suspense
• 按需加载
  • 动态import()或require.ensure
  • 页面IntersetionObserver
  • 使用tree shaking 处理 es module代码，如import { Button } from 'antd',默认有tree shaking 效果
• 字体异步加载 font-display: swap

参考

Front-End Performance Checklist 2020