Question

可能重复：
$(document).ready(function(){}); vs script at the bottom of page

自从我阅读this book以来，我就像这样写了我的网页：

<!DOCTYPE html>
<html>
    <head>
        <!-- styles -->
    </head>
    <body>
        <!-- page content -->
        <!-- scripts -->
    </body>
</html>

相对而言，这是否就像在jQuery $(document).ready(function() {});中运行我的所有代码一样？我没有真正注意到准备与否的事情有什么不同，事情只是起作用而且我不需要在功能中包装东西以使事情顺利进行。

Answer 1

浏览器会在遇到脚本时停止呈现html - 因为它必须停止并解析脚本文件，自上而下 - 这可能会使您的窗口长时间处于空白状态。大多数Web开发人员宁愿让用户能够开始查看页面内容（即使所有脚本功能可能尚未到位），而不是让他们盯着空白页面。这是通过将标记放在body标记的底部来延迟加载脚本文件的主要原因。

Answer 2

不，它不是完全相同。但它非常接近。

根据我的经验，最大的问题是处理页内<script>块，假设已经完成了一些准备工作。加载JavaScript框架（再次，我的个人经验）是一个重大问题。

除此之外，在<body>末尾加载是一个好主意。无论如何，在旧版本的IE中，“DOM就绪”状态有点脆弱。（框架可以应付，但它仍然是一个小混乱。）

Answer 3

就脚本何时触发而言 - 是的，它是一样的。但是，在加载过程中会产生差异 - 当您将JS文件置于顶部时，它们将阻止所有其他资源加载，直到JS完成为止。但情况并非总是如此 - 您可以使用head.js作为解决方法，例如

将脚本放在与onDomReady相同的底部？

3 个答案: