网络

dns

• 提早进行连接，预解析

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

http

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

文件压缩/减少传输数据

• 代码压缩

  • 打包工具的 split
  • 懒加载 lazy

• 查看 chrome coverage ，去掉无用代码

• 重复代码，抽取公共组件

缓存

• 使用缓存

  • 强缓存，协商缓存
  • 本地缓存，locastorage indexDB

• 合理增加缓存时间

cdn

• 静态资源使用cdn
• 预连接

Pcdn

webpack

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

运行时

预加载

• 直接预加载，设定规则
• 智能预加载

长任务

• requestIdelcallback
• 事件委托
• webworker
• 避免强制同步布局
• WASM

渲染性能优化

• react-window 不可见内容优化

图片

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

react

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

Css

• 简化选择器
• 重排，重绘
• gpu加速

重绘重排

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

长任务

• 将长任务碎片化

SSR

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

视频

• 降低码率
• DASH
• MSE

svg

• def 标签，缓存元素
• transform
• 减少滤镜的使用 flur 之类的
• 事件监听
• visible hidden，

canvas

• 离屏渲染
• webworker

开发优化

• vite