Question

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

我认为减速的主要原因不仅在于从第三方获取文件，而是实际运行各种脚本，特别是与我的并行。

我想保留所有脚本，但我希望在我的所有脚本加载后，在幕后加载它们，并且浏览器中没有明显的性能下降。例如，如果我在第三方脚本加载时开始向下滚动，或者出现各种其他轻微烦恼，我不希望浏览器“断断续续”或跳转。

有没有人在此之前解决这个问题并想出一个好的解决方案？到目前为止，我认为最好的选择可能是在我的所有脚本完成之后使用jQuery.getScript（）加载第三方脚本（字面意思是其中一个.js包含的底部）。尽管如此，这可能会同时加载它们，这可能会使浏览器缓慢一两秒。

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

抓住产品页面的源代码，将其放入测试PHP页面，以便随时修改
用一个开/关标志包围每个脚本，例如
- if（isset（$ _REQUEST [“allowGoogleAnalytics”]））{
在关闭所有脚本的情况下运行测试
在新标签页中，运行更多测试，一次打开一个脚本
当我自己的脚本全部打开时，页面加载（第一个视图）大约需要1.9秒，重复视图大约需要一秒钟。这对我没问题。
打开第三方脚本后，页面加载（第一次加载）的时间至少为3.1秒，有时甚至达到3.9

有问题的第三方脚本是：

facebook“like”button
google +1按钮
Pinterest的
google trusted stores

这些都不是特别糟糕，但它们一下子结合起来并且耗时太长，并使浏览器太迟钝了。

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>

Answer 2

在过去，我已经取得了一些成功，直到页面完全加载（在DOM Ready之后发生）。在 window.load之前加载的任何脚本都会导致浏览器在解析/渲染/资源加载之前做更多工作。传统上，我们在DOM上做好一切准备 - 这可以很快给浏览器带来很多处理。相反，拆除任何非关键功能，让浏览器在处理完所有关键内容之后处理它们。

尝试使用非关键脚本（例如按钮，对页面不重要的任何内容）并等待加载它们直到window.load。然后应用淡入效果或其他内容以便于显示。如果window.load太长而无法等待（即你的页面上有一堆图像），那么你可以这样做：

$(function() {
    var timer = setTimeout(loadThirdPartyScripts, 1200),
        $window = $(window);

    $window.on('load.third_party', loadThirdPartyScripts);

    function loadThirdPartyScripts() {
        clearTimeout(timer);
        $window.off('load.third_party');
        /* load your scripts here */ 
    }
});

这将在窗口在1.2秒后加载或后加载所有非关键脚本 - 以先到者为准（根据需要调整超时）。如果你有很多图片 - 我建议在镜头下方加载懒人 - 整个点就是让window.load尽快开火。

免责声明：如果您等到window.load加载十二个或两个资源，您仍然会遇到与现在相同的口吃。

快速处理第三方javascripts，因此页面看起来不会很慢

2 个答案: