What is asynchronous loading. Dual Script Template by John Resig

There is a solution: put the Java strings at the end html document(therefore, they will be loaded after the entire page has been drawn) and only after that the contents of the blocks will be displayed in in the right places. It is called . All serious projects today are trying to switch to new technology downloads. Moreover, it is absolutely easy.

There are several approaches. I'll start in order.

script src= type= "text/javascript" >

Asynchronous loading HTML5 script

The HTML5 standard supports the ability to load scripts asynchronously, which can significantly speed up total time receiving page. Just add async or defer .

< script async src= "http://www.site.ru/script.js" type= "text/javascript" >

< script defer src= "http://www.site.ru/script.js" type= "text/javascript" >

What is the difference between the async and defer attributes?

In both cases we get asynchronous loading of scripts. The only difference is the moment when the script starts executing. A script with the async attribute will be executed as soon as possible after it full load, but before the window object is loaded. If the defer attribute is used, the script will not violate the order of its execution in relation to other scripts and its execution will occur after the page is fully loaded and parsed, but before the DOMContentLoaded event of the document object.

Unfortunately, this mechanism does not currently work in all browsers (especially IE). Also won't work if there are document.write lines in the script.js file.

Asynchronous loading javascript script from Google

As all experts know, Google pays special attention to the loading speed of sites and reduces slow ones. search results. To help, Google has developed a special script with which you can make asynchronous javascript loading.

To use, simply replace

on

And connect the script file extsrc.js

It will turn out like this:

< script src= "http://extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Unfortunately, this method also does not work for files with document.write

Best working asynchronous javascript loading

A universal method for all browsers. Even works with document.write

In the place on the page where we need to actually display our element, create an empty div block:

< div id= "script_block" class = "script_block" >

At the very end of the page, before we insert a script for asynchronously loading files:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Here is any file or script that needs to be loaded.< script type= "text/javascript" >// move it to real position display document. getElementById("script_block" ) . appendChild(document. getElementById("script_ad" ) ) ;

// show document. getElementById("script_ad" ) . style. display = "block" ; In the oldest versions of IE (6 and below), asynchronous loading unfortunately does not work, but there are practically no such users anymore. All other browsers and services successfully use modern accelerated loading

web pages. Sometimes there is a need for step-by-step asynchronous data loading. And it could be anything. Starting from loading dependent directories (for example, country -> cities), ending with combining and processing information from various sources (for example, you use several different services , and each of them spends different time

for data generation).

And now a little simpler.

Problems with step-by-step asynchronous data loading in jQuery (ajax) If you need to connect several sequentially executed ajax requests in jQuery, then the most simple solution

will - make a call to the following function at the end of each success handler. This is not only quite simple, but also does not cause any problems. For example,

// First request $.ajax(url, ( ... success: function (result) ( // Some code... // Calling the next handler nextLoader(); ) )); And now, let’s say, in front of you stands a little more difficult task . For example, you need to run a function only after several asynchronous requests

(for example, getting baby bumps for the site). Of course, they can also be connected in a straight chain, as shown above. But, at the same time, the very essence of asynchrony begins to be lost. And it may also turn out that you are building a dependency between completely unrelated blocks. Agree that the TCI indicator and whois data are not entirely dependent on each other.

Nevertheless, despite all the subtleties, such a problem can be solved quite quickly, albeit a little clumsily. But what will you do if your task turns out to be even more difficult? When you need to distribute all operations and data loading into stages. For example, you are creating a dialogue template. The first stage will involve obtaining data for all fields (drop-down lists, groups of checkboxes, etc.). At the second stage, handlers for the created fields will be defined. And at the third stage, after “everything and everything” has been fully loaded, open access to and other interface elements (so that playful hands don’t create a lot of problems for you). Purely visually it might look like this:

Agree that organizing calls of all functions in one chain is not only not an easy task, but also not very pleasant. In addition, imagine that you need to add several fields and various handlers. What will happen? Your head will start to boil from searching for the right places “where to insert”. Here you already need some kind of mechanism that will allow you to arrange all launches in stages.

We are writing a script to organize step-by-step asynchronous loading in jQuery

The first step is to decide on the completely logical question “why not use ready-made libraries?. As such, there is no answer to this question. Everything very much depends on the task. Since the word “library” usually implies:

• lack of controllability of the code (you cannot change the internal logic of the library; and if you do this, then any change may come back to haunt you in the future)
• the need to study its basic properties and principles (usually this comes down to reading all possible documentation and a bunch of different tests)
• restrictions on jQuery versions (if complex kernel mechanisms are used, then binding to the version of jQuery libraries is possible)
• possible compatibility problems with other scripts (it is far from certain that the library will behave correctly with other libraries)
• excessive richness of functionality, and as a result the presence of “additional restrictions”
• etc.

Note: Do not be misled, because libraries have great amount pros. If you remember, jQuery is the same library. The article focuses on the risks and additional time investment that may be required of you.

That is why you must first decide on your tasks (number, frequency of occurrence), time (how much you are willing to spend on solving the problem), what you are willing to sacrifice (is the ability to quickly correct something important to you; is the size of libraries important; how much? restrictions suit you), preferences (for example, you basically do not use libraries). And only after you answer these questions, try to answer the question “why is it worth or not worth using ready-made libraries?”

If you answered yourself that you want to use libraries, then, as an option, you can download a ready-made test example with a ready-made script at the end of the article.

If you are full of enthusiasm and determination, then we will proceed to further actions.

Compiling requirements for the script

Before implementing anything, it is necessary to draw up small requirements so as not to get sidetracked during implementation. This results in a list like this:

• Connecting and setting up the script should happen automatically (you only need to connect the js file)
• Reconnecting the script file should not cause a crash
• Use only standard jQuery mechanisms
• The interface should be simple and understandable
• You can create several independent chains of stages
• You should always be able to quickly adjust the actions of the script
• The script should not impose complex restrictions on your code (maximum - the need to add a notification function about its execution)

Note: Always formulate requirements so that during implementation you do not start doing something that is not required at all. And be sure to include “so clear” points in it, so that these points continue to remain “so clear.”

Making a test project

The project structure will look like this:

• css - directory with styles
  • template.css - styles test project
• images - catalog with pictures (for visual effect)
  • ajax-loader.gif - loading image
• js - directory with scripts
  • jquery-ajax-stage.js - script for staged loading
• data.json - test data
• index.html - home page

Note: When creating the structure of the test project, try to bring it as close as possible to the structure of the real project. This will help you catch structure-related problems during development.

File with test data - data.json

This file is needed only to make sure that loading data via ajax will not affect it in any way. You can fill it with any json. For example, like this:

( data: "Lots of data")

Note: Try to make the test cases as similar as possible to the real ones. Even if the function calls are meaningless.

Style file - template.css

This file is needed only to display all the styles separately. Since styles have nothing to do with the development of the script itself. Yes, and it's just considered good practice. The styles themselves:

Left-table ( float: left; padding-right: 10px; ) .right-table ( float: left; padding-right: 10px; ) table.table-loader ( border-spacing: 0px; border-collapse: collapse; width : 300px; ) table.table-loader tr td ( padding: 5px; border: 1px solid #ccc; )

Script file for staged asynchronous loading - jquery-ajax-stage.js

The implementation of step-by-step asynchronous loading itself.

(function (parentObject) ( // Protection from redefinition if(parentObject.eventManager) return; // Define the object parentObject.eventManager = ( // Add a stage addStage: function (el, stageName) ( var elCount = $(el).length; // Check the parameters are correct if(elCount > 0 && !!stageName) ( // Such a stage already exists if (($(el).get(0).eventStages = $(el).get(0).eventStages || ())) return; // Define "nfg $(el).get( 0).eventStages = ( waiterCount: 0, // Counter of objects in the state of waiting for data onEvent: // in all functions to be called will be stored);

) ), // Remove the stage removeStage: function (el, stageName) ( var elCount = $(el).length; // Check the correctness of the parameters if(elCount > 0 && !!stageName) ( // Such a stage is found if (( $(el).get(0).eventStages = $(el).get(0).eventStages || ())) ( delete ($(el).get(0).eventStages = $(el).get (0).eventStages || ()); ($(el).get(0).eventStages = $(el).get(0).eventStages || ()) = null ) ) ), // Increase counter of executed functions for the stage addStageWaiter: function (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0).eventStages = $(el).get(0).eventStages || ()); // Check the correctness of the parameters if(elCount > 0 && !!stageName && stage) ( // Increase the load counter stage.waiterCount++; ) ), // Decrease the counter of executed functions for the stage // I.e. notify that the function has been executed removeStageWaiter: function (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0).eventStages = $(el).get(0).eventStages || ()); // Check the correctness of the parameters if(elCount > 0 && !!stageName && stage) ( // Decrease the load counter stage.waiterCount--; // Check the state of the stage this.checkStage(el, stageName); ) ), // Check the state of the stage checkStage: function (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0).eventStages = $(el).get(0) .eventStages || ()); // Check the correctness of the parameters if(elCount > 0 && !!stageName && stage) ( if (stage.waiterCount 0) ( // FIFO queue - first in, first out, as in the stage store. onEvent.shift() (); ) ) ) ), // Add a function call that will run when the entire onLoadStage stage is executed: function (el, stageName, funcHandler) ( var elCount = $(el).length, stage = ($ (el).get(0).eventStages = $(el).get(0).eventStages || ()); // Check the parameters are correct if(elCount > 0 && !!stageName && stage && typeof (funcHandler) = == "function") ( // Add a handler stage.onEvent.push(funcHandler);

// Check the stage state this.checkStage(el, stageName); ) ) ); ))(window); Test page - index.html

The test page turned out to be quite large (about 160 lines), so only part of the code will be given.

Full version

you can always find the file in the zip archive.

Let's define a function that will create test functions for the stages:

function getFakeLoader(storage, currStage, startDate, selector) ( return function () ( setTimeout(function () ( $.ajax("data.json?callback=?", ( contentType: "text/plain; charset=utf-8 ", dataType: "jsonp", jsonpCallback: function (result) ( $(selector).html("Time from start: " + ((+new Date() - startDate)/1000.0).toFixed(2) + " seconds "); // Write the loading time window.eventManager.removeStageWaiter(storage, currStage); // Decrease the counter ) )); ), Math.random() * (3000) + 1000 // Delay from 1 to 4 seconds); ; )

We create a function that will describe the logic for each test block:

function formTestFor(selector) ( $(selector + " .start-process").click(function () ( var startDate = new Date(); // For beauty, add pictures setLoaderImgs(selector); // Define the stages window.eventManager .addStage($(selector + " .table-loader"), "1"); window.eventManager.addStage($(selector + " .table-loader"), "2"); window.eventManager.addStage($ (selector + " .table-loader"), "3"); // Block the button until the end of the stage $(selector + " .start-process").attr("disabled", "disabled"); waiting for 3 loads per stage // In fact, these actions should occur in the places where the stage functions are launched window.eventManager.addStageWaiter($(selector + " .table-loader"), "1"); ($(selector + " .table-loader"), "3"); // Now let's create in reverse order(for clarity) loading functions // In fact, these actions should occur in places where the functions are defined window.eventManager.onLoadStage($(selector + " .table-loader"), "2", getFakeLoader($(selector + " .table- loader"), "3", startDate, selector + " .row-3 .td-1")); ... window.eventManager.onLoadStage($(selector + " .table-loader"), "1", getFakeLoader($(selector + " .table-loader"), "2", startDate, selector + " .row -2 .td-3"));// Add a regular one
Loading is complete"); )); // After the third stage is completed, unlock the onLoadStage button window.eventManager.onLoadStage($(selector + " .table-loader"), "3", function () ( // Unlock the button $(selector + " .start-process").attr("disabled", null )); // Now run the first stage functions getFakeLoader($(selector + " .table-loader"), "1", startDate, selector + " .row-1 .td-1")(); getFakeLoader($(selector + " .table-loader"), "1", startDate, selector + " .row-1 .td-2")(); getFakeLoader($(selector + " .table-loader"), "1", startDate, selector + " .row-1 .td-3")(); // Observe... ));

Now we collect all the files into the project and move on to initial testing and demonstration.

Let's see the result

Open the index.html file in the browser. The following interface should be displayed:

As you can see, we have two buttons available for launching parallel processes. After clicking on them, the download for the corresponding blocks should begin. And it will look something like this:

After both processes have completed their execution, look at the time and make sure that the stages occurred in the right order:

Having completed the initial testing, we move on to checking the requirements:

• Connecting and setting up the script should happen automatically (you only need to connect the js file) - Yes
• Reconnecting the script file should not cause a crash - Yes
• Use only standard jQuery mechanisms - Yes (only selector functionality was used)
• The interface should be simple and understandable - Yes
• You can create several independent chains of stages - Yes
• You should always be able to quickly correct the actions of the script - Yes (the script is written quite simply; the main part consists of checking the input data)
• The script should not impose complex restrictions on your code (maximum - the need to add a function to notify about its completion) - Yes (inside the getFakeLoader functions, only the function to notify about its completion is called)

Now you have a simple and clear script that will help you quickly organize the step-by-step execution of functions, be it loading data or simply performing operations.

Modern web pages are heavily loaded with javascript files. This leads to slower loading and subsequent display of the page. In the worst conditions, the site visitor has to wait up to 30 seconds.

We speed up loading html pages

Modern use of JavaScript

Modern web pages are heavily loaded with javascript files. This leads to slower loading and subsequent display of the page. In the worst conditions (slow Internet connection, many javascript files) a site visitor has to wait up to 30 seconds.

HTML is designed in such a way that a web page loads by synchronously (line by line) loading in turn all the elements included in the HTML code.

There is a way out: place the Javascript lines at the end of the html document (therefore, they will be loaded after the entire page is drawn) and only after that the contents of the blocks will be displayed in the right places. It is called .

All serious projects today are trying to switch to new loading technology as quickly as possible. Moreover, it is absolutely easy.

There are several approaches. I'll start in order.

< script src= "//www.site.ru/script.js" type= "text/javascript" >

The HTML5 standard supports the ability to load scripts asynchronously, which can significantly speed up the overall page retrieval time. Just add async or defer .

< script async src= "//www.site.ru/script.js" type= "text/javascript" >

< script defer src= "//www.site.ru/script.js" type= "text/javascript" >

What is the difference between the async and defer attributes?

In both cases we get asynchronous loading of scripts. The only difference is the moment when the script starts executing. A script with the async attribute will be executed as soon as possible after it is fully loaded, but before the window object is loaded. If the defer attribute is used, the script will not violate the order of its execution in relation to other scripts and its execution will occur after the page is fully loaded and parsed, but before the DOMContentLoaded event of the document object.

Unfortunately, this mechanism does not currently work in all browsers (especially IE). Also won't work if there are document.write lines in the script.js file.

As all experts know, Google pays special attention to the loading speed of sites and lowers slow ones in search results. To help, Google has developed a special script with which you can make asynchronous javascript loading.

To use, simply replace

on

And connect the script file extsrc.js

It will turn out like this:

< script src= "//extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Unfortunately, this method also does not work for files with document.write

A universal method for all browsers. Even works with document.write

In the place on the page where we need to actually display our element, create an empty div block:

< div id= "script_block" class = "script_block" >

At the very end of the page, before we insert a script for asynchronously loading files:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Here is any file or script that needs to be loaded.< script type= "text/javascript" >// move it to the actual display position document. getElementById("script_block" ) . appendChild(document. getElementById("script_ad" ) ) ;

// show document. getElementById("script_ad" ) . style. display = "block" ;

In the oldest versions of IE (6 and below), asynchronous loading unfortunately does not work, but there are practically no such users anymore. All other browsers and services successfully use modern accelerated loading of web pages. A way to speed up the loading of website web pages by optimizing Java script files and html code

pages. Javascript represents a certain problem

for modern resources. They are simply overloaded with them and this leads to slow loading and, therefore, poor display quality. If your network connection is slow, which is typical for mobile communications And, then loading slows down significantly, causing justifiable irritation.

When the browser reads the html code, it displays the result sequentially. Those. each line follows each other, but at the place where javascript is installed, a stop occurs - those who use this language to write resources have certainly encountered this problem.

The solution to the problem is asynchronous loading. Just place the javascript at the end of the page's html code. This will lead to the fact that the loading of “java” will be delayed in time, ensuring the correct display of the page and a quick start for users of the resource. Most serious resources are switching to asynchronous loading, trying to retain their audience and introduce useful innovations.

Let's look at several ways to optimize javascript loading.

This javascript file is loaded as follows:

< script src= type= "text/javascript" >

HTML5 prudently took care of the problem of loading a page with “java”. It has the ability to set asynchronous loading of the script, which increases the speed of displaying the resource significantly. To do this, add the async or defer parameters to the html code, as indicated below:

< script async src= "//www.адрес_сайта/script.js" type= "text/javascript" >

< script defer src= "//www.адрес_сайта/script.js" type= "text/javascript" >

What is the difference between async and defer attributes?

Both options work with asynchronous javascript loading. The difference lies in the display time and the start of the script execution.

The async attribute will run the script immediately after it is fully loaded, but will skip loading window.

When you set the defer attribute in the page code, javascript will queue between other scripts without disturbing their execution order. It will start working only after the page is fully loaded, but will miss the DOMContentLoaded(document object) event.

However, these attributes do not work in some modern browsers. For example, Internet Explorer does not support the async and defer attributes. And document.write lines won't help anything in script.js files

Special script from Google for asynchronous javascript loading

Google has become a leader in developing technologies that allow website pages to load in record time. In addition, the rating search engine Google demotes sites with poor performance, so pay attention to a special creak from Google webmasters designed to load javascript asynchronously.

To apply this script, just replace

on

Then we include the script file extsrc.js

We get the following code:

< script src= "//extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Unfortunately, this method also does not work for files with document.write

This method is suitable for all browsers without exception and even works with document.write

In the html code of the page we create an empty div block:

And at the end of the html code, before , we insert a script for asynchronous loading:

Here is any file or script that needs to be loaded.

// move it to the actual display position document.getElementById("script_block").appendChild(document.getElementById("script_ad")); // show document.getElementById("script_ad").style.display = "block"; Please note that in versions of IE lower than 6, inclusive, this download does not work. But I'm not sure that such users remain - they are a minority. Other browsers and services use this optimization for javascript what is reflected

in the best possible way on the speed of loading resources. Greetings, friends! Do you know that loading javascript is one of the most

bottlenecks

• in site performance? Today my main task is to explain what a script is and how it affects the speed and performance of the site.
• A browser that loads a script tag stops rendering the page until the script has loaded and executed. The page is blocked and the browser does not respond to user actions for a couple of seconds. The delay time depends on several factors:
• configurations,

Internet connection speed, file size and others... For this reason, the Google PageSpeed ​​Insights website speed analyzer recommends removing from the top of the page

JavaScript code , blocking its display. A good practice is to place scripts at the bottom of the site, for example before the closing tag or set up asynchronous loading. If the script code affects the display of the top part of the site, do not place it in

separate file

, and embed directly in HTML.

JS can change the site's content and even redirect to a different URL. In this case, connecting the script at the end of the document will lead to the effect of “twitching” the page, loading new or changing existing elements at the top. Applying the async and defer attributes to the script tag Let's figure out what asynchronous and deferred are

1	< src = "example.js" >

JavaScript work and what is the fundamental difference between the async and defer attributes. But first, let's look at the sequence of processing a document with the usual inclusion of a script tag. IN clear example:

I will use the following
symbols
— page processing

— script loading

Parsing the HTML code is interrupted while the script is loading and executing, after which it continues. There is a delay in displaying the web page.

defer attribute

The defer attribute allows the browser to start downloading js files in parallel without stopping further processing of the page. They are executed after full analysis object model document (from the English Document Object Model, abbreviated DOM), while the browser guarantees consistency based on the order in which the files are connected.

1	< defer src = "example.js" >

async attribute

Support for the async attribute appeared in HTML5, it allows the browser to download js files in parallel and execute them immediately after downloading, without waiting for the rest of the page to be processed.

1	< async src = "example.js" >

Processing sequence diagram:

This is an asynchronous download. This attribute is recommended for use in scripts that do not have a significant impact on the display of the document. These include statistics collection counters ( Google Analytics, Yandex Metrica), advertising network codes ( Advertising network Yandex, Google AdSense), buttons social networks and so on.

Website loading speed is one of the ranking factors in Google.

Asynchronous JavaScript connectivity reduces page load times by eliminating latency. Along with this, I recommend compressing and merging js files into one, for example, using the . Users like fast sites 😎