2

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

轮廓
伪元素
颜色属性
背景和边框属性
框属性
灵活框布局
文本属性
文本装饰属性
字体属性
书写模式
表格属性
列表
动画

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

4

1 回答 1

4

简短的回答是：没关系。

 

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

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

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

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

所以，请注意。

• Chrome (Chromium) 使用Blink（源代码，源自WebKit）。
• Edge 使用EdgeHTML （从Trident派生）。
• Firefox 使用Gecko（源代码），但正在开发一个名为Servo（源代码）的新引擎。
• Internet Explorer 使用Trident。
• Opera 使用Blink（在 Opera 15 之前使用Presto ）。
• Safari 使用WebKit（源代码）。

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

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

 

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

 

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

于 2017-05-11T08:15:34.127 回答