如何防止外部 JS 阻止您的网站加载？答案

【问题标题】：How to prevent external JS to block your site from loading?如何防止外部 JS 阻止您的网站加载？
【发布时间】：2009-07-21 11:34:24
【问题描述】：

如何防止加载缓慢的外部js文件阻塞整个网站的加载过程（因为浏览器一次只处理2个请求）？

假设我想包含 sharethis 按钮，但服务器负载很重，需要很长时间才能满足我的请求，我如何才能强制其余部分加载。还是应该在网站已经加载后添加外部脚本？

我正在使用带有 jQuery 的 RoR。

最好，奥莱

【问题讨论】：

【解决方案1】：

我个人会在您需要的项目之后加载额外的项目。

例如将代码添加到页面底部，以便 jQuery 已经加载，然后从 jQuery 中加载它们，如下所示

$(document).ready(function(){
  $.getScript("urlofscript");

});

getScript() 的详细信息here

【讨论】：

需要注意的一点：如果外部脚本使用 document.write 将其内容添加到页面中，您将无法使用此方法 - document.write 会覆盖整个页面！在我发现在他们的情况下您可以将 async=2 添加到查询字符串之前，我遇到了谷歌地图的这个问题。

【解决方案2】：

你应该使用jQuery的$(document).ready()函数动态加载外部JavaScripts。

您必须创建 <script> 元素并将它们附加到您的文档中。

【讨论】：

【解决方案3】：

将您的 javascripts 放在页面末尾，就在

【解决方案4】：

请务必将此阻止脚本放在页面末尾，</body> 之前。

或者，如果您想延迟加载它/实际上不需要加载页面的脚本，那么document.write() 选项很好。

我也推荐从这个页面阅读网页优化规则：http://code.google.com/speed/page-speed/docs/rtt.html。

或者阅读 Steve Souder 的任何一本书：“高性能网站”和“更快的网站”

【讨论】：

很高兴我能帮上忙，我绝对推荐安装名为 Pagespeed 或 YSlow 的萤火虫插件，基本上是同一个人 (Souders)。直到最近，Pagespeed 还是一个用于衡量性能的 Google 内部工具。这些工具基本上会查看当前页面，查看它们如何根据您在我链接到的页面上看到的性能规则进行衡量，并告诉您可以做些什么来使您的页面更快。

【解决方案5】：

只需将<script> 元素放在文档末尾（就在</body> 标记之前）。

【讨论】：