关键词：性能提升、加载优化

页面加载优化

「页面加载链路+流程优化+协作方」的多级分类思考

• 页面启动
  • service worker 缓存重要的静态资源
  • 页面保活
• 资源加载
  • 网络连接
    • NDS
      • 减少 NDS 解析
      • NDA 预解析
    • HTTP
      • 开启 HTTP2 多路复用
      • 优化核心请求链路
  • HTML 加载
    • 内容优化
      • 代码压缩
      • 代码精简(tailwindcss)
      • 服务端渲染 SSG
    • 流程优化
      • 服务端渲染 SSR
      • 流式渲染
      • 预渲染
  • 静态资源加载
    • 内容优化
      • JS、CSS 代码压缩
      • 均衡资源包体积：复用代码抽离为一份资源打包、同时开启
      • 精简代码
      • 雪碧图
      • 动态图片降质量
      • 动态 polyfill (根据浏览器的支持情况，动态加载需要的 polyfill（填充）脚本)
      • 不常变的资源单独打包
      • 根据浏览器版本打包， 高版本浏览器， 直接使用 es6 作为输出文件
    • 流程优化
      • 配置前端缓存: 资源、请求
      • 使用 CDN
      • CDN 优化
      • 协调资源加载优先级
      • 动态资源转静态 CDN 链接加载(例如大图片等)
      • 静态资源使用 service worker 离线存储
      • 非首屏资源懒加载
      • 资源和业务请求预加载
      • 微前端加载应用
      • 微组件加载核心模块资源
• 代码执行
  • 减少执行
    • 减少重复渲染
    • 大体量计算场景， 尽量使用缓存函数
    • 使用防抖节流
  • 速度提升
    • 使用 worker 多线程加速
    • 充分利用异步请求的线下之间来进行核心代码的加载或者执行
    • wasm 处理大量计算场景
    • 渲染高耗时场景， 迁移到 canvas 、虚拟 dom 等
    • 动态渲染：动态渲染可视区内容， 例如图片懒加载等；
  • 流程优化
    • 非首屏模块， 延迟加载与渲染
    • longtask 任务拆分执行
    • 利用请求闲暇时间， 请求后续页面资源
• 数据获取
  • 内容优化
    • 减少请求、合并请求、BFF
    • 首屏数据使用模板注入到前端应用
  • 流程优化
    • 数据预请求
    • 常量数据缓存
    • 非首屏请求，延迟到首屏加载完成之后请求
    • 请求并行
• 渲染相关
  • 虚拟列表
  • 延迟渲染
  • 减少重绘重排
  • 图片预加载到内存