浏览器渲染机制

本文示例源码请戳github博客，建议大家手敲代码。前言浏览器渲染一个页面的过程从耗时的角度来看，浏览器请求、加载、渲染一个页面，时间花在了以下五件事上：DNS查询TCP连接HTTP请求就是响应serverresponseclientrendering本文讨论第五部分，即浏览器对内容的渲染，这部分（渲染树构建、布局和绘制），可以分为以下五个步骤：处理HTML标签和构建一个DOM树。处理CSS标记并构建CSSOM树将DOM和CSSOM合并到一个渲染树中。根据渲染树布局计算每个节点的几何信息。将单个节点绘制到屏幕上。需要理解的是，这五个步骤不必一次按顺序完成。如果修改了DOM或者CSSOM，就需要重复上面的过程，这样它才能计算出哪些像素点需要重新渲染到屏幕上。在实际页面中，CSS和JavaScript经常会多次修改DOM和CSSOM。1.浏览器的线程在详细讲解之前先了解一下浏览器的线程。这将帮助我们理解接下来的内容。浏览器是多线程的，它们在内核控制下相互协作以保持同步。浏览器至少实现了三个常驻线程：JavaScript引擎线程、GUI渲染线程和浏览器事件触发线程。GUI渲染线程：负责渲染浏览器界面的HTML元素。当界面需要重绘（Repaint）或由于某种操作导致回流（reflow）时，该线程就会执行。当Javascript引擎运行脚本时，GUI渲染线程被挂起，也就是“冻结”。JavaScript引擎线程：主要负责处理Javascript脚本程序。Timertriggersthread：浏览器计时计数器不被JavaScript引擎统计。JavaScript引擎是单线程的。如果处于线程阻塞状态，会影响计时的准确性。因此，浏览器使用单独的线程来计时和触发计时。事件触发线程：当事件触发时，线程会将事件添加到待处理队列的末尾，等待JS引擎处理。这些事件包括当前正在执行的代码块如定时任务、浏览器内核的其他线程如鼠标点击、AJAX异步请求等。由于JS的单线程关系，这些事件都需要排队等待处理JS引擎。对于定时块、ajax请求等任何异步任务，事件触发线程只有在定时时间到达或ajax请求成功后，才会将回调函数放入事件队列。异步HTTP请求线程：连接XMLHttpRequest后，通过浏览器开启一个新的线程请求。当检测到状态变化时，如果设置了回调函数，异步线程会产生一个状态变化事件，放入JavaScript引擎的处理队列中进行处理。当发起异步请求时，http请求线程负责向服务器请求。收到响应后，事件触发线程将返回函数放入事件队列。2、构建DOM树和CSSOM树浏览器从网络或硬盘上获取到HTML字节数据后，会经过一个过程将字节解析成DOM树：编码：首先将HTML的原始字节数据转换成字符文件指定的代码。Tokenization：然后浏览器会根据HTML规范将字符串转换成各种token（、等标签，标签中的字符串和属性都会被转换成token，每个token都有特殊的含义，并有一套的规则）。令牌记录标记的开始和结束。通过这个特性，很容易判断一个标签是否是子标签（假设有两个标签和，当标签的token还没有遇到它的结束token遇到标签标记，则是的子标签）。生成对象：接下来，每个token都会被转换成一个对象，定义了它的属性和规则（这个对象就是节点对象）。构造：构造DOM树，整个对象集合就像一个树状结构。可能有人会疑惑为什么DOM是树状结构。这是因为标签包含了复杂的父子关系，而树结构正好可以说明这种关系（CSSOS也是一样，层叠样式也包含父子关系。例如：divp{font-size:18px}，它会先找到所有的p标签，判断其父标签是否为div，再决定是否使用该样式进行渲染）。整个DOM树的构建过程其实是：字节->字符->令牌->节点对象->对象模型。下面将通过一个示例HTML代码和一张图片来更形象地解释这个过程。

webperformance同学们好！