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 元素,不存在兼容性问题

猜你喜欢

转载自blog.csdn.net/weixin_43912756/article/details/108458236