浏览器渲染机制

时间  2019-11-08 标签 浏览器 渲染 机制
本文示例源代码请戳 github博客，建议你们动手敲敲代码。

前言

浏览器渲染页面的过程css

从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上：html

  1. DNS 查询
  2. TCP 链接
  3. HTTP 请求即响应
  4. 服务器响应
  5. 客户端渲染

本文讨论第五个部分，即浏览器对内容的渲染，这一部分（渲染树构建、布局及绘制），又能够分为下面五个步骤：node

  1. 处理 HTML 标记并构建 DOM 树。
  2. 处理 CSS 标记并构建 CSSOM 树
  3. 将 DOM 与 CSSOM 合并成一个渲染树。
  4. 根据渲染树来布局，以计算每一个节点的几何信息。
  5. 将各个节点绘制到屏幕上。

须要明白，这五个步骤并不必定一次性顺序完成。若是 DOM 或 CSSOM 被修改，以上过程须要重复执行，这样才能计算出哪些像素须要在屏幕上进行从新渲染。实际页面中，CSS 与 JavaScript 每每会屡次修改 DOM 和 CSSOM。git

一、浏览器的线程

在详细说明以前咱们来看一下浏览器线程。这将有助于咱们理解后续内容。github

浏览器是多线程的，它们在内核制控下相互配合以保持同步。一个浏览器至少实现三个常驻线程：JavaScript 引擎线程，GUI 渲染线程，浏览器事件触发线程。web

  • GUI 渲染线程：负责渲染浏览器界面 HTML 元素，当界面须要重绘（Repaint）或因为某种操做引起回流（reflow）时，该线程就会执行。在 Javascript 引擎运行脚本期间，GUI 渲染线程都是处于挂起状态的，也就是说被”冻结”了。
  • JavaScript 引擎线程：主要负责处理 Javascript 脚本程序。
  • 定时器触发线程：浏览器定时计数器并非由 JavaScript 引擎计数的， JavaScript 引擎是单线程的， 若是处于阻塞线程状态就会影响记计时的准确， 所以浏览器经过单独线程来计时并触发定时。
  • 事件触发线程：当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JS 引擎的处理。这些事件包括当前执行的代码块如定时任务、浏览器内核的其余线程如鼠标点击、AJAX 异步请求等。因为 JS 的单线程关系全部这些事件都得排队等待 JS 引擎处理。定时块任何和 ajax 请求等这些异步任务，事件触发线程只是在到达定时时间或者是 ajax 请求成功后，把回调函数放到事件队列当中。
  • 异步 HTTP 请求线程：在 XMLHttpRequest 在链接后是经过浏览器新开一个线程请求， 将检测到状态变动时，若是设置有回调函数，异步线程就产生状态变动事件放到 JavaScript 引擎的处理队列中等待处理。在发起了一个异步请求时，http 请求线程则负责去请求服务器，有了响应之后，事件触发线程再把回到函数放到事件队列当中。

二、构建DOM树与CSSOM树

浏览器从网络或硬盘中得到HTML字节数据后会通过一个流程将字节解析为DOM树：ajax

  • 编码： 先将HTML的原始字节数据转换为文件指定编码的字符。
  • 令牌化： 而后浏览器会根据HTML规范来将字符串转换成各类令牌（如<html>、<body>这样的标签以及标签中的字符串和属性等都会被转化为令牌，每一个令牌具备特殊含义和一组规则）。令牌记录了标签的开始与结束，经过这个特性能够轻松判断一个标签是否为子标签（假设有<html>与<body>两个标签，当<html>标签的令牌还未遇到它的结束令牌</html>就碰见了<body>标签令牌，那么<body>就是<html>的子标签）。
  • 生成对象： 接下来每一个令牌都会被转换成定义其属性和规则的对象（这个对象就是节点对象）
  • 构建完毕： DOM树构建完成，整个对象集合就像是一棵树形结构。可能有人会疑惑为何DOM是一个树形结构，这是由于标签之间含有复杂的父子关系，树形结构正好能够诠释这个关系（CSSOS同理，层叠样式也含有父子关系。例如： div p {font-size: 18px}，会先寻找全部p标签并判断它的父标签是否为div以后才会决定要不要采用这个样式进行渲染）。

整个DOM树的构建过程其实就是： 字节 -> 字符 -> 令牌 -> 节点对象 -> 对象模型，
下面将经过一个示例HTML代码与配图更形象地解释这个过程。chrome

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

DOM树构建过程

当上述HTML代码碰见<link>标签时，浏览器会发送请求得到该标签中标记的CSS文件（使用内联CSS能够省略请求的步骤提升速度，但没有必要为了这点速度而丢失了模块化与可维护性），style.css中的内容以下：segmentfault

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

浏览器得到外部CSS文件的数据后，就会像构建DOM树同样开始构建CSSOM树，这个过程没有什么特别的差异。
CSSOM树浏览器

三、构建渲染树

在构建了DOM树和CSSOM树以后，浏览器只是拥有了两个互相独立的对象集合，DOM树描述了文档的结构与内容，CSSOM树则描述了对文档应用的样式规则，想要渲染出页面，就须要将DOM树与CSSOM树结合在一块儿，这就是渲染树。
渲染树

  • 浏览器会先从DOM树的根节点开始遍历每一个可见节点（不可见的节点天然就不必渲染到页面了，不可见的节点还包括被CSS设置了display: none属性的节点，值得注意的是visibility: hidden属性并不算是不可见属性，它的语义是隐藏元素，但元素仍然占据着布局空间，因此它会被渲染成一个空框）
  • 对每一个可见节点，找到其适配的CSS样式规则并应用。
  • 渲染树构建完成，每一个节点都是可见节点而且都含有其内容和对应规则的样式。

四、布局与绘制

CSS采用了一种叫作盒子模型的思惟模型来表示每一个节点与其余元素之间的距离，盒子模型包括外边距(Margin)，内边距(Padding)，边框(Border)，内容(Content)。页面中的每一个标签其实都是一个个盒子

盒子模型
布局阶段会从渲染树的根节点开始遍历，而后肯定每一个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每一个元素在屏幕内的确切位置与大小，全部相对的测量值也都会被转换为屏幕内的绝对像素值。

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

图片描述

当Layout布局事件完成后，浏览器会当即发出Paint Setup与Paint事件，开始将渲染树绘制成像素，绘制所需的时间跟CSS样式的复杂度成正比，绘制完成后，用户就能够看到页面的最终呈现效果了。

咱们对一个网页发送请求并得到渲染后的页面可能也就通过了1~2秒，但浏览器其实已经作了上述所讲的很是多的工做，总结一下浏览器关键渲染路径的整个过程：

  • 处理HTML标记数据并生成DOM树。
  • 处理CSS标记数据并生成CSSOM树。
  • 将DOM树与CSSOM树合并在一块儿生成渲染树。
  • 遍历渲染树开始布局，计算每一个节点的位置信息。
  • 将每一个节点绘制到屏幕。

五、外部资源是如何请求的

为了直观的观察浏览器加载和渲染的细节，本地用nodejs搭建一个简单的HTTP Server。
index.js

const http = require('http');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 8080;
http.createServer((req, res) => {
  if (req.url == '/a.js') {
    fs.readFile('a.js', 'utf-8', function (err, data) {
      res.writeHead(200, {'Content-Type': 'text/plain'});
      setTimeout(function () {
        res.write(data);
        res.end()
      }, 5000)
    })
  } else if (req.url == '/b.js') {
    fs.readFile('b.js', 'utf-8', function (err, data) {
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.write(data);
      res.end()
    })
  } else if (req.url == '/style.css') {
    fs.readFile('style.css', 'utf-8', function (err, data) {
      res.writeHead(200, {'Content-Type': 'text/css'});
        res.write(data);
        res.end()
    })
  } else if (req.url == '/index.html') {
    fs.readFile('index.html', 'utf-8', function (err, data) {
      res.writeHead(200, {'Content-Type': 'text/html'});
      res.write(data);
      res.end()
    })
  }
}).listen(port, hostname, () => {
  console.log('Server running at ' + hostname + '：' + port);
});

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器渲染</title>
    <link rel="stylesheet" href="http://127.0.0.1:8080/style.css">
    <script src='http://127.0.0.1:8080/a.js'></script>
</head>
<body>
<p id='header'>1111111</p>
<script src='http://127.0.0.1:8080/b.js'></script>
<p>222222</p>
<p>3333333</p>
</body>
</html>

style.css

#header{
    color: red;
}

a.js、b.js暂时为空
能够看到，服务端将对a.js的请求延迟5秒返回。Server启动后，在chrome浏览器中打开http://127.0.0.1:8080/index.html
咱们打开chrome的调试面板
图片描述
第一次解析html的时候，外部资源好像是一块儿请求的，说资源是预解析加载的，就是说style.css和b.js是a.js形成阻塞的时候才发起的请求，图中也是能够解释得通，由于第一次Parse HTML的时候就遇到阻塞，而后预解析就去发起请求，因此看起来是一块儿请求的。

六、HTML 是否解析一部分就显示一部分

咱们修改一下html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器渲染</title>
    <link rel="stylesheet" href="http://127.0.0.1:8080/style.css">
</head>
<body>
<p id='header'>1111111</p>
<script src='http://127.0.0.1:8080/a.js'></script>
<script src='http://127.0.0.1:8080/b.js'></script>
<p>222222</p>
<p>3333333</p>
</body>
</html>

图片描述
由于a.js的延迟，解析到a.js所在的script标签的时候，a.js尚未下载完成，阻塞并中止解析，以前解析的已经绘制显示出来了。当a.js下载完成并执行完以后继续后面的解析。固然，浏览器不是解析一个标签就绘制显示一次，当遇到阻塞或者比较耗时的操做的时候才会先绘制一部分解析好的。

七、js文件的位置对HTML解析有什么影响

7.1 js文件在头部加载。

修改index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器渲染</title>
    <link rel="stylesheet" href="http://127.0.0.1:8080/style.css">
    <script src='http://127.0.0.1:8080/a.js'></script>
    <script src='http://127.0.0.1:8080/b.js'></script>
</head>
<body>
<p id='header'>1111111</p>
<p>222222</p>
<p>3333333</p>
</body>
</html>

图片描述
由于a.js的阻塞使得解析中止，a.js下载完成以前，页面没法显示任何东西。

7.二、js文件在中间加载。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器渲染</title>
    <link rel="stylesheet" href="http://127.0.0.1:8080/style.css">
</head>
<body>
<p id='header'>1111111</p>
<script src='http://127.0.0.1:8080/a.js'></script>
<script src='http://127.0.0.1:8080/b.js'></script>
<p>222222</p>
<p>3333333</p>
</body>
</html>

图片描述
解析到js文件时出现阻塞。阻塞后面的解析，致使后面的不能很快的显示。

7.三、js文件在尾部加载。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器渲染</title>
    <link rel="stylesheet" href="http://127.0.0.1:8080/style.css">
</head>
<body>
<p id='header'>1111111</p>
<p>222222</p>
<p>3333333</p>
<script src='http://127.0.0.1:8080/a.js'></script>
<script src='http://127.0.0.1:8080/b.js'></script>
</body>
</html>

解析到a.js部分的时候，页面要显示的东西已经解析完了，a.js不会影响页面的呈现速度。

由上面咱们能够总结一下

  • 直接引入的 JS 会阻塞页面的渲染（GUI 线程和 JS 线程互斥）
  • JS 不阻塞资源的加载
  • JS 顺序执行，阻塞后续 JS 逻辑的执行

下面咱们来看下异步js

7.四、async和defer的做用是什么？有什么区别?

接下来咱们对比下 defer 和 async 属性的区别：
图片描述
其中蓝色线表明JavaScript加载；红色线表明JavaScript执行；绿色线表明 HTML 解析。

  • 状况1<script src="script.js"></script>

没有 defer 或 async，浏览器会当即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。

  • 状况2<script async src="script.js"></script> (异步下载)

async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，若是已经加载好，就会开始执行——不管此刻是 HTML 解析阶段仍是 DOMContentLoaded 触发以后。须要注意的是，这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说，async-script 可能在 DOMContentLoaded 触发以前或以后执行，但必定在 load 触发以前执行。

  • 状况3 <script defer src="script.js"></script>(延迟执行)

defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未中止解析，这两个过程是并行的。整个 document 解析完毕且 defer-script 也加载完成以后（这两件事情的顺序无关），会执行全部由 defer-script 加载的 JavaScript 代码，而后触发 DOMContentLoaded 事件。

defer 与相比普通 script，有两点区别：

  • 载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成以后。
  • 在加载多个JS脚本的时候，async是无顺序的加载，而defer是有顺序的加载。

八、css文件的影响

服务端将style.css的相应也设置延迟。

fs.readFile('style.css', 'utf-8', function (err, data) {
  res.writeHead(200, {'Content-Type': 'text/css'});
  setTimeout(function () {
    res.write(data);
    res.end()
  }, 5000)
})
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器渲染</title>
    <link rel="stylesheet" href="http://127.0.0.1:8080/style.css">
</head>
<body>
<p id='header'>1111111</p>
<p>222222</p>
<p>3333333</p>
<script src='http://127.0.0.1:8080/a.js' async></script>
<script src='http://127.0.0.1:8080/b.js' async></script>
</body>
</html>

能够看出来，css文件不会阻塞HTML解析，可是会阻塞渲染，致使css文件未下载完成以前已经解析好html也没法先显示出来。

咱们把css调整到尾部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浏览器渲染</title>
</head>
<body>
<p id='header'>1111111</p>
<p>222222</p>
<p>3333333</p>
<link rel="stylesheet" href="http://127.0.0.1:8080/style.css">
<script src='http://127.0.0.1:8080/a.js' async></script>
<script src='http://127.0.0.1:8080/b.js' async></script>
</body>
</html>

这是页面能够渲染了，可是没有样式。直到css加载完成

以上咱们能够简单总结。

  • CSS 放在 head 中会阻塞页面的渲染（页面的渲染会等到 css 加载完成）
  • CSS 阻塞 JS 的执行 （由于 GUI 线程和 JS 线程是互斥的，由于有可能 JS 会操做 CSS）
  • CSS 不阻塞外部脚本的加载（不阻塞 JS 的加载，但阻塞 JS 的执行，由于浏览器都会有预先扫描器）

参考
浏览器渲染过程与性能优化
聊聊浏览器的渲染机制
你不知道的浏览器页面渲染机制

联系我们 沪ICP备13005482号-10