Question

在DOM准备好后，是否始终将代码写在doc底部？

正在收听文件的就绪事件

<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            // code ..
        });

    </script>

</head>
<body>

    <!-- Document -->

</body>
</html>

相当于在文档底部编写代码？

<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>

    <!-- Document -->

    <script type="text/javascript">

        // code ..

    </script>
</body>
</html>

Answer 1

实际上，它们非常接近，以至于很多脚本的行为都是一样的。关于“文件底部的代码”案例：

除了结束标记之外，整个文档都将被解析。但是树构造算法的工作方式是由</body>和</html>引起的转换（1， 2）（假设您的标记相当清晰））不要影响树。

严格地说，底部<script>标记中没有async或defer属性的代码在DOMContentLoaded事件之前执行，因此DOMContentLoaded事件处理程序如果在那里注册仍然会运行。但是如果$(document).ready()已经被调度，jQuery的DOMContentLoaded将立即运行提供的回调。

如果你想使用document.write，它们会有很大的不同。

Answer 2

正在加载DOM时，将执行

正文中的脚本（在标记之间）。而文档和文档结束时的脚本将在加载dom时执行。

Answer 3

虽然DOM在技术上已经准备就绪，直到它解析了整个文档，但实际结果却是一样的。页面上的所有HTML元素都已加载，您的脚本将能够与它们进行交互，就像您等到dom准备就绪一样。话虽如此，等待DOM准备好通常是不必要的，并且可能使您的应用程序变得比它需要的慢。

始终是在DOM准备好之后执行的doc底部编写的代码吗？

3 个答案: