浏览器解析渲染的过程

浏览器加载解析过程

在面试的时候，有的面试官会问到js加载是不是会阻塞DOM树的解析和渲染，css会不会，或者问到相关问题，就想总结一下，首先有几个问题，自己在查询资料的时候，答案众说纷纭，通过自己学习，总结如下，也欢迎纠正
1.css会不会阻塞DOM树的解析和渲染?
css是不会阻塞DOM树的解析；因为当浏览器解析到link的href去加载外部css文件的时候，浏览器还是会继续加载dom结构，为了效率，它会把该完成的都解析完，生成相应的dom树，但是会阻塞dom的渲染，它要等外部的css文件加载解析完，才会解析style标签里的样式，这时候才是根据样式的顺序也好，权重也好去渲染dom。

//小demo://demo.css文件：.demo {    background-color: yellow !important;   //1}//.html文件<link ref="stylesheet" href="./demo.css">//style:    .demo {        width: 200px;        height: 200px;        background-color: red !important;   //2    }//body:    <div class="demo" style="background-color: blue">你好</div>  //3    显示的你好是什么颜色? 

2.js会不会阻塞DOM树的解析和渲染?
js的加载会阻塞DOM树的解析和渲染，还有后面一些资源的下载，js的加载和执行有以下特点：
1>载入js后浏览器会立即执行
2>执行时会阻塞后面内容的构建，渲染及以下资源的下载，因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。

//运行个demo，自己可以测试一下：//把脚本放在头部和放在底部，在js里面去获取dom元素，看看能不能获取到，或者写个死循环，让脚本一直运行，看dom能显示出来不 <script>        while(true){            console.log(1);        }</script>