几种方法告诉浏览器如何对页面进行性能优化

最近的几年，前端开发出现了一些新的趋势，关于性能优化的责任开始从浏览器向开发人员身上转移。人们不是单纯的要求“浏览器应该更快速的执行我的代码”，而是，浏览器提供了一些新的API来让开发人员告诉浏览器“这样执行我的代码会更快些”。

will-change

W3规范:

开发人员可以提前告诉UA，一个元素可能会发生什么样的变化。这样可以让UA有机会提前优化如何处理这个元素，提前做一些可能比较耗资源的动画的准备工作，在动画真正开始前完成准备。

也就是说，开发人员在使用动画(animations 和 transforms)时，告诉浏览器这些动画将会如何的执行变化。

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

Sara Soueidan曾写过一篇更具深度的文章介绍过will-change的用法。

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非常相似，这个属性让元素建立了一个新布局的root框架，可以确保子节点上的DOM变化不会导致父容器的重新布局。

Responsive Images 自适应图片

也许，最能从视觉能感受到的“告诉浏览器怎么了”的场景是响应式自适应图片，尤其是在图片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)

这些图片宽度在srcset里有相匹配的不同尺寸的图片地址。理想情况下可以非常精确的一一对应，浏览器将根据现实情况进行优化。

一个勇敢人的新世界

今天介绍这些东西并不是说我们应该马上去使用这些新技术。更多的是出于关注新趋势的目的，关注这些前端开发中性能相关的新发展。

我想，这些浏览器开发商和规范制定者会说：“你想要更好的性能。而这些是我全部能做的了。有些事情我们做不了，但你们知道怎么做。这些之外的事情我们会尽力做好，剩下的事情你们来告诉我如何能做的更好。”

你会怎么说？