网络

dns

• 提早进行连接，预解析

<link rel="dns-prefetch" href="//baidu.com">

http

• http2 并行传输
• http 主动推送

文件压缩/减少传输数据

• 代码压缩
• 查看 chrome coverage ，去掉无用代码
• 重复代码，抽取公共组件

缓存

• 使用缓存
• 合理增加缓存时间

cdn

• 静态资源使用cdn

webpack

• 代码分割
• 按需加载
• 压缩
• treeshaking

运行时

渲染性能优化

• react-window 不可见内容优化

图片

• 响应式图片
• 优化图片格式 avif heif webp

react

• 合理使用 useEffect 尽量减少重绘
• props
• useCallback
• useMemo
• 原子化状态，尽量避免全局渲染
• Transition api，设置更新的优先级
• Suspense，分块渲染

重绘重排

• 使用document.fragment 创建片段，将修改元素统一放到里面，一次性进行修改
• 使用 el.cloneNode 克隆节点，在上面统一修改再进行替换
• 创建bfc让其脱离文档流
• 使用gpu加速
  • transform
  • opacity
  • filters
  • Will-change

长任务

• 将长任务碎片化

SSR

• 使用ssr，提高首屏加载速度
• 使用流式渲染，让可操作的优先加载
• 使用服务端组件，加快组件渲染

开发优化

• vite