概述浏览器的结构组成及渲染过程

浏览器组成：

浏览器组成.png

主流浏览器渲染引擎：
IE：Trident
Chrome28+： Blink
Firefox： Gecko
Opera： Blink
Safari： Webkit
UC： U3
腾讯旗下浏览器： X5/+-Blink

chrome使用多个渲染引擎实例，每个tab页都是一个独立的进程

浏览器线程：

GUI渲染线程：用于渲染页面中的HTML元素；当页面需要回流或重绘时，该进程会执行；当JavaScript引擎运行脚本时，该线程处于挂起状态。

JavaScript引擎：处理页面交互，操作DOM树，CSS样式树，为单线程。

定时触发器线程：定时器并不是由JS引擎来计数的，因为JS是单线程，处于阻塞线程状态时会影响计时的准确，所以通过单独的线程来计时并触发定时。

事件触发线程：当一个事件被触发时，事件触发线程会把事件添加到待处理队列的队尾，等待JS引擎处理。如：定时任务、AJAX请求、鼠标事件等。

异步HTTP请求线程：XMLHttpRequest在连接后是通过浏览器新开一个线程进行请求，检测到状态变更时，如果设置了回调函数，异步线程就会产生状态变更事件放到JS引擎的处理队列中等待处理。

页面加载过程：

1. 输入域名
2. 浏览器根据DNS服务器得到域名所对应的IP地址
3. 向这台IP的服务器发送HTTP请求
4. 目标服务器收到请求进行处理并返回HTTP请求
5. 浏览器接收到目标服务器返回的内容（HTML格式的字符串）开始渲染出页面

浏览器渲染过程：

1. 解析HTML，生成DOM树，解析CSS，生成CSS树
2. 将DOM树和CSS树结合，生成渲染树（Render Tree）
3. Layout（回流）：根据生成的渲染树进行回流，得到节点的几何信息（位置、大小）
4. Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5. Display（展示）：将像素发送给GPU，最后通过调用操作系统Native GUI的API绘制，展示在页面上

构建DOM的流程：

1. HTML文件被解析生成DOM树：

   
   
   生成DOM树.png

2. 构建CSSDOM：

   
   
   生成CSSDOM树.png

3. 合并DOM和CSSDOM：只包含可见的节点，遇到