我可以在页面的其余部分加载后加载 JavaScript 代码吗？答案

【问题标题】：Can I load JavaScript code after the rest of page loads?我可以在页面的其余部分加载后加载 JavaScript 代码吗？
【发布时间】：2010-07-05 16:21:18
【问题描述】：

我有一个网页部分，它从外部源加载 JavaScript 文件，然后启动 Ajax 查询。

当我加载页面时，我看到浏览器经常说“等待 example.com”，所以我认为对这个外部 JavaScript 的依赖正在减慢我的初始页面加载速度。

有没有一种方法可以异步加载这个外部 JavaScript，这样它就不会减慢页面其余部分的加载速度？

【问题讨论】：

【解决方案1】：

最好将 JS 放在底部，就在结束 body 标记的正上方。此外，使用加载事件window.onload 或$(document).ready() 在页面加载后触发您的 JavaScript。

就异步或按需加载 JavaScript 文件而言，您可以从另一个 JavaScript 函数或事件中注入它。但实际上，您所做的与将其放在底部相同。

查看YSlow Guidelines 了解前端优化。

【讨论】：

我真的不喜欢将脚本放在页面底部的建议。我个人将脚本（除了那些调用document.write() 的脚本，我几乎从不使用）放在HEAD 中，因为它看起来在语义上更正确，并且与所有link 标记组合在一起看起来更干净。此外，当您在页面加载后立即触发 AJAX 请求时，无论如何都会显示“等待”状态。所以对用户来说，它不应该有所作为。
@Lèse，这是经过验证的、行业支持的优化。这不是个人建议或要求。但就语义而言，HTML 规范中没有针对 script 标记之外的 head 标记。因此，实际上只有组织原因。那么head 和底部body 有什么区别呢？不过同意状态消息。
我知道这是雅虎的推荐，许多大型网站都使用它，或者至少将它用于一些外部脚本，如分析，而不仅仅是你把它扔在那里。我只是不喜欢这种做法。语义不一定与语言规范相关联。使用表格进行布局是完全合法的，但这并不意味着它在语义上是正确的。关键是当您链接一个 JS 库时，它是不属于文档（或至少是文档正文）的元信息。同理，link标签放在head中。
真正的语义。它与有效的同义词使用，这是我应该说的。但是您对link 标签的类比是错误的。也就是说，事实上，它是 HTML 规范的一部分，如果你把它放在头部之外，它会使你的页面无效。

【解决方案2】：

您可以使用 jQuery 的 .getScript() 方法，它只是 AJAX 调用的包装器。

这使请求异步，并为您提供在脚本加载后运行的回调。

【讨论】：

【解决方案3】：

你可以在这里看到我的回答：Dynamic (2 levels) Javascript/CSS Loading

然后从here 获取脚本（参见源代码）。在底部使用它，您的脚本不会阻塞其他资源（如果您有多个资源，它们将被并行跨浏览器下载）。

【讨论】：

【解决方案4】：

我写了一个库来异步加载带有回调的javascript文件，当它加载时：

Sigma.async_script_load('http://example.com/underscore/underscore-min.js', '_', function() {
  _([1,2,3,2,3,1]).uniq();
});

【讨论】：