Detailed explanation of asynchronous loading of JavaScript
php中世界最好的语言Original
2018-03-17 15:35:302246browse
This time I will bring you a detailed explanation of asynchronous loading of JavaScript, and what are the precautions for handling asynchronous loading of JavaScript. The following is a practical case, let's take a look.
The problem of synchronous loading
The default js is loaded synchronously. The "loading" here can be understood as parsing and execution rather than "downloading". In the latest version of the browser , the browser loads the resources requested by the code in a waterfall style instead of blocking, but the execution of js is always blocked. What problems does this cause? If my index page needs to load some js, but one of the requests does not get a response for a long time, it blocks the execution of the subsequent js code (synchronous loading), and the page rendering cannot continue (if the js introduction is in the head after the label).
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
this is a test
For example, the above code is saved as an index.html file. The main body of the page is a simple string, but after the code is executed, the page remains blank. Why? Because the requested js cannot be loaded for a long time (possibly due to Google being blocked, etc.), the execution of the subsequent code is blocked and the page cannot be rendered. Maybe you will suggest that if you put the js code before
, the page will be rendered first! Good method, we try to put js behind:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
The page is rendered instantly, "this is a test" also quickly appears in the foreground, the world seems to be calm, but:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
We simply added a piece of code based on the previous code, but "hello world" could not be output on the console for a long time. Obviously, the previous js request blocked the loading of the following code. We suddenly realized that changing the loading position of js can only change the page. Rendering, however, is of no use to loading js, js will still block.
Implementing js asynchronous loading
Our requirement seems to be very simple. It can output a string in the console while the page is loading. To put it more simply, it is to request the first While segmenting the js provided by Google, continue to execute the following js, which is to achieve asynchronous loading of js.
The most common way is to dynamically generate script tags:
<body>
this is a test
<script type="text/javascript">
~function() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
}();
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>
</body>
But there is still a problem. This loading method will prevent the onload event from being triggered before the loading is completed. Now many page codes Additional rendering work is performed during onload, so it will still block the initialization processing of some pages:
<body>
this is a test
<script type="text/javascript">
~function() {
// function async_load() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
// }
// window.addEventListener('load', async_load, false);
}();
window.onload = function() {
var txt = document.createTextNode(' hello world');
document.body.appendChild(txt);
};
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
</body>
For example, the above code cannot render "hello world" well, we only need to remove the comments That's it, let the js provided by Google start loading asynchronously on onload. This solves the problem of blocking the onload event from being triggered.
Added 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 of the page are 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 seems to be a better solution to this problem, but html5 provides a simpler method, the async attribute!
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' async='async'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>
async is a new attribute of html5. The async attribute specifies that once the script is available, it will be executed asynchronously (it will be executed as soon as it is downloaded).
It should be noted that the async attribute only applies to external scripts (only when using the src attribute)
The defer attribute is often mentioned together with async:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>
It seems that the implementation effect is similar , but is it really the same? Let's take a look at the definition of the defer attribute.
In the past, defer only supported IE hacks, but now the emergence of HTML5 has begun to fully support defer. The defer attribute specifies that the script will not be executed until the page has finished loading. The defer attribute only applies to external scripts (only when using the src attribute). ps: Defer supported by IE does not seem to be the case, because I have no interest in IE and will not delve into it. If you are interested, you can check the relevant information.
Since async and defer often appear together, let’s analyze them!
If there are no async and defer attributes (assigned to true, the same below), the browser will immediately execute the current js script and block subsequent scripts; if there is an async attribute, the process of loading and rendering subsequent document elements It will be done in parallel with the loading and execution of the current js (asynchronously); if there is a defer attribute, then the process of loading subsequent document elements will be done in parallel with the loading of script.js (asynchronously), but the execution of script.js will be done in all elements ( DOM) parsing is completed, but before the DOMContentLoaded event is fired.
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js' defer='defer'></script>
<script type="text/javascript" src='index.js' defer='defer'></script>
console.log('hello world');
The above is the detailed content of Detailed explanation of asynchronous loading of JavaScript. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
