简单理解下浏览器渲染页面流程

==咱们省去了从回车一个url后的过程，因为这个如果要说的话这个内容就多了去了，这个大家可以自己先了解下。

- 浏览器输入url，浏览器主进程接管，开个下载线程，然后进行 http请求（略去DNS查询，IP寻址等等操作），然后等待响应，获取内容。

////随后将内容通过RendererHost接口转交给Renderer进程

- 浏览器渲染流程开始

 

浏览器器内核拿到内容后，渲染大概可以划分成以下几个步骤：

 

1. 解析html建立dom树

2. 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）

3. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算

4. 绘制render树（paint），绘制页面像素信息

5. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

 

所有详细步骤都已经略去，渲染完毕后就是load事件了，之后就是自己的JS逻辑处理了。

其实这里应该有个图的呀。

既然略去了一些详细的步骤，那么就提一些可能需要注意的细节把。

这里重绘参考来源中的一张图：（参考来源第一篇）

 

 

 

 

简单提下  load事件与DOMContentLoaded事件的先后

 

上面提到，渲染完毕后会触发load事件，那么你能分清楚load事件与DOMContentLoaded事件的先后么？

很简单，知道它们的定义就可以了：

• 当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片。(譬如如果有async加载的脚本就不一定完成)

• 当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片都已经加载完成了。（渲染完毕了）

所以，顺序是：DOMContentLoaded -> load。