css树的解析与DOM树的解析相关问题

1、html的解析和css解析是同步进行吗？

ans：浏览器会先下载HTML解析页面生成DOM树，遇到css标签就开始下载css并解析，这个过程不会阻塞DOM树构建，最后DOM树和css规则树生成渲染树，html解析完成。

2、css加载会阻塞DOM树的解析和渲染吗？

参考：js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗
ans：

1. css加载不会阻塞DOM树的解析
2. css加载会阻塞DOM树的渲染
3. css加载会阻塞后面js语句的执行

实际上我理解的DOM树的渲染，就是构建render tree的过程，因为你加载css的时候，可能会修改下面DOM节点的样式，如果css加载不阻塞DOM树渲染的话，那么当css加载完之后，DOM树可能又得重新重绘或者回流了，这就造成了一些没有必要的损耗。所以我干脆就先把DOM树的结构先解析完，把可以做的工作做完，然后等你css加载完之后，在根据最终的样式来渲染DOM树，这种做法性能方面确实会比较好一点。

3、link和@import的区别

参考：link和@import的区别

1. 从属关系区别：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2. 加载顺序区别：加载页面时，link 标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3. DOM可控性区别：可以通过 JS 操作 DOM ，插入link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
4. 兼容性区别：@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题