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

2019-01-13 admin

这是专门探索 JavaScript 及其所构建的组件的系列文章的第11篇。

如果你错过了前面的章节,可以在这里找到它们:

  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 正在与环境进行交互。了解这种环境,它的工作原理以及它的组,这些有助于你够构建更好的应用程序,并为应用程序发布后可能出现的潜在问题做好充分准备。

图片描述

浏览器的主要组件包括:

  • 用户界面 (User interface): 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
  • **浏览器引擎 (Browser engine):**用来查询及操作渲染引擎的接口
  • **渲染引擎 (Rendering engine):**用来显示请求的内容,例如,如果请求内容为 html,它负责解析 html 及 css,并将解析后的结果显示出来
  • **网络 (Networking):**用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作
  • **UI 后端 (UI backend):**用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口
  • **JS 解释器 (JavaScript engine):**用来解释执行JS代码
  • 数据存储 (Data persistence): 属于持久层,浏览器需要在硬盘中保存类似 cookie 的各种数据,HTML5定义了 Web Database 技术,这是一种轻量级完整的客户端存储技术,支持的存储机制类型包括 localStorageindexDBWebSQLFileSystem

在这篇文章中,将重点讨论渲染引擎,因为它处理 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的自主渲染引擎。

渲染的过程

渲染引擎从网络层接收所请求文档的内容。

图片描述

解析 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 树如下:

图片描述

基本上,每个元素都表示为所有元素的父节点,这些元素直接包含在元素中。

构建 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 结构如下:

图片描述

你想知道为什么 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 树的渲染器树的样子:

图片描述

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

  • 从 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…

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

图片描述

每个渲染器代表一个矩形区域,通常对应于一个节点的 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 渲染技巧:

  • 避免使用 setTimeoutsetInterval 进行可视更新。 这些将在帧中的某个点调用 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

你的点赞是我持续分享好东西的动力,欢迎点赞!

一个笨笨的码农,我的世界只能终身学习!

更多内容请关注公众号《大迁世界》!

[转载]原文链接:https://segmentfault.com/a/1190000017872125

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50899.html

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

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
html5+JavaScript教程-微信打飞机小游戏源码
js &#x2F;&#x2F; JavaScript Document var c = document.getElementById(&quot;dotu&quot;); var cxt = c.getContext(&quot;2d&q...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
回到顶部