dom解析与渲染

一，渲染进程render process

在浏览器访问一个网页并接收到服务器响应的数据之后，浏览器将接收到的html、css、js等相关数据交给渲染进程进行网页的渲染。

二，dom的解析规则

浏览器的渲染进程先要将html解析成dom。解析规则大概如下：

• 浏览器解析dom是从上到下一行一行执行，但是如果遇到外部资源的引用，如带有src的script标签，会停止dom解析，优先加载外部资源（因为外部的js可能会进行相关dom操作而改变dom结构）
• 解析过程中，如果遇到的script标签有async或者defer属性，浏览器就会异步的加载js代码，而不会阻塞dom渲染
• 浏览器在接受服务器的响应数据时，首先会根据html生成dom树，根据css生成css规则树，然后根据dom树和css规则树生成渲染树（render tree）。因此dom树和css规则树的解析是互不影响的
• 浏览器渲染页面之前，如果有未加载完的css文件，则需要等他加载完，才能渲染页面（同理，浏览器如果遇到普通的script标签，需要优先加载完css文件，才会执行下面的js代码，因此遇到script标签会触发页面渲染；也说明css会阻塞js的执行）

三，dom解析和渲染的阻塞特点

根据解析规则，可总结如下：

• css不会阻塞dom解析
• css会阻塞dom渲染（因为渲染树render tree根据dom树和css规则树生成）
• js会阻塞dom解析
• 浏览器遇到script标签会触发页面渲染（该标签没有设置async和defer属性）
• css会阻塞js的执行