浏览器渲染过程

前言：

渲染过程网上不少教程，但是感觉自己从头到尾梳理一遍也是有必要的。文章尽量用简洁易懂的形式来展现，方便自己日后复习和读者朋友的理解。

资源:

这是广为流传的浏览器渲染内容的过程图。

正文：

首先说明一下，浏览器渲染是要从服务器下载资源的，获取的资源包括HTML,CSS以及JavaScript。然后浏览器把下载的内容解析出来展示给用户。

• HTML解析器解析，将.html文件中的节点构建出来一棵dom树。
• CSS解析器，将.css文件中的样式以及HTML文件中的行内样式解析出来。
• 关联前两者，构建render树。每个dom节点都有attach方法，接收样式信息，返回一个render对象，这些对象最终会被构建成一棵render树。
• 浏览器开始布局，将每个节点放置到应该处在的位置。布局并不会主动触发，但是触发他的行为有很多，这也是影响性能主要的因素。
• 调用节点的print方法，打印节点。

这就是渲染的过程了，刚才又说到，触发布局的行为很多，那么究竟有哪些行为会触发呢？请继续关注我的文章重绘和重排。