Question

我有一个应用程序，其中客户端向第三方服务器发送多个异步javascripts请求。我面临的问题是，无论何时客户端响应这些响应，站点都会在该毫秒时间内变为非活动状态。因此，发送这些多个请求会增加非活动时间。例如，如果我发送x请求并假设每个响应该站点变为非活动y avg miliseconds然后总的低效时间是x * y。如何将这些呼叫减少为一个呼叫。我所指的第三方就像是谷歌分析，谷歌广告主管和更多

的呼吁

以下是我正在进行的其中一个电话的示例

function () {
      var oldonload = window.onload;
      window.onload = function(){
      __adroll_loaded=true;
      var scr = document.createElement("script");
      var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
      scr.setAttribute('async', 'true');
      scr.type = "text/javascript";
      scr.src = host + "/j/roundtrip.js";
      ((document.getElementsByTagName('head') || [null])[0] ||
      document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
      if(oldonload){oldonload()}};
      }());

Answer 1

首先：内联异步javascript不会阻止浏览器。但是立即调用函数呢。您不需要将window.onload回调嵌套到立即调用的函数中。

我建议你提供一个功能来完成对浏览器事件的所有反应。举个例子：

window.onload = function() {
    //do everything here
}

如果您的应用逻辑可以将此脚本放在</body>结束标记之前。

这可能会对你有所帮助。无论如何，我还建议你测量你的应用程序在脚本执行时真正做了什么。您可以轻松地执行此操作，例如，使用chrome开发人员工具（时间轴选项卡）。

Answer 2

问题可能在于adroll如何劫持window.onload，它在所有页面呈现完成后触发。如果我是你，我会使用jQuery（你可能已经调用的其他东西之一，所以从谷歌URL获取它，所以你只需要下载一次）。将它放在HEAD标记的顶部，以便首先下载并加载，对于您的代码，使用$（document）.ready（）调用，如下所示：

<!doctype html>
<html language="en">
<head>
    <title>My Webapp</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--// other library scripts go here -->

...... HEAD和BODY的其余部分

    <!--// other paste-in tracking code scripts like Google Analytics go here-->

    <script>
        $(document).ready(new function () {

            //Your onload code, which should no longer be blocked

        });
    </script>

    <script type="text/javascript"> //followed by your adroll script
    (function () {
    var oldonload = window.onload;
    window.onload = function(){
       __adroll_loaded=true;
       var scr = document.createElement("script");
       var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
       scr.setAttribute('async', 'true');
       scr.type = "text/javascript";
       scr.src = host + "/j/roundtrip.js";
       ((document.getElementsByTagName('head') || [null])[0] ||
      document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
       if(oldonload){oldonload()}};
    }());
    </script>
</body>
</html>

这样，脚本将在后台安静地下载，您的代码可以继续运行，并在没有它们的情况下执行它需要做的事情。如果它真的是阻止你的代码运行的脚本，你可以设置一个超时函数，以便在你的代码加载时延迟加载半秒钟，通过这样改变它：

    <script type="text/javascript"> //followed by your adroll script
    (function () {
        var oldonload = window.onload;
        window.onload = function(){
           setTimeout(function () {
               __adroll_loaded=true;
               var scr = document.createElement("script");
               var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" :
                 "http://a.adroll.com");
               scr.setAttribute('async', 'true');
               scr.type = "text/javascript";
               scr.src = host + "/j/roundtrip.js";
               ((document.getElementsByTagName('head') || [null])[0] || 
                 document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
           }, 500);
           if(oldonload){oldonload()}
       };
    }());
    </script>

这样，它会立即继续执行任何window.onload应该为您自己的代码执行，半秒后，adroll代码将异步执行。

Answer 3

要实际减少js请求的数量，您可以在服务器上使用捆绑。这将允许您向服务器发出单个请求，该请求将获取所有必需的js文件并将它们放在单个响应主体中。所以不要做这样的事情：

<script src='https://s.adroll.com/js/javascrpt1.js' type='text/javascript'></script>
<script src='https://s.adroll.com/js/javascrpt2.js' type='text/javascript'></script>
....
<script src='https://s.adroll.com/js/javascrpt100.js' type='text/javascript'></script>

您只能拨打一个电话

<script src='https://yourdomain/getAllJs' type='text/javascript'></script>

您还可以以更可重用的方式实现它，例如，您可以在特定页面上传递所需脚本的文件名。

<script src='https://yourdomain/getjs?file=javascript1.js&file=javascript2.js&....file=javascript100.js' type='text/javascript'></script>

我不确定您使用的是哪种服务器技术，所以我没有在此处提供示例。例如，在ASP.NET中，您可以使用Bundling and Minification out of the box。

减少来自客户端的第三方异步调用次数

3 个答案: