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

发布时间：2019-01-19 04:07:04 所属栏目：评测来源：前端小智编译

导读：副标题#e# 当你构建 Web 应用程序时，你不只是编写单独运行的 JavaScript 代码，你编写的 JavaScript 正在与环境进行交互。了解这种环境，它的工作原理以及它的组，这些有助于你够构建更好的应用程序，并为应用程序发布后可能出现的潜在问题做好充分准备。

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

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

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

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

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

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

构建渲染树

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

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

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

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

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

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

从 DOM 树根节点开始，遍历每一个可见的节点

display:none

对每一个可见的节点，找到合适的匹配的CSSOM规则，并且应用样式
显示可见节点（节点包括内容和被计算的样式）

“visibility:hidden” 和 “display：none” 之间的不同， “visibility:hidden” 将元素设置为不可见，但是同样在布局上占领一定空间（例如，它会被渲染成为空盒子），但是 “display:none” 的元素是将节点从整个 render tree 中移除，所以不是布局中的一部分。