css - 浏览器如何读取和解释 CSS？

Question

两部分问题:

1. 浏览器是否像 JavaScript 一样具有内置的 CSS 解释器？
2. 浏览器究竟何时读取 CSS 以及何时应用 CSS？

具体来说，我想澄清 JavaScript 和 CSS 有何不同或为何不同，因为对于 JavaScript，您需要专门等待 window.onload，以便解释器可以正确地获取 ElementById。但是，在 CSS 中，您可以巧妙地选择样式并将其应用于类和 ID。

(如果这很重要，假设我指的是一个头部带有外部样式表的基本 HTML 页面)

Answer 1

CSS 渲染是一个有趣的话题，所有竞争者都在努力加速 View 层(HTML 和 CSS)渲染，以便在眨眼间为最终用户提供最佳结果。

首先，是的，不同的浏览器有自己的 CSS 解析器/渲染引擎

• Google Chrome、Opera(版本 15)- 使用 Webkit fork 叫 Blink渲染引擎
• Safari - 使用 Webkit(现在分支到 Webkit2 )
• Internet Explorer - 使用 Trident渲染引擎。 (+ 更新:Windows 10 上的 Edge 使用 Chromium fork 用于其 future 版本)
• Mozilla firefox - 使用 Gecko

所有这些渲染引擎都包含 CSS 解释器和 HTML DOM parser .

所有这些引擎都遵循下面列出的模型，这些是一组 W3C standard

• Visual processing Model
• Box Model
• CSS 2.1 Addressing Model

Note: All these models are interlinked and interdependent. They arenot separate models defining standards to render the CSS. These modelsshed light on how CSS is processed based on precedence like inline styling,Specificity etc.

---

说明:

---

第 1 阶段:

---

所有浏览器都从服务器下载 HTML 和 CSS 脚本，并首先将 HTML 标记解析为名为内容树 的树中的 DOM 节点。

当解析 HTML 文档时，浏览器渲染引擎会构建另一棵名为渲染树的树。这棵树是按显示顺序排列的视觉元素。

Firefox 将其称为框架，而 Webkit 人员将其称为渲染器或渲染器对象。

见下图:(来源:HTML5 Rocks)

---

第 2 阶段:

---

在上述过程之后，这两棵树都经历了布局过程，这意味着浏览器告诉视口(viewport)每个节点必须放置在屏幕上的位置。

这被W3C定义为定位方案(点击此链接获取详细信息) 指示浏览器元素的放置方式和位置。以下是 3 种类型。

• 正常流程
• 花车
• 绝对位置

---

第 3 阶段:

---

现在是绘画的最后阶段。这是一个渐进的过程，渲染引擎遍历每个渲染树节点并使用 UI 后端层可视化地绘制它们。此时所有visual Fx应用如字体大小、背景颜色、表格绘画等。

Note: This stage can be clearly observed if you try to open anywebpage on slow connection. Most modern browsers for better userexperience try to display elements as soon as possible. This gives theuser an impression that the page is loading and have to wait to complete.

---

为了更好地理解工作流框图

来源HTML5 Rocks

• 网络套件:

• Mozilla 的 Gecko:

---

引用资料:(请阅读以下链接。它们是网络上与该主题相关的最佳资源)

• http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ (最佳解释)
• http://www.slideshare.net/ariyahidayat/understanding-webkit-rendering
• https://html.spec.whatwg.org/multipage/syntax.html#parsing
• http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-3.xhtml
• https://css-tricks.com/almanac/properties/t/text-rendering/
• https://www.webkit.org/blog/114/webcore-rendering-i-the-basics/
• http://www.w3.org/TR/CSS21/intro.html#addressing