js之浏览器渲染机制

发表于 | 分类于


进程与线程

进程：程序的一次执行,它占有一片独有的内存空间,可以通过windows任务管理器查看进程。同一个时间里，同一个计算机系统中允许两个或两个以上的进程处于并行状态，这是多进程。比如电脑同时运行微信，QQ，以及各种浏览器。浏览器运行是有些是单进程，如firefox和老版IE，有些是多进程，如chrome和新版IE。
线程：在一个进程内部，要同时干多件事，就需要同时运行多个“子任务”，我们把进程内的这些“子任务”称为线程。浏览器运行是多线程。JavaScript是单线程。

浏览器渲染引擎

浏览器（多进程）包含了Browser进程（浏览器的主进程）、第三方插件进程和GPU进程（浏览器渲染进程）。浏览器渲染进程：通过取得页面内容、整理信息（应用CSS）、计算和组合最终输出可视化的图像结果。

主要渲染引擎

1、Chrome, Safari等: webkit。2、firefox: Gecko。3、IE: Trident。4、360,搜狗等国内浏览器: Trident + webkit

浏览器渲染进程
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1、GUI 渲染线程：
主要负责页面的渲染，解析HTML、CSS，构建DOM树，布局和绘制等。
当界面需要重绘或者由于某种操作引发回流时，将执行该线程。
该线程与JS引擎线程互斥，当执行JS引擎线程时，GUI渲染会被挂起，当任务队列空闲时，主线程才会去执行GUI渲染。

2、JS引擎线程：
该线程当然是主要负责处理 JavaScript脚本，执行代码。
也是主要负责执行准备好待执行的事件，即定时器计数结束，或者异步请求成功并正确返回时，将依次进入任务队列，等待 JS引擎线程的执行。
当然，该线程与 GUI渲染线程互斥，当 JS引擎线程执行 JavaScript脚本时间过长，将导致页面渲染的阻塞。

3、定时触发器线程：
负责执行异步定时器一类的函数的线程，如： setTimeout，setInterval。
主线程依次执行代码时，遇到定时器，会将定时器交给该线程处理，当计数完毕后，事件触发线程会将计数完毕后的事件加入到任务队列的尾部，等待JS引擎线程执行。

4、事件触发线程：
主要负责将准备好的事件交给 JS引擎线程执行。
比如 setTimeout定时器计数结束， ajax等异步请求成功并触发回调函数，或者用户触发点击事件时，该线程会将整装待发的事件依次加入到任务队列的队尾，等待 JS引擎线程的执行。

5、异步http请求线程：
负责执行异步请求一类的函数的线程，如： Promise，axios，ajax等。
主线程依次执行代码时，遇到异步请求，会将函数交给该线程处理，当监听到状态码变更，如果有回调函数，事件触发线程会将回调函数加入到任务队列的尾部，等待JS引擎线程执行。

DOCTYPE

DTD概念
1
2
3
4
5
DOCTYPE作用：用来声明DTD。

DTD全称：文档类型定义（Document Type Definition）

DTD作用：是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型，决定使用何种协议来解析。DTD就是告诉浏览器，我是什么文档类型，你要用什么协议来解析我
常见的DOCTYPE声明
1
2
3
4
5
6
7
8
1、HTML 4.01 Strict：（严格的）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
该DTD包含所有的HTML元素和属性，但不包括展示性的和弃用的元素（比如 font、u下划线等，这些是被废弃了的）。
2、HTML 4.01 Transitional：（传统的）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
该DTD包含所有的HTML元素和属性，但包括展示性的和弃用的元素（比如 font、u下划线等）。
3、HTML 5：
<!DOCTYPE html>

浏览器渲染机制

浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，用于显示PDF格式。

渲染引擎的基本流程：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 前期
1、域名解析：浏览器通过向DNS服务器发送域名，得到对应的IP地址
2、向这个 IP 的机器发送 HTTP 请求，请求分三个部分：TCP 三次握手、http 请求响应信息、关闭 TCP 连接。
3、服务器收到、处理并返回 HTTP 请求
4、浏览器得到返回内容（此时的内容为html字符串内容，只有 HTML 格式浏览器才能正确解析）
5、当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手。

// 拿到相应内容后
解析html -> 构建dom树和css树 -> 构建render树 -> 布局render树 -> 绘制render树
解析html：浏览器从磁盘或网络读取HTML的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成字符串（也就是我们写的html代码）。
DOM Tree：浏览器将HTML解析成树形的数据结构。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。（CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以，DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去。）
Render Tree: DOM和CSSOM合并后生成Render Tree。（渲染树只会包括需要显示的节点和这些节点的样式信息，如果某个节点是 display: none 的，那么就不会在渲染树中显示。渲染过程中，如果遇到<script>就停止渲染，执行 JS 代码。因为浏览器有GUI渲染线程与JS引擎线程，这两个线程是互斥的关系。在构建DOM时，HTML解析器若遇到了JavaScript，那么它会暂停构建DOM，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复DOM构建。JavaScript还可以更改样式，也就是它可以更改CSSOM。在执行JavaScript时，必须要能拿到完整的CSSOM。所以就导致了一个现象，在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM。）
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。
TCP 三次握手的过程

“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”。

1
2
3
4
5
客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。

服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态

当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。

TCP 四次挥手
1
2
3
4
1、若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。
2、B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明 A 到 B 的连接已经释放，不再接收 A 发的数据了。但是因为 TCP 连接是双向的，所以 B 仍旧可以发送数据给 A。
3、B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。
4、A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。
任务队列

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，通知某个异步任务可以执行了，该任务才会进入主线程执行。
总结：只要主线程空了，就会去读取”任务队列”，这就是JavaScript的运行机制。【重要】

浏览器页面初次渲染完毕后，JS引擎线程结合事件触发线程的工作流程

1、同步任务在JS引擎线程（主线程）上执行，形成执行栈（Execution Context Stack）
2、主线程之外，事件触发线程管理着一个任务队列（Task Queue）。只要异步任务有了运行结果，就在任务队列之中放置一个事件。
3、执行栈中的同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4、主线程不断重复上面的第三步。
主线程从”任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。只要主线程空了，就会去读取”任务队列”，这就是JavaScript的运行机制。

哪些语句会放入异步任务队列及放入时机
1
2
3
4
1、setTimeout和setlnterval
2、DOM事件
3、ES6中的Promise
4、Ajax异步请求
宏任务和微任务

宏任务：script （主代码块）、setTimeout 、setInterval 、setImmediate、I/O 、UI rendering
微任务：process.nextTick（Nodejs） 、promise 、Object.observe 、MutationObserver
区别：宏任务是每次执行栈执行的代码（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）
浏览器为了能够使得JS引擎线程与GUI渲染线程有序切换，会在当前宏任务结束之后，下一个宏任务执行开始之前，对页面进行重新渲染（宏任务 > 渲染 > 宏任务 > …）
微任务是在当前宏任务执行结束之后立即执行的任务（在当前 宏任务执行之后，UI渲染之前执行的任务）。微任务的响应速度相比setTimeout（下一个宏任务）会更快，因为无需等待UI渲染。
当前宏任务执行后，会将在它执行期间产生的所有微任务都执行一遍。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var 宏任务 = ['setTime1', ]
var 微任务 = ['then1', 'then2']
console.log('script start')
setTimeout(function() {
  console.log('setTimeout')
}, 0)
new Promise(resolve => { // promise是同步任务，只有then是微任务
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })
console.log('script end')
// script start => Promise => script end => promise1 => promise2 => setTimeout
// 很多人有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务。
// 1、执行同步代码script，这属于宏任务。2、执行栈为空，查询是否有微任务需要执行。3、执行所有微任务。
// 4、必要的话渲染 UI。5、然后开始下一轮 Event loop，执行宏任务中的异步代码
总结

执行一个宏任务（首次执行的主代码块或者任务队列中的回调函数）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有任务（依次执行）
JS引擎线程挂起，GUI线程执行渲染
GUI线程渲染完毕后挂起，JS引擎线程执行任务队列中的下一个宏任务

reflow(回流)和repaint(重绘)

回流重绘和Event loop的关系：1、当Event loop执行完微任务，会判断document是否需要更新。因为浏览器是每 16ms 才会更新一次。
2、然后判断是否有resize 或者 scroll ，有的话会去触发事件，所以resize 和 scroll 事件也是至少 16ms 才会触发一次。

1
2
3
4
5
6
7
8
9
10
reflow（回流）：当页面中DOM元素发生了样式变化影响了布局，需要倒回去重新渲染，这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。

触发reflow：
1、增加、删除、修改DOM节点时，会导致 Reflow 或 Repaint。2、移动DOM的位置，或是加个动画的时候。3、修改CSS样式

repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

注意：(1)display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。
(2)display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
(3)有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
怎么避免reflow，怎么减少repaint
1
2
3
4
5
6
7
1.直接改变className,如果动态改变样式，则使用cssText，避免多次修改样式。
2.让操作的元素进行“离线处理”，处理完后一次更新：先把DOM给display:none; 使用DocumentFragment进行缓存操作，引发一次回流和重绘。
3.尽可能在DOM树的最末端改变class（可限制回流的范围）。
4.避免设置多层内联样式（将样式合并在一个外部类，仅产生一次回流）。
5.动画效果应用到position属性为absolute或fixed的元素上（动画效果应用到position属性为absolute或fixed的元素上，它们不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流。这样消耗会更低。）
6、使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
7、不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局