JavaScript是如何工作的:渲染引擎和优化其性能的技巧

与 HTML一样，渲染引擎需要将 CSS 转换成浏览器可以使用的东西—— CSSOM。CSSOM 结构如下：

你想知道为什么 CSSOM 是一个树形结构？ 在为页面上的任何对象计算最终样式集时，浏览器以适用于该节点的最常规规则开始（例如，如果它是 body 元素的子元素，则应用所有 body 样式），然后递归地细化，通过应用更具体的规则来计算样式。

来看看具体的例子。包含在 body 元素内的 span 标签中的任何文本的字体大小均为 16 像素，并且为红色。这些样式是从 body 元素继承而来的。 如果一个 span 元素是一个 p 元素的子元素，那么它的内容就不会被显示，因为它被应用了更具体的样式（display: none）。

另请注意，上面的树不是完整的 CSSOM 树，只显示我们决定在样式表中覆盖的样式。 每个浏览器都提供一组默认样式，也称为 “user agent stylesheet” 。这是我们在未明确指定任何样式时看到的样式，我们的样式会覆盖这些默认值。

不同浏览器对于相同元素的默认样式并不一致，这也是为什么我们在 CSS 的最开始要写 *{padding:0;marging:0}; ，也就是我们要重置CSS默认样式的。

CSSOM 树和 DOM 树连接在一起形成一个 render tree，，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。

• DOM 树和 CSSOM 树连接在一起形成 render tree .
• render tree 只包含了用于渲染页面的节点
• 布局计算了每一个对象的准确的位置以及大小
• 绘画是最后一步，绘画要求利用 render tree 来将像素显示到屏幕上

渲染树中的每个节点在 Webkit 中称为渲染器或渲染对象。

收下是上面 DOM 和 CSSOM 树的渲染器树的样子：

为了构建渲染树，浏览器大致执行以下操作:

• （编辑：网站开发网_安阳站长网）

  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!