性能优化从请求开始

先减少必须等待的东西

首屏性能最直接的指标是用户多久能看到有用内容。与其先追求复杂的缓存策略，不如先删掉首屏不需要的脚本、图片和字体。

资源预算可以从一个简单的列表开始：

const budget = {
  javascript: 180_000,
  images: 400_000,
  fonts: 100_000,
};

请求链决定了等待链

一个请求触发另一个请求，浏览器就会把它们排成一条更长的等待链。把关键内容放进初始 HTML，或者让资源可以并行下载，通常比微调某个 CSS 属性更有效。

渲染也需要预算

下载完成不等于用户可以交互。长任务会阻塞主线程，过大的 DOM 会增加布局成本。每次优化都应该回答一个具体问题：减少了哪一段等待，用户能提前做什么？