跳到主要内容

性能优化

通用方法​

工程化​

  • 最小化；
  • 混淆；
  • 分块；

html​

  • 减少 DOM 层级；
  • 响应式图片/视频；
  • 使用 ssr；

js​

  • 减少入口文件体积；
  • 减少入口文件执行时间；
  • 使用 preload 和 as 预加载 js；
  • 使用 import() 动态加载；
  • 减少第三方代码；
  • 使用 async 和 defer 异步/延迟加载 js；
  • 放置于 html 底部；

css​

  • 压缩 css；
  • 使用 preload 和 as 预加载 css；
  • 关键 css 使用内联 css；
  • 合理使用 css 选择器；
    • 避免过多选择器；
    • 避免使用通配符和属性选择器；
  • 放置于 html 底部；
  • 使用 js 动态加载；

静态文件​

  • CDN；
  • 静态资源本地缓存；
  • 开启 gzip；

优化指标​

FCP​

FCP​
  • 浏览器呈现第一个 DOM 需要的时间；
优化手段​
  • 优化 js；
  • 优化 css；
  • 优化静态文件；
  • 优化字体；

LCP​

LCP​
  • 视口中最大内容元素显示的时间；
优化手段​
  • 同 FCP

TTI​

TTI​
  • 页面变成完全可交互，需要的时间；
优化手段​
  • 优化 js；
    • 最小化；
    • 预加载；
    • 减少执行时间；
    • 减少第三方代码；
  • 最小化主进程工作；

TBT​

TBT​
  • 页面堵塞用户输入的总时间：FCP 到 TTI 之间的时间；
优化手段​
  • 同 TTI；

SI​

SI​
  • 页面加载期间，视觉显示的速度；
优化手段​
  • 同 TTI；

CLS​

CLS​
  • DOM 从渲染到隐藏期间的累计布局偏移；
造成原因​
  • 无尺寸的图片；
  • 无尺寸的 iframe；
  • 动态注入的内容；

RAIL​

  • Response Time：用户交互的响应时间，要求小于 100ms；
  • Animation：动画在 16ms 内绘制完成；
  • Idle：页面在没有用户输入和事件触发时的时间，尽量短；
  • Load：页面加载时间，尽量短；

SSR​

SSR​
  • 页面在服务器进行渲染；
优缺点​
  • 优点；
    • 首屏加载速度快：服务器预先生成 HTML，客户端在收到响应之前即可显示部分页面；
    • 支持 SEO；
    • 用户体验好：首屏加载速度快；
  • 缺点；
    • 服务器压力大；
    • 开发成本高：额外的服务器页面模板，数据获取流程；
简要流程​
  • 配置服务器环境：客户端搭建 node 环境；
  • 应用服务器：监听 HTTP 请求，返回 HTML 文本；
  • 路由：根据不同路径返回对应 HTML；
  • 客户端脚本：HTML 插入客户端脚本，用于交互和数据获取；
  • SEO 优化：添加 <meta\> 标签；

性能分析​

性能分析工具​

浏览器开发者工具​
  • NetWork 面板；
  • Performance 面板；
  • Lighthouse 面板；
Web 性能优化工具​
  • WebPage Test；