文章目录
浏览器的渲染机制一般分为以下几个步骤
- 处理 HTML 并构建 DOM 树
- 处理 CSS 标记并构建 CSSOM 树
- 将 DOM 与 CSSOM 合成一颗渲染树
- 根据渲染树布局，以计算每个节点的几何信息
- 将各个节点绘制到屏幕上
浏览器的线程
浏览器是多线程的，他们在内核控制下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript 引擎线程、GUI 渲染线程、浏览器事件触发线程
- GUI 渲染线程：负责渲染浏览器界面的 HTML 元素，当界面需要重绘或者回流时，该线程就会执行，在 javascript 引擎运行脚本期间，GUI 渲染线程都是出于挂起转态的，也就是说被冻结了
- javascript 引擎线程：主要负责处理 javascript 脚本程序
- 定时器触发线程：浏览器定时器并不是由 javascript 引擎计数的，javascript 引擎是单线程的，如果处于阻塞线程状态就会影响计时的准确，因此浏览器通过单独线程来计时并触发定时
- 事件触发线程：当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JS 引擎的处理。这些事件包含当前执行的代码，例如定时任务，流量亲耐内核的其他线程如鼠标点击、ajax 异步请求等。由于 JS 的单线程关系所有这些世间都得排队等待 JS 引擎处理。定时块任何和 ajax 请求等这些异步队列，事件触发线程只是在到达定时事件或者 ajax 请求成功后，把回调函数放到事件队列当中
- 异步 HTTP 请求线程：在 XMLHttpRequests 在链接后通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生个状态变成事件放到 javascript 引擎处理队列中等待处理，在发起一个异步请求时，http 请求线程负责去请求服务器，有了响应后，事件触发线程再把回调函数放到事件队列当中
构建 DOM 树与 CSSOM 树
浏览器凶网络或硬盘中获得 HTML 字节数据后会经过一个流程讲直接解析成 DOM 树
- 编码：先将 HTML 的原始字节数据转换为文件指定编码的字符
- 令牌化：然后浏览器会根据 HTML 规范来将字符串转换成各种令牌（如
<html>、<body>这样的标签以及标签中的字符串和属性等都会转化为令牌，每个令牌具有特殊含义和一组规则）。令牌记录了标签的开始与结束，通过这个特性可以轻松判断一个标签是否为子标签（假设有与两个标签，当标签的令牌还未遇到它的结束令牌就遇见了标签令牌，那么就是的子标签）。 - 生成对象：接下来每个令牌都会被转换成定义其属性和规则对象（这个对象就是节点对象）
- 构建完毕：DOM 树构建完成，整个对象集合就像是一颗属性结构。
构建渲染树
在构建了 DOM 树和 CSSOM 树之后，浏览器只是拥有了两个互相独立的对象集合，DOM 树描述了文档的结构和内容，CSSOM 树则描述了对文档应用的样式规则，想要渲染页面，就需要将 DOM 树与 CSSOM 树结合在一起
布局与绘制
css 采用一种叫做盒子思维模型的思维模型来表示每个节点与其他元素之间的距离，盒子模型包括外边距（margin），内边距（padding），边框（border），内容（content），页面中的每一个标签都是一个个的盒子
布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕捉每个元素在屏幕内的确切位置与大小，所有相对的测量值也都会被转换成屏幕内的绝对像素值
当 Layout 布局事件完成后，浏览器会立即发出 Paint Setup 与 Paint 事件，开始将渲染树绘制成像素，绘制所需的时间跟 CSS 样式的复杂度成正比
