Minimize the amount of external asynchronous calls made by the client

Question

Minimize the amount of external asynchronous calls made by the client

In my application, the client initiates multiple asynchronous JavaScript requests to third party servers. The issue I'm encountering is that when the client responds to these requests, the site becomes inactive for a brief period of time. This inactivity is multiplied with each subsequent request, resulting in overall inefficient loading times. For example, if x number of requests are sent and the average downtime per response is y milliseconds, then the total inefficiency can be calculated as x*y. I am looking for ways to consolidate these calls into a single one. Some of the third-party services I make calls to include Google Analytics and Google Ad Leads.

Here's an example of one of the calls I currently use:

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

Answer 1

Answer №1

Let's talk about the impact of inline async javascript on browser performance. While inline async javascript does not block the browser, immediately invoked functions do. You can simplify your code by avoiding nesting the window.onload callback within an immediately invoked function.

My suggestion is to create a single function that handles all actions triggered by browser events. For instance:

window.onload = function() {
    //perform all tasks here
}

If feasible based on your app's structure, place this script right before the closing </body> tag.

This approach could optimize your script execution. I also advise analyzing your app's behavior during script execution. A useful tool for this task is Chrome developer tools (timeline tab).

Answer 2

Let's talk about the impact of inline async javascript on browser performance. While inline async javascript does not block the browser, immediately invoked functions do. You can simplify your code by avoiding nesting the window.onload callback within an immediately invoked function.

My suggestion is to create a single function that handles all actions triggered by browser events. For instance:

window.onload = function() {
    //perform all tasks here
}

If feasible based on your app's structure, place this script right before the closing </body> tag.

This approach could optimize your script execution. I also advise analyzing your app's behavior during script execution. A useful tool for this task is Chrome developer tools (timeline tab).

Answer 3

Answer №2

The issue could potentially stem from adroll interfering with the window.onload event, which triggers after all page rendering is complete. To address this, consider utilizing jQuery (since you are likely calling other scripts already), obtain it from the Google URL to minimize downloads. Place it at the top of your HEAD tag for priority loading. For your code, incorporate a $(document).ready() function as shown below:

<!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>
    <!--// include other necessary library scripts here -->

... continue on with the HEAD and BODY content

    <!--// add any additional tracking code scripts like Google Analytics here-->

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

            //Include your onload code here, no longer obstructed

        });
    </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>

This method allows scripts to download in the background while enabling your code to execute unhindered. If the scripts indeed impede your code execution, introduce a timeout function to delay their loading briefly, such as:

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

By employing this approach, your code can proceed with its intended tasks promptly, while the adroll script executes asynchronously half a second later.

Answer 4

The issue could potentially stem from adroll interfering with the window.onload event, which triggers after all page rendering is complete. To address this, consider utilizing jQuery (since you are likely calling other scripts already), obtain it from the Google URL to minimize downloads. Place it at the top of your HEAD tag for priority loading. For your code, incorporate a $(document).ready() function as shown below:

<!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>
    <!--// include other necessary library scripts here -->

... continue on with the HEAD and BODY content

    <!--// add any additional tracking code scripts like Google Analytics here-->

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

            //Include your onload code here, no longer obstructed

        });
    </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>

This method allows scripts to download in the background while enabling your code to execute unhindered. If the scripts indeed impede your code execution, introduce a timeout function to delay their loading briefly, such as:

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

By employing this approach, your code can proceed with its intended tasks promptly, while the adroll script executes asynchronously half a second later.

Answer 5

Answer №3

In order to decrease the number of JavaScript requests, a helpful strategy is bundling on the server side. This approach consolidates all necessary JS files into a single request, streamlining the process.

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

Instead of multiple calls like above, consolidate them into one:

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

This method can also be made more versatile by allowing the passing of specific script filenames as parameters:

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

Depending on your server technology, there are different tools available such as Bundling and Minification in ASP.NET which streamline this process effortlessly here.

Answer 6

In order to decrease the number of JavaScript requests, a helpful strategy is bundling on the server side. This approach consolidates all necessary JS files into a single request, streamlining the process.

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

Instead of multiple calls like above, consolidate them into one:

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

This method can also be made more versatile by allowing the passing of specific script filenames as parameters:

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

Depending on your server technology, there are different tools available such as Bundling and Minification in ASP.NET which streamline this process effortlessly here.

Minimize the amount of external asynchronous calls made by the client

Answer №1

Answer №2

Answer №3

Similar questions

Unable to retrieve data from the specified location using axios in a Nuxt application

"Troubleshooting a callback problem in jQuery involving JavaScript and AJAX

What causes the disappearance of CSS styles when attempting to modify the className in react js?

Troubleshooting: Angular version 4.3 Interceptor malfunctioning

Tips on adding TypeScript annotations to an already existing global function

If the Request does not recognize the OAuth key, generate a fresh new key

Is it possible for a jQuery ajaxSuccess function to detect an AJAX event in a separate JavaScript file? If it is, what steps am I missing?

Building React Typescript Components with Froala Editor Plugins

Extracting Unprocessed Data with Node.js Express

Is there a way to capture the backdrop click event when clicking outside of an Angular UI Bootstrap modal?

`problem encountered when attempting to sanitize HTML through the npm package known as "sanitize-html"`

The PHP code encountered a syntax error due to an unexpected $EOF on the final empty line

Navigate through a list of data in JSON format

Organize an array based on its ratio

Examine the syntax of JavaScript

Tips for adding new items to a Masonry Image List using React MUI

What code can I use to prompt clients to refresh JavaScript files automatically?

FilterService of PrimeNg

Screening data entries

What impact does nesting components have on performance and rendering capabilities?