浏览器页面渲染机制

浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个JS引擎。渲染引擎在不同的浏览器中也不尽相同。目前市面上常见的浏览器内核可以分为这四种：Trident(IE)、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面俺最熟悉的是Webkit内核了，Webkit内核是当下浏览器世界的老大。俺就以Webkit位栗子，对现代浏览器的渲染过程进行一个剖析和总结。

页面加载过程

在熟悉浏览器渲染过程之前，先要了解页面的加载过程，有助于更好的理解。
要点如下：

1. 浏览器根据DNS服务器得到域名的IP地址
2. 向这个IP的机器发送HTTP请求
3. 服务器收到、处理并返回HTTP请求
4. 浏览器得到返回内容
   例如在浏览器输入：https://www.xxx.com，然后经过DNS解析，xxx.com对应的IP是10.248.217.149（不同时间、地点对应的IP可能会不一样）。然后浏览器向该IP发送HTTP请求。

服务端接受到HTTP请求，然后经过计算（向不同的用户推送不同的内容），返回HTTP请求，返回的内容如下：

就是一堆HTML格式的字符串，因为只有HTML格式浏览器才能正确解析，这是W3C标准的要求。接下来就是浏览器的渲染过程。

浏览器渲染过程

1）浏览器会解析三个东西

• 一个HTML/SVG/XHTML，HTML字符串描述了一个页面的结构，浏览器会把HTML结构字符串解析转换DOM树形结构。
  

• 二是CSS，解析CSS会产生CSS规则树，它和DOM结构比较像。

• 

• 三是JavaScript脚本，等到JavaScript脚本文件加载后，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree。