Fatal编程技术网
  • javascript/
  • Javascript 减少来自客户端的第三方异步调用的数量

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

javascript asynchronous

Javascript 减少来自客户端的第三方异步调用的数量,javascript,asynchronous,webclient,Javascript,Asynchronous,Webclient,我有一个应用程序，其中客户端向第三方服务器发送多个异步javascripts请求。我面临的问题是，每当客户机响应这些响应时，站点就会在这毫秒的时间内处于非活动状态。因此，发送这些多个请求会增加非活动时间。例如，如果我发送x个请求，并让我们假设每个响应的站点处于非活动状态的时间为y平均毫秒，那么总的无效时间为x*y。如何将这些呼叫减少为一个呼叫。第三方，我指的是像谷歌分析，谷歌广告线索和更多的呼吁 下面是我打电话的一个例子 function () { var oldonload = w

我有一个应用程序，其中客户端向第三方服务器发送多个异步javascripts请求。我面临的问题是，每当客户机响应这些响应时，站点就会在这毫秒的时间内处于非活动状态。因此，发送这些多个请求会增加非活动时间。例如，如果我发送x个请求，并让我们假设每个响应的站点处于非活动状态的时间为y平均毫秒，那么总的无效时间为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()}};
      }());
首先：内联异步javascript不会阻止浏览器。但立即调用的函数确实如此。您不需要将
window.onload
回调嵌套到立即调用的函数中

我建议您提供一个函数来处理浏览器事件中的所有事情。例如：

window.onload = function() {
    //do everything here
}
如果应用程序逻辑允许，请将此脚本放在关闭标记之前

这可能对你有帮助。无论如何，我还建议您在脚本执行时测量应用程序的实际功能。例如，使用chrome开发者工具（timeline选项卡），您可以很容易地做到这一点。

问题可能在于adroll如何劫持window.onload，它在所有页面呈现完成后触发。如果我是你，我会使用jQuery（你已经在调用的另一个东西可能是，从Google 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 -->

<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>


我的网络应用
。。。头部和身体的其余部分

    <!--// 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>


$（文档）.ready（新函数（）{
//您的onload代码，该代码不应再被阻止
});
//然后是你的adroll脚本
（功能（）{
var oldonload=window.onload；
window.onload=函数（）{
__adroll_loaded=true；
var scr=document.createElement（“脚本”）；
var主机=（（“https:==文档.位置.协议）？”https://s.adroll.com" : "http://a.adroll.com");
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 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>

//后跟您的adroll脚本
（功能（）{
var oldonload=window.onload；
window.onload=函数（）{
setTimeout（函数（）{
__adroll_loaded=true；
var scr=document.createElement（“脚本”）；
var主机=（（“https:==文档.位置.协议）？”https://s.adroll.com" :
"http://a.adroll.com");
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);
如果（oldonload）{oldonload（）}
};
}());
这样，window.onload就可以立即为您自己的代码执行它应该执行的任何操作，半秒钟后，adroll代码将异步执行。

为了实际减少js请求的数量，您可以在服务器上使用绑定。这将允许您向服务器发出单个请求，服务器将获取所有必要的js文件并将它们放在单个响应体中。 因此，与其这样做，不如：

<!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 -->

<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中，您可以使用捆绑和缩小。

您所说的“挂起”到底是什么意思？他们做什么样的阻塞操作？与其试图影响它的执行，不如为第三方提交一个bug来删除此行为。Handling应使用inactive进行编辑。这意味着用户在此期间无法执行任何操作。您不认为通过捆绑请求，响应也会越来越大，站点挂起的频率会降低，但平均挂起的时间会更长吗？这些请求到底做了什么，以及可以捆绑哪些内容来降低开销？我知道“挂起”是什么意思，但当它们挂起时会发生什么？哪种处理，哪种代码会导致应用程序挂起？这太宽泛了，如果您不向我们显示更具体的代码，我们无法帮助您。在这种情况下，立即调用的函数不是阻塞，只是设置window.onload。外部函数包装器仅用于限制作用域。如果oldonload的var语句未包含在函数中，则它将是一个悬空全局。Adroll只应进行一次调用。他说的是从一个浏览器中加载所有不同的代码集，我想，为了实现你的建议，他需要某种服务器端脚本来为他下载所有javascript文件，或者他仍然在从浏览器中进行相同数量的调用，他只需要多做一个就可以得到加载其他内容的初始脚本。@Steve