让我们取一些CSS属性并将它们随机放在我们的CSS文件中：
轮廓
伪元素
颜色属性
背景和边界属性
箱子属性
灵活的盒子布局
文字属性
文字装饰属性
字体属性
写作模式
表属性
列表
动画
如果你想最大化渲染速度，你应该以什么顺序列出你的CSS属性？
答案 0 :(得分：4)
简短的回答是：没关系。
详细说明：假设您将实现浏览器 1 并进入解析CSS的部分。你会怎么做？好吧，有一个grammar的CSS，所以你用它来tokenize样式表，构建一个AST和parse样式表。这种方法意味着在开始实际解释样式表之前，您需要阅读所有 2 。也就是说，将选择器应用于您的DOM（也是您解析的内容，但是来自HTML源而不是CSS），然后将规则应用于与这些选择器匹配的元素。请注意，到目前为止我们所做的一切只是修改数据结构的状态。我们在元素上存储应该的样子。
完成后，layout阶段就可以开始了（对于现代CSS，由于flexible box和grid布局，这更加困难）。这听起来很简单：计算每个元素最终会在页面上的位置。它不是，但假设我们是伟大的程序员，对我们需要遵守的规范有透彻的了解，所以我们可以做到这一点。我们需要知道什么？那么，适用于所有元素的所有规则。就这么简单。我们无法计算布局，然后从解析器中学习“哦等等，我忘了，这个元素一直在HTML源代码的开头实际上是positioned absolutely，所以你应该重新开始定位“。因此，我们需要处理样式表中的所有内容。我们了解规则的顺序无关紧要。
好像这还不够，我们浏览器的下一个阶段就是绘制所有内容，这也是非常重要的。您是否对构建自己的浏览器感到兴奋？
如果您对主要浏览器如何实现所有这些感兴趣，您可以查看他们的引擎。我根本不熟悉那些，但我知道它们......令人生畏。
所以，ye be warned。
•Chrome（Chromium）使用Blink（source code，从WebKit分叉）。
•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 从来没有，你不需要查看这篇文章的修订历史。这只是个玩笑
对不起，如果你觉得它很蹩脚。