关于页面渲染的问题

来源:16-3 网页是如何加载并渲染出来的

慕神9465694

2020-01-01

老师,关于页面渲染的过程有点疑惑。
按照您视频中说的,根据render tree 渲染页面,遇到script标签时会解析并执行完JS再继续渲染。
但是我在网上看到很多说是— 根据html文件构建DOM树和CSSOM树。构建DOM树期间,如果遇到JS,阻塞DOM树及CSSOM树的构建,优先加载JS文件,加载完毕,再继续构建DOM树及CSSOM树。
大概意思就是,在构建DOM的期间就会遇到script标签了吧,所以应该不是在渲染的过程中遇到script吧?那是不是说等到解析完script才会形成dom,再和cssom结合成render tree再渲染呢?
不知道哪个顺序是正确的,请老师解惑?

写回答

2回答

双越

2020-01-01

按照我说的来理解。

你可以做一个实验,就我们现在这个慕课网问题详情页 http://coding.imooc.com/learn/questiondetail/159872.html 。你设置 chrome 网速为弱网,然后刷新页面,会发现页面出来了,但是输入框点击无效。即页面渲染出来了,但是 js 可能还没加载完。

1
2
小琥珀007
老师,我看了很多文章,你这块说的有误貌似。 刷新页面,会发现页面出来了,但是输入框点击无效。这是因为遇到外联的js,会把解析好的部分dom给先渲染出来 构建DOM树期间,如果遇到JS,是js会先等cssom生成好,然后再执行js。所以在js参与下。会出现css阻塞html的解析。而无js参与,html和css是一起解析的
2022-02-16
共2条回复

wibc666

2020-06-17

老师,把script标签放body最后,html在渲染成dom树的时候不是已经遇到js了吗?不是要加载到整个html标签完之后,dom树才渲染完成吗?

0
2
慕哥8388771
我习惯把