performance - 你应该以什么顺序列出 CSS 属性以获得最快的速度？

Question

让我们获取一些 CSS 属性并将它们随机放置在我们的 CSS 文件中:

outline
pseudo-elements
Color Properties
Background and Border Properties
Box Properties
Flexible Box Layout
Text Properties
Text Decoration Properties
Font Properties
Writing Modes
Table Properties
Lists
Animation

如果你想最大化渲染速度，你应该以什么顺序列出你的 CSS 属性？

Answer 1

简短的回答是:没关系。

详细说明一下:假设您将实现一个 browser1 并进入解析 CSS 的部分。你会怎么做？嗯，有一个grammar CSS，所以你用它来 tokenize样式表，构建 AST和 parse样式表。这种方法意味着您需要先阅读所有内容，然后才能开始实际解释样式表。也就是说，将选择器应用于您的 DOM(也是您解析的内容，但来自 HTML 源而不是 CSS)，然后将规则应用于匹配这些选择器的元素。请注意，到目前为止我们所做的一切都只是修改数据结构的状态。我们在我们的元素上存储它们应该是什么样子。

完成后，layout阶段可以开始(并且对于现代 CSS，由于 flexible box 和 grid 布局，这更加困难)。这听起来很简单:计算每个元素在页面上的最终位置。不是，但是假设我们是优秀的程序员，对我们需要遵守的规范有透彻的了解，所以我们可以做到这一点。我们需要知道什么？好吧，适用于所有元素的所有规则。就这么简单。我们无法计算布局然后从解析器中得知“哦，等等，我忘了，HTML 源代码开头的这个元素实际上是 positioned absolutely，所以你应该从你的定位重新开始”。因此，我们需要处理样式表中的所有内容。我们了解规则的顺序没关系 .

好像这还不够，我们浏览器的下一个阶段将是绘制所有内容，这又是不平凡的。您对构建自己的浏览器感到兴奋吗？ 😉

如果你真的对主流浏览器如何实现所有这些感兴趣，你可以看看他们的引擎。我根本不熟悉那些，但我知道它们……令人生畏。

所以，ye be warned .

• Chrome (Chromium) 使用 Blink ( source code ，从 WebKit fork )。
• Edge 使用 EdgeHTML (来自 Trident )。
• Firefox 使用 Gecko ( source code )，但正在开发一个名为 Servo 的新引擎(source code)。
• Internet Explorer 使用 Trident .
• Opera 使用 Blink (在 Opera 15 之前使用 Presto)。
• Safari 使用 WebKit (source code)。

我尽可能多地包含指向源代码的链接，但一些浏览器引擎是专有的。 Presto 的源代码在前段时间被泄露，但我不会在这里链接。你也许能找到它。

免责声明:我只是触及了构建浏览器的皮毛。我还没有讨论交互性、实现 JavaScript 引擎、发出 HTTP 请求、调试工具、GUI 设计和实现等等。3 构建浏览器只是用来在这个答案中有故事。如果您真的对构建浏览器感兴趣，请考虑这些很棒的资源 4 不要。相反，为您最喜欢的浏览器的开发做出贡献，如果它是开源的!

想要阅读更多内容？
• This Mozilla Hacks article很好地解释了渲染引擎的大致工作原理。
它还包括漂亮的图纸!

____________________
1 你不想那样做。严重地。这是很多工作。但是，说你会。
2 除非您愿意在构建 AST 时使用它。但这很难并且容易出错。正如我们稍后会看到的，它最终也不会给你带来太多好处。
3 这在 this Mozilla Hacks blog post 中有更详细的讨论。 .
4 从来没有，你不需要检查这个帖子的修订历史。这只是一个玩笑。
对不起，如果你觉得它是一个蹩脚的。