关于页面渲染的问题

Question

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

Answer 1

双越 2020-01-01 19:47:36

按照我说的来理解。

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

• 提问者 慕神9465694 #1

  懂了，感谢老师解答！

• 小琥珀007 #2

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

Answer 2

wibc666 2020-06-17 15:18:01

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

• 双越 #1

  浏览器会自己做判断的。虽然我们说整个 html 需要加载完才行，但这是原理机制。浏览器会有自己的性能优化逻辑，不用我们操心。我们只需要按照推荐的方式写就行了。

• 慕哥8388771 #2

  我习惯把<script>标签放在</body>后面去执行，实战中好像也没什么问题