延迟加载Javascript文件与仅在加载之前放置有什么区别</车身>；

环顾四周，找不到讨论过的这个具体问题。很明显，差别可以忽略不计，只是好奇你的想法

场景：页面呈现之前不需要加载的所有Javascript都被放置在关闭标记之前。在触发domload/ready事件时，通过头部执行的一些Javascript代码延迟加载这些代码，有什么好处或坏处吗？假设这只涉及下载一个完整的、包含函数的.js文件，而不是在使用时根据需要懒洋洋地加载几个单独的文件

---

希望这一点很清楚，谢谢。

就可用性而言，你绝对不应该使用任何用户期望快速响应的东西，比如按钮除了其他功能外，还可以作为加载触发器执行双重任务

---

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

在我看来，这是一个很大的区别

当您在

标记的底部内联JS时，您强制页面同步（现在必须发生）和顺序（一行）加载这些

，因此您会稍微降低页面速度，因为您必须等待那些HTTP调用完成和JS引擎解释您的脚本。如果你把大量的JS堆积在页面底部，你可能会浪费用户在网络排队上的时间（在旧浏览器中，每个主机一次只有2个连接），因为脚本可能相互依赖，所以必须按顺序下载

如果希望DOM准备得更快（通常是大多数人等待处理任何事件和动画），则必须减少脚本的大小，使其尽可能小并并行化

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

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

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

</script>

YUI（）.使用（'module'，函数（Y）{
//当球返回并被判读时完成
});

我不是一个特别喜欢把脚本放到一个大球中的人（因为如果一个依赖项发生了变化，你必须重新下载并解释整个过程！），但我喜欢管道内衬（组合脚本）和基于事件的模型

---

当您允许异步、基于事件的加载时，您可以获得更好的性能，但可能无法感知性能（尽管这可以抵消）

例如，页面的某些部分可能在一两秒钟内无法加载，因此看起来会有所不同（如果您使用JS来影响页面样式，我不建议这样做），或者在您（或站点宿主）返回脚本之前，您还没有准备好与用户交互

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

具有正确的依赖项，以便能够正确执行。例如，如果没有jQuery或Prototype，则无法成功调用：

<script>

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

</script>

$（函数（）{
/*做点什么*/
});

或

document.observe（'dom:loaded'，函数{
/*做点什么*/
});

解释者会说“变量$undefined”。即使同时将两个

添加到DOM，也会发生这种情况，因为我敢打赌jQuery或Prototype比应用程序的JS更大（因此对数据的请求需要更长的时间）。不管是哪种方式，如果没有某种限制，你将把这一切留给机会

---

所以，选择真的取决于你。如果你能正确地划分你的依赖关系，也就是说，先把你需要的东西放在前面，然后再懒洋洋地加载其他东西，这将导致更快的总时间，直到你到达DOM准备就绪为止

---

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

对于冗长的回答，很抱歉-简单的回答是，它将使您的DOM更快地准备好并可用（如果你懒洋洋地加载带有

函数的
）。但是，如果你需要立即使用这些函数，这取决于你自己。如果脚本下载时间太长，则将其内联，否则懒洋洋地执行（尤其是如果你可以用其他东西处理事件等）。这是一个很好的评估，谢谢。我很感激细节。我在最初的问题中没有问过一件事，我想知道的是，如果以这种方式送达，如果大球'o'js保持不变，是否会缓存以供后续访问。你知道吗？事实上，我们很感激这些信息，但我们不能这样做，因为我们的静态文件是通过我们的CDN提供的，所以我们不能通过Javascript（跨域）获取它们不过，我将能够使用此信息，所以谢谢。如果任何依赖项不同，ball'o'js不会被缓存。我最近参加了一次Yahoo！活动，他们突出显示了YUI3，这是我与此系统的根本区别：（.Google Closure Library（用于许多Google属性）做同样的事情。它似乎有两个连接-一个用于核心JS，一个用于该页面的DEP，这似乎是一个不错的选择（虽然我认为你可以通过闭包来实现，但不确定YUI3）。
<script>

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

</script>