JavaScript是怎样事情的:衬着引擎和优化其机能的技能

2019年8月20日 180次阅读 来源: 前端小智

这是特地探究 JavaScript 及其所构建的组件的系列文章的第11篇。

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你！

假如你错过了前面的章节，能够在这里找到它们：

  1. JavaScript 是怎样事变的：引擎，运转时和挪用客栈的概述！
  2. JavaScript 是怎样事变的：深切V8引擎&编写优化代码的5个技能！
  3. JavaScript 是怎样事变的：内存治理+怎样处置惩罚4个罕见的内存走漏 !
  4. JavaScript 是怎样事变的：事宜轮回和异步编程的兴起+ 5种运用 async/await 更好地编码体式格局！
  5. JavaScript 是怎样事变的：深切探究 websocket 和HTTP/2与SSE +怎样挑选正确的途径！
  6. JavaScript 是怎样事变的：与 WebAssembly比较 及其运用场景 !
  7. JavaScript 是怎样事变的：Web Workers的构建块+ 5个运用他们的场景!
  8. JavaScript 是怎样事变的：Service Worker 的生命周期及运用场景!
  9. JavaScript 是怎样事变的：Web 推送关照的机制!
  10. JavaScript是怎样事变的:运用 MutationObserver 跟踪 DOM 的变化

当你构建 Web 运用程序时，你不只是编写零丁运转的 JavaScript 代码，你编写的 JavaScript 正在与环境举行交互。相识这类环境，它的事变道理以及它的组，这些有助于你够构建更好的运用程序，并为运用程序宣布后能够涌现的潜伏题目做好充分准备。

《JavaScript是怎样事情的:衬着引擎和优化其机能的技能》

浏览器的主要组件包括：

  • 用户界面 (User interface)： 包括地址栏、退却/行进按钮、书签目次等，也就是你所看到的除了用来显现你所请求页面的主窗口以外的其他部份
  • 浏览器引擎 (Browser engine)：用来查询及操纵衬着引擎的接口
  • 衬着引擎 (Rendering engine)：用来显现请求的内容，比方，假如请求内容为 html，它担任剖析 html 及 css，并将剖析后的效果显现出来
  • 收集 (Networking)：用来完成收集挪用，比方http请求，它具有平台无关的接口，能够在差别平台上事变
  • UI 后端 (UI backend)：用来绘制相似组合挑选框及对话框等基础组件，具有不特定于某个平台的通用接口，底层运用操纵体系的用户接口
  • JS 诠释器 (JavaScript engine)：用来诠释实行JS代码
  • 数据存储 (Data persistence)： 属于耐久层，浏览器须要在硬盘中保留相似 cookie 的种种数据，HTML5定义了 Web Database 手艺，这是一种轻量级完整的客户端存储手艺，支撑的存储机制范例包括 localStorage、indexDB、WebSQL和 FileSystem。

在这篇文章中，将重点议论衬着引擎，因为它处置惩罚 HTML 和 CSS 的剖析和可视化，这是大多数 JavaScript 运用程序常常与之交互的东西。

衬着引擎概述

衬着引擎的职责就是衬着，即在浏览器窗口中显现所请求的内容。

衬着引擎能够显现 HTML 和 XML 文档和图象。假如运用其他插件，衬着引擎还能够显现差别范例的文档，如 PDF。

衬着引擎 (Rendering engines)

与 JavaScript 引擎相似，差别的浏览器也运用差别的衬着引擎。以下是一些最受迎接的:

  • Gecko — Firefox
  • WebKit — Safari
  • Blink — Chrome，Opera (版本 15 以后)

Firefox、Chrome 和 Safari 是基于两种衬着引擎构建的，Firefox 运用 Geoko——Mozilla 自立研发的衬着引擎，Safari 和 Chrome 都运用 Webkit。Blink 是 Chrome 基于 WebKit的自立衬着引擎。

衬着的历程

衬着引擎从收集层吸收所请求文档的内容。

《JavaScript是怎样事情的:衬着引擎和优化其机能的技能》

剖析 HTML 以构建 Dom 树 -> 构建 Render 树 -> 规划 Render 树 -> 绘制 Render 树

构建 Dom 树

衬着现引擎的第一步是剖析 HTML文档，并将剖析后的元素转换为 DOM 树中的现实 DOM 节点。

假如有以下 Html 组织

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="theme.css">
  </head>
  <body>
    <p> Hello, <span> friend! </span> </p>
    <div> 
      <img src="smiley.gif" alt="Smiley face" height="42" width="42">
    </div>
  </body>
</html>

对应的 DOM　树以下：

《JavaScript是怎样事情的:衬着引擎和优化其机能的技能》

基础上，每一个元素都示意为一切元素的父节点，这些元素直接包括在元素中。

构建 CSSOM

CSSOM 指的是 CSS 对象模子。 当浏览器构建页面的 DOM 时，它在 head 标签下如遇到了一个 link 标记且引用了外部 theme.css CSS 款式表。 浏览器估计能够须要该资本来显现页面，它会马上发送请求。 假定 theme.css 文件内容以下：

body { 
  font-size: 16px;
}

p { 
  font-weight: bold; 
}

span { 
  color: red; 
}

p span { 
  display: none; 
}

img { 
  float: right; 
}

与 HTML一样，衬着引擎须要将 CSS 转换成浏览器能够运用的东西—— CSSOM。CSSOM 组织以下：

《JavaScript是怎样事情的:衬着引擎和优化其机能的技能》

你想晓得为何 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 树根节点最先，遍历每一个可见的节点

    • 一些节点是完整不可见的（比方 script标签，meta标签等），这些节点会被疏忽，因为他们不会影响衬着的输出
    • 一些节点是经由过程 CSS 款式隐蔽了，这些节点一样被疏忽——比方上例中的 span 节点在 render tree 中被疏忽，因为 span 款式是 display:none
  • 对每一个可见的节点，找到适宜的婚配的CSSOM划定规矩，而且运用款式
  • 显现可见节点（节点包括内容和被盘算的款式）

“visibility:hidden” 和
“display：none” 之间的差别，
“visibility:hidden” 将元素设置为不可见，然则一样在规划上占据肯定空间（比方，它会被衬着成为空盒子），然则
“display:none” 的元素是将节点从全部
render tree 中移除，所以不是规划中的一部份 。

你能够在这里检察 RenderObject 的源代码（在 WebKit 中）：

https://github.com/WebKit/web…

我们来看看这个类的一些核心内容：

《JavaScript是怎样事情的:衬着引擎和优化其机能的技能》

每一个衬着器代表一个矩形地区，一般对应于一个节点的 CSS 盒模子。它包括若干信息，比方宽度、高度和位置。

衬着树的规划

建立衬着器并将其增加到树中时，它没有位置和大小，盘算这些值称为规划。

HTML运用基于流的规划模子，这意味着大多数时候它能够一次性盘算若干图形。坐标体系相干于根衬着器，运用左上原点坐标。

规划是一个递归历程 – 它从根衬着器最先，它对应于 HTML 文档的 <html> 元素。 规划以递归体式格局继承经由过程部件或全部衬着器条理组织，为每一个须要它的衬着器盘算若干信息。

根衬着器的位置为0,0，其尺寸与浏览器窗口的可见部份(即viewport)的大小雷同。最先规划历程意味着给每一个节点在屏幕上应当涌现的确实坐标。

绘制衬着树

在此绘制，遍历衬着器树并挪用衬着器的 paint() 要领以在屏幕上显现内容。

画图能够是全局的或增量式的（与规划相似）：

  • 全局 — 整棵树被重绘
  • 增量式 — 只要一些衬着器以不影响全部树的体式格局转变。 衬着器使其在屏幕上的矩形无效，这会致使操纵体系将其视为须要从新绘制并天生绘 paint 事宜的地区。 操纵体系经由过程将多个地区合并为一个来智能完成。

总的来说，主要的中要明白画图是一个渐进的历程。为了更好的用户体验，衬着引擎将只管快地在屏幕上显现内容。它不会比及剖析完一切 HTML 后才最先构建和规划衬着树，而是剖析和显现部份内容，同时继承处置惩罚来自收集的其他内容项。

处置惩罚剧本和款式表的递次

当剖析器抵达 <script> 标记时，将马上剖析并实行剧本。文档的剖析将停息，直到实行剧本为止。这意味着这个历程是同步的。

假如剧本是外部的，那末起首必需从收集中猎取它(也是同步的)。一切剖析都住手，直到猎取完成。HTML5 新加了async 或 defer 属性，将剧本标记为异步的，以便由差别的线程剖析和实行。

优化衬着机能

假如你想优化自身的运用，则须要关注五个主要方面，这些是你自身能够掌握的：

  1. JavaScript   — 在之前的文章中，议论了假如编写优化代码的主题抱包括假如编写代码才不会阻挠UI，和进步内存应用等等。在衬着时，须要斟酌 JavaScript 代码与页面 上DOM 素交互的体式格局。 JavaScript 能够在 UI中建立大批变动，尤其是在 SPA 中。
  2. 款式盘算 — 这是依据婚配挑选器肯定哪一个 CSS 划定规矩适用于哪一个元素的历程。 定义划定规矩后，将运用它们并盘算每一个元素的终究款式。
  3. 规划 — 一旦浏览器晓得哪些划定规矩适用于某个元素，它就能够最先盘算后者占用若干空间以及它在浏览器屏幕上的位置。Web 的规划模子定义了一个元素能够影响其他元素。比方，<body> 的宽度会影响其子元素的宽度，等等。这意味着规划历程是盘算密集型的，该画图是在多个图层完成的。
  4. 画图 —— 这是现实像素被添补的处所，这个历程包括绘制文本、色彩、图象、边框、暗影等——每一个元素的每一个可视部份。
  5. 合成  — 因为页面部份能够被绘制成多个层，因而它们须要以正确的递次绘制到屏幕上，以便页面衬着正确。这是异常主要的，特别是关于堆叠的元素。

优化你的 JavaScript

JavaScript 常常触发浏览器中的视觉变化，构建 SPA 时更是如此。

以下是一些优化 JavaScript 衬着技能：

  • 防止运用 setTimeout 或 setInterval 举行可视更新。 这些将在帧中的某个点挪用 callback ，能够在末了。我们想要做的是在帧最先时触发视觉变化而不是错过它。
  • 如 之前文章 所述，将长时候运转的 JavaScript 盘算转移到 Web Workers。
  • 运用微使命在多个帧中变动 DOM。这是在使命须要接见 DOM 时运用的， Web Worker 无法接见 DOM。这基础上意味着你要把一个大使命分解成更小的使命，然后依据使命的性子在 requestAnimationFrame, setTimeout, setInterval 中运转它们。

优化你的 CSS

经由过程增加和删除元素，变动属性等来修正 DOM 将使浏览器从新盘算元素款式，而且在很多状况下，从新盘算全部页面的规划或最少部份规划。

要优化衬着，斟酌以下事项：

  • 削减挑选器的复杂性，与组织款式自身的其他事变比拟，挑选器复杂机能够占用盘算元素款式所需时候的50%以上。

*　削减必需举行款式盘算的元素的数目。本质上，直接对一些元素举行款式变动，而不是使全部页面无效。

优化规划

浏览器的规划从新盘算能够异常沉重。 斟酌以下优化：

  • 只管削减规划的数目。当你变动款式时，浏览器会搜检是不是有任何变动须要从新盘算规划。对宽度、高度、左、顶等属性的变动，以及一般与若干相干的属性的变动，都须要规划。所以，只管防止转变它们。
  • 只管运用 flexbox 而不是老的规划模子。它运转速率更快，可为你的运用程序制造庞大的机能上风。
  • 防止强迫同步规划。须要记着的是，在 JavaScript 运转时，前一帧中的一切旧规划值都是已知的，能够查询。假如你接见 box.offsetHeight，那就不成题目了。然则，假如你在接见 box 之前变动了它的款式(比方，经由过程动态地向元素增加一些 CSS 类),浏览器必需先运用款式变动并实行规划历程，这是异常耗时和消耗资本的，所以只管防止。

优化画图

这一般是一切使命中运转时候最长的，因而只管防止这类状况异常主要。 以下是我们能够做的事变：

  • 除了变更（transform）和透明度以外，转变其他任何属性都邑触发从新画图，请郑重运用。
  • 假如触发了规划，那也会触发画图，因为变动规划会致使元素的视觉效果也转变。
  • 经由过程图层提拔和动画编排来削减重绘地区。

原文：

https://blog.sessionstack.com…

代码布置后能够存在的BUG没法及时晓得，预先为相识决这些BUG，花了大批的时候举行log 调试，这边顺便给人人引荐一个好用的BUG监控东西 Fundebug。

你的点赞是我延续分享好东西的动力，迎接点赞！

交换

干货系列文章汇总以下，以为不错点个Star，迎接 加群 互相进修。

https://github.com/qq44924588…

我是小智，民众号「大迁天下」作者，对前端手艺坚持进修爱好者。我会常常分享自身所学所看的干货，在进阶的路上，共勉！

关注民众号，背景复兴福利，即可看到福利，你懂的。

《JavaScript是怎样事情的:衬着引擎和优化其机能的技能》

    原文作者：前端小智
    原文地址: https://segmentfault.com/a/1190000017872125
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞