1、html的解析和css解析是同步进行吗?
ans:浏览器会先下载HTML解析页面生成DOM树,遇到css标签就开始下载css并解析,这个过程不会阻塞DOM树构建,最后DOM树和css规则树生成渲染树,html解析完成。
2、css加载会阻塞DOM树的解析和渲染吗?
参考:js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗
ans:
- css加载不会阻塞DOM树的解析
- css加载会阻塞DOM树的渲染
- css加载会阻塞后面js语句的执行
实际上我理解的DOM树的渲染,就是构建render tree的过程,因为你加载css的时候,可能会修改下面DOM节点的样式,如果css加载不阻塞DOM树渲染的话,那么当css加载完之后,DOM树可能又得重新重绘或者回流了,这就造成了一些没有必要的损耗。所以我干脆就先把DOM树的结构先解析完,把可以做的工作做完,然后等你css加载完之后,在根据最终的样式来渲染DOM树,这种做法性能方面确实会比较好一点。
3、link和@import的区别
- 从属关系区别:
@import
是 CSS 提供的语法规则,只有导入样式表的作用;link
是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。 - 加载顺序区别:加载页面时,
link
标签引入的 CSS 被同时加载;@import
引入的 CSS 将在页面加载完毕后被加载。 - DOM可控性区别:可以通过 JS 操作 DOM ,插入
link
标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import
的方式插入样式 - 兼容性区别:
@import
是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link
标签作为 HTML 元素,不存在兼容性问题