你需要告诉浏览器如何优化

在过去的几年里，出现了一些前端特性，其中性能的重担从浏览器转移到了开发者身上。与其假设“浏览器在运行我的代码时会变得更快”，不如更多地考虑“我需要改变我的编码方式才能让浏览器更快”。

will-change

规范:

允许作者提前告知 UA 他们可能对元素进行哪些更改。这使得 UA 能够提前优化他们处理元素的方式，在动画实际开始之前执行可能代价高昂的工作来准备动画。

换句话说，除了使用动画和转换之外，还要告诉浏览器您将在这些动画和转换中更改什么。

.element {
  will-change: transform;
}
.element:hover {
  transform: rotateY(180deg);
}

Sara Soueidan 有 一篇更深入的文章，我们也有 一个年鉴参考。

contain

规范:

contain 属性允许作者指示一个元素及其内容尽可能独立于文档树的其余部分。这使得用户代理在使用 contain 正确渲染页面时能够利用更强大的优化，并允许作者确信他们的页面不会因无害的更改而意外地陷入缓慢的代码路径。

换句话说，如果您了解有关元素及其后代的某些信息，则应告诉浏览器，以便它可以围绕这些信息进行优化。例如…… contain: size; – “这确保包含元素可以在无需检查其后代的情况下进行布局。”

示例

<section class='message'>
  Lol, check out this dog: images.example.com/jsK3jkl
</section>
<section class='message'>
  I had a ham sandwich today. #goodtimes
</section>
<section class='message'>
  I have political opinions that you need to hear!
</section>

.message {
  contain: strict;
}

Michael Scharnagl 最近 发表了一篇关于此的文章

类似于 iframe，此边界建立了一个新的布局根，确保子树中的 DOM 更改永远不会触发父文档中的重排。

响应式图片

也许这些“你告诉浏览器发生了什么”场景中最明显的是响应式图片，特别是 sizes 属性。

规范:

用户代理将根据指定的 w 描述符和 sizes 属性中指定的渲染大小计算每个图像的有效像素密度。然后，它可以根据用户的屏幕像素密度、缩放级别以及可能的其他因素（例如用户的网络状况）选择任何给定的资源。

这是一个来自规范的示例，您尽可能多地向浏览器提供信息

<img 
  sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
  srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src="swing-400.jpg" 
  alt="Kettlebell Swing"
>

这意味着……

• 如果浏览器窗口的宽度小于 30em，我将以 100vw 的宽度显示图像。
• 如果浏览器窗口的宽度在 30em 和 50em 之间，我将以 50vw 的宽度显示图像。
• 否则（如果更大），我将以 calc(33vw - 100px) 的宽度显示图像。

然后，这需要与您在 CSS 中实际执行的操作相匹配。希望它相当准确，以便浏览器的优化与现实相符。

一个崭新的世界

我之所以提到这些，并不是因为我认为您需要立即开始使用所有这些。更多的是强调（如果可以这么说）趋势，在前端性能相关的特性中，浏览器要求作者做更多的事情。

我认为浏览器供应商和规范作者会说：“你想要性能。我们只能做这么多。有些事情我们不知道，但你知道。我们会尽最大努力在没有它们的情况下进行优化，但如果你告诉我们，我们就能做得更多。”

你怎么看？