作者回复: 借这里解答下留的题目:
当从服务器接收HTML页面的第一批数据时,DOM解析器就开始工作了,在解析过程中,如果遇到了JS脚本,如下所示:
<html>
<body>
极客时间
<script>
document.write("--foo")
</script>
</body>
</html>
那么DOM解析器会先执行JavaScript脚本,执行完成之后,再继续往下解析。
那么第二种情况复杂点了,我们内联的脚本替换成js外部文件,如下所示:
<html>
<body>
极客时间
<script type="text/javascript" src="foo.js"></script>
</body>
</html>
这种情况下,当解析到JavaScript的时候,会先暂停DOM解析,并下载foo.js文件,下载完成之后执行该段JS文件,然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。
我们再看第三种情况,还是看下面代码:
<html>
<head>
<style type="text/css" src = "theme.css" />
</head>
<body>
<p>极客时间</p>
<script>
let e = document.getElementsByTagName('p')[0]
e.style.color = 'blue'
</script>
</body>
</html>
当我在JavaScript中访问了某个元素的样式,那么这时候就需要等待这个样式被下载完成才能继续往下执行,所以在这种情况下,CSS也会阻塞DOM的解析。
所以JS和CSS都有可能会阻塞DOM解析,关于详细信息我们会在后面的章节中详细介绍。
作者回复: 和DOM不一样,在源码里面并没有CSSOM这个词,你说的CSSOM 应该是就是styleSheets,这个styleSheets是能直观感受的到的。
渲染树也是16年之前的东西了,现在的代码完全重构了,你可以把LayoutTree看成是渲染树,不过和之前的渲染树还是有一些差别的。
作者回复: 这个链接有一些参考资料你可以参考下:https://time.geekbang.org/column/article/116572
作者回复: 分开来,结构会更加清晰,目前布局操作都是在主线程执行执行的,如果将布局的输入结构和输出结构分开来,那么可以在另外一个线程上执行布局操作,解析完把结果提交给主线程,这样会减轻主线程的压力。
所将输入结构和输出结构分开,后续就可以更好地重构渲染模块的代码了!
这也是Chrome渲染团队目前在做的一件事。