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

Show only the present y-coordinate in the ToolTip of a chart.js

The element is implicitly classified as an 'any' type due to the index expression not being of type 'number'

Issue: Module 'serialize-javascript' not found despite being present in the 'node_modules' directory after executing npm start command in ReactJS project

Using Angular with a hapi.js server that supports JSONP data requests

The structure of NodeJS Express API calls revolves around handling asynchronous events

Is there a way to mount or unmount a React component by pressing a single key?

Leveraging reframe.js to enhance the functionality of HTML5 video playback

Selecting and Uploading Multiple Files in Internet Explorer (less than version 9)

Can you explain the significance of this code snippet 'true <=> false'?

Reposition HTML elements using JavaScript

The issue of infinite rendering caused by useState and how to effectively resolve it

Ways to refresh a container

Retrieving package information from NPM using a web browser

Utilizing D3 to fetch geographic data in the form of a TopoJSON file for U.S. counties

Alert: Ajax encountered an issue with the auto-refreshing field

Why isn't CSS showing up in preview mode on the network tab?

Tips for managing the ever-evolving language state in expressJS

Struggling to delete a specific item by its ID from MongoDB within a Next.js application

Tips for passing down props or all the properties of an object to create a dynamic component

What is the best way to determine which option is most suitable: types, classes, or function types in TypeScript for