关于尽早开始JS执行

Question

关于老师讲的“尽早开始JS文件执行”，我没太理解。事件监听，DOMContentLoaded比window.onload先执行完，那么，老师说使用前者，而不使用后者的意思，是说把有关DOM操作的JS代码（而不是其它的JS代码）放在前者而不是后者中执行吗？目的是让DOM的渲染尽早呈现给用户？
还有一个问题，在什么情况下需要用到这个事件监听来操作DOM呢？我看过的操作DOM的JS代码都是直接写的，没见过放在DOM加载完成的事件监听中啊，老师能讲一下在什么情况下需要用到它吗？谢谢！

Answer 1

双越 2021-06-03 21:32:33

第一个问题。一般情况下，js 执行都会放在 DOMContentLoaded ，这样不必等待媒体资源（如大图片）的加载时间。可以一遍加载着图片等资源，同是去执行 js 代码。这样效率更高。

第二个问题。没看懂。“用到这个事件监听”是什么意思？可以再继续解释一下。

PS：尽量一次性提交一个问题，否则我回答、你再回复，都很混乱。

• 提问者 慕妹8003063 #1

  抱歉，我没做过项目，因此，没用过DOMContentLoaded，对老师讲的“一般情况下，js 执行都会放在 DOMContentLoaded"这句话就没太理解。我分析是这样的，DOMContentLoaded是一个监听事件，那么“js 执行”说的就不是放<script>标签里的一个完整JS文件，同时，现在讲的是提升渲染速度的性能优化，那么，“js 执行”说的应该是操作DOM的JS代码，我理解的对吗？
  那么，有关操作DOM的JS代码为什么需要放在 DOMContentLoade里执行呢? 不用DOMContentLoade包裹，就直接写在JS文件里不行吗？是为了避免DOM Tree没有解析完，DOM节点还没有生成就操作DOM导致错误吗？但是，如果把JS文件放在body的最后，这种情况是不会发生的吧？除了与window.onload的对比以外，我没理解使用DOMContentLoaded的目的和意义是什么。给老师添麻烦了！

• 双越 回复 提问者 慕妹8003063 #2

  额。。。。到这里，我感觉你根本没有了解到 DOMContentLoaded 和 window.onload 有什么区别呀。或者你看着课程感觉明白了，但是没有实际体验过。是否这样？

• 提问者 慕妹8003063 回复 双越 #3

  是的，我没有实际体验过。
  我理解，DOMContentLoaded 和 window.onload的区别只在于图像、视频等媒体文件是否加载完，差别只在时间上，操作DOM的代码放在DOMContentLoaded里会比放window.onload里早执行。但是它们同是DOM加载并解析完成的事件。
  我的问题是，有关DOM操作的代码为什么需要放在DOM解析完成的事件里执行，不用它们不行吗？用它们起什么作用？是我分析的，为了避免DOM Tree没有解析完，DOM节点还没有生成就操作DOM导致错误吗？

点开查看后面1条评论