Detailed explanation of examples of synchronous loading and asynchronous loading in JavaScript

Synchronous loading

The most commonly used form of synchronous loading is this:

<script src="http://yourdomain.com/script.js"></script>

Synchronous mode, also known as blocking mode, will prevent the browser from subsequent processing. Stops subsequent parsing, thus stopping subsequent file loading (such as images), rendering, and code execution. The reason why js needs to be executed synchronously is because there may be behaviors such as outputting document content, modifying dom, redirection, etc. in js, so synchronous execution is safe by default. The general recommendation in the past was to place 3f1c4e4b6b16bbbd69b2ee476dc4f83a at the end of the page before 36cc49f0c466276486e50c850b7e4956 to minimize this blocking behavior and allow the page to be displayed first. To put it simply: the loaded network timeline is a waterfall model, while the asynchronously loaded timeline is a concurrency model.

Common asynchronous loading

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})();

Asynchronous loading is also called non-blocking. The browser will continue to process subsequent pages while downloading and executing js. This method is to use js to create a script element within the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag on the page and insert it into the document. This achieves non-blocking downloading of js code. The async attribute is a new asynchronous support in HTML5. See the explanation below. It is good to add it (it will not affect it if you don’t add it). This method is called the Script DOM Element method and does not require the same origin of js. The method of wrapping js code in an anonymous function and executing it immediately is to protect the variable name from leaking to the outside world. This is a very common method, especially commonly used in js libraries.
For example, Google Analytics and Google+ Badge both use this asynchronous loading code:

(function() { 
var ga = document.createElement('script'); 
ga.type = 'text/javascript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 
(function() 
{var po = document.createElement("script"); 
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(po, s); 
})();

However, this loading method will prevent the onload event from being triggered before the loading is completed, and now the code of many pages Additional rendering work must be performed during onload, so the initialization processing of some pages will still be blocked.

Asynchronous loading at onload

(function() { 
function async_load(){ 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
} 
if (window.attachEvent) 
window.attachEvent('onload', async_load); 
else 
window.addEventListener('load', async_load, false); 
})();

This is similar to the previous method, but the key is that it does not start asynchronous loading of js immediately, but only starts asynchronous loading at onload. This solves the problem of blocking the onload event from being triggered.
Supplement: DOMContentLoaded and OnLoad events
DOMContentLoaded: The page (document) has been parsed and the dom elements in the page are available. However, the images and subframes referenced in the page may not have been loaded yet.
OnLoad: All resources on the page have been loaded (including images). The browser's loading progress stops at this point.
These two time points divide the page loading timeline into three stages.

The above is the detailed content of Detailed explanation of examples of synchronous loading and asynchronous loading in JavaScript. For more information, please follow other related articles on the PHP Chinese website!