js和css对DOM解析和页面渲染的影响

浅谈CSS到底会不会阻塞页面渲染
script脚本阻塞的探究、异步属性async和defer的区别
webkit渲染过程
html转换成抽象语法树,AST介绍：解析html生成语法树
浏览器DOM渲染及阻塞问题

从上面两个流程图我们可以看出来，浏览器渲染的流程如下：

HTML解析文件，生成DOM Tree，解析CSS文件生成CSSOM Tree

将Dom Tree和CSSOM Tree结合，生成Render Tree(渲染树)

根据Render Tree渲染绘制，将像素渲染到屏幕上。

从流程我们可以看出来

DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。
然而，由于Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后，才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的。
由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

总结：

    1. js在任何时候都会阻塞dom,通常是将js放在body结束的时候，这样会将所页面渲染完成之后再执行js。有利于用户的体验。async是异步加载js，加载完成立刻执行。defer是异步加载js，但是加载完成之后会等待一个事件dom解析完成之后执行。
    2. css的加载会阻塞js的执行，会阻塞页面的渲染，但是不会阻塞DOM的解析。