DayDreamerBlog

Appearance

主要内容 ​

  • 首次打开速度：首屏优化
  • 再次打开：缓存
  • 操作流畅：渲染机制优化
  • 动画流畅：长任务拆分

指标 ​

绘制 ​

FP ​

首次绘制

FCP ​

First Contenful Paint

首次内容绘制

从FP到FCP之间是白屏渲染，在SPA中主要就是被js占用

FMP ​

First Meaningful Paint

首次有效绘制，应该算是对用户体验来说最重要的指标

LCP ​

Largest Contenful Paint

最大内容绘制。加载的最大内容块的渲染，是最耗时的渲染区域

INP ​

interaction to Next Paint

TTI（SSR） ​

Time To Interact ，可交互时间

TBT ​

Total Blocking Time，从FCP到TTI

总阻塞时间

CLS ​

Cumulative Layout Shift

重排重绘方面的指标

TTFB ​

Time To First Bytes

发出请求后的首字节到达时间

方案 ​

首屏 ​

图片 ​

  • 现代的图片格式：webp等
  • 图片压缩
  • 多图片尺寸，32，64，128...

字体 ​

如果需要一些自定义的字体格式ttf，采用字体瘦身，即只生成必要用到的字体数据。

相关库：FontMin

样式、脚本压缩 ​

  • 打包时
    • 文件压缩
    • 代码压缩
    • 小文件合并，大文件拆分
    • 懒加载
    • 摇树
  • Gzip
  • SSR，SSG

动画卡顿 ​

因为浏览器js单主线程阻塞

webwork ​

任务拆分 ​

CSS动画 ​

  • 享受GPU加速的：transform，opacity
  • 避免使用重排布局的：left等定位用的
  • 节流防抖，减少消耗
  • requestAnimationFrame

应用层 ​

  • 尽量状态局部化
  • 减少Context更新，Context拆分（React）
  • 高性能状态库，zustand，recoil
  • 节流防抖请求合并.....