延迟加载 Javascript 文件与放置在

Answer 1

在我看来，有很大的不同。

当您在 标记底部内联 JS 时，您将强制页面同步加载这些

如果您希望 DOM 更快地准备好（通常是大多数等待执行事件处理和动画的），则必须尽可能减少所需脚本的大小并并行化它们。

例如，YUI3 有一个小的依赖解析和下载脚本，您必须在页面中按顺序加载该脚本（请参阅 YUI3 的 Seed.js）。之后，您浏览页面并收集依赖项，并对他们的 CDN（或您自己的服务器）进行 1 次异步和管道调用，以获得一大堆 JS。返回 JS 球后，您的脚本将执行您提供的回调。这是一般模式：

<script src="seed.js"></script>
<script>

    YUI().use('module', function(Y) {
        // done when the ball returns and is interpretted
    });

</script>

我不太喜欢将脚本放入 1 个大球中（因为如果 1 个依赖项发生变化，您必须重新下载并解释整个内容！），但我是管道衬里的粉丝（组合脚本）和基于事件的模型。

---

当您确实允许异步、基于事件的加载时，您会获得更好的性能，但可能不会感觉到性能（尽管这可以被抵消）。

例如，页面的某些部分可能会在一两秒内无法加载，因此看起来会有所不同（如果您使用 JS 来影响页面样式，我不建议这样做）或不准备好进行用户交互，直到您（或托管您网站的人员）返回脚本为止。

此外，您必须做一些工作来确保您的

<script>

    $(function () {
        /* do something */
    });

</script>

或者

<script>

    document.observe('dom:loaded', function {
        /* do something */
    });

</script>

解释器会说“Variable $ undefined”之类的内容。即使您同时将两个

---

所以，选择实际上取决于你。如果你可以正确地分割你的依赖关系——即将你需要的东西放在前面，然后延迟加载其他东西，那么在你到达 DOM 准备就绪之前，这将导致更快的总体时间。

但是，如果您使用像 jQuery 这样的整体库，或者用户希望能够立即看到涉及 JS 动画或样式的内容，那么内联可能更适合您。

Answer 2

就可用性而言，您绝对不应该对用户期望快速响应的任何内容执行此操作，例如让按钮除了其他功能外还充当加载触发器的双重职责。

OTOH 用用户滚动时不断加载页面来代替分页是一个非常好的方法好主意。我确实发现当加载触发器接近页面末尾时会分散注意力，最好将其放在 1/2 到 3/4 的位置。