javascript - 快速处理第三方 javascript，因此页面不会显得很慢

Question

我一直在用 http://www.webpagetest.org/ 做一些测试今天看看哪些脚本减慢了我的页面加载速度。长话短说，我发现第三方脚本会导致加载速度明显变慢。我使用异步和延迟将它们全部加载到页面底部(参见 https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/)。

我认为速度变慢的主要原因不仅在于从第三方获取文件，还在于实际运行各种脚本，尤其是与我的并排运行。

我想保留所有脚本，但我希望它们在幕后加载，在我的所有脚本都已加载之后，并且浏览器的性能没有明显下降。例如，如果我在加载第三方脚本时开始向下滚动，或者出现其他各种小麻烦，我不希望浏览器“卡顿”或跳来跳去。

有没有人解决过这个问题并想出一个好的解决方案？到目前为止，我认为最好的选择可能是在我的所有脚本都完成后(实际上是在其中一个 .js 包含的底部)使用 jQuery.getScript() 加载第三方脚本。不过，这可能会同时加载它们，这可能会使浏览器迟缓一两秒钟。

关于我如何进行测试的更多细节，对于任何感兴趣的人:

• 抓取了一个产品页面的源代码，把它放到一个测试PHP页面中，这样我就可以随意修改了
• 用开/关标志包围每个脚本，例如
  • if (isset( $_REQUEST["allowGoogleAnalytics"] ) ) {
• 在关闭所有脚本的情况下运行测试
• 在新标签页中，运行更多测试，一次打开一个脚本
• 当我自己的脚本全部打开时，页面加载(第一次查看)大约需要 1.9 秒，重复查看不到一秒。这对我来说很好。
• 打开第三方脚本后，页面加载(首次加载)至少需要 3.1 秒，有时甚至长达 3.9 秒

有问题的第三方脚本是:

• Facebook“喜欢”按钮
• 谷歌 +1 按钮
• 兴趣
• Google 信任的商店

这些本身都不是特别糟糕，但它们同时结合起来会花费太长时间，并使浏览器太慢。

Answer 1

如果问题出在同时加载中，您可以将脚本排队。此外，此加载应在文档准备就绪时开始(我看到您已经在使用 jQuery，因此在示例中使用它)。示例代码(在本地测试，有效)。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  var scripts2load = [
      "http://apis.google.com/js/plusone.js",
      "http://connect.facebook.net/en_US/all.js#xfbml=1"
  ];

  function loadNext() {
    var url = scripts2load.pop();
    if (url) {
        $.ajax({
          url: url,
          cache: true,
          crossDomain: true,
          dataType: "script",
          success: loadNext
        });
    }
  }
  $(loadNext)
</script>