浏览器渲染机制

浏览器从url到页面的工作流程

1. 输入URL，浏览器根据域名寻找IP地址

2. 浏览器发送一个HTTP请求给服务器，如果服务器返回以301之类的重定向，浏览器根据相应头中的location再次发送请求

3. 服务器接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的

4. 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理

5. 渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

6. Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

7. Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。

8. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

Webkit渲染引擎主流程

Geoko渲染引擎主流程

 

 

浏览器如何工作：在现代Web浏览器的背后（英文版）

浏览器如何工作：在现代Web浏览器的背后（中文版）