Preface
Usually when HTML files are loaded in browsers, browsers will load HTML files according to the order in which < script> elements appear on the page. Once the number of js files loaded is too large, it will lead to page display delay. So, in the process of development, how to solve it?
First, let's take a look at the traditional js loading practices. All < script > elements should be placed in the < head > elements of the page, for example:
<!DOCTYPE html> <html> <head> <title>HTML js application</title> <meta http-equiv="Content-type" content="text/html; charset=GBK"></meta> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </head> <body> <div> <h1>Study hard and make progress every day</h1> </div> </body> </html>
The purpose of this approach is to place references to external files (including CSS files and js files) in the same place. However, the inclusion of all JavaScript files in the <head> element of the document means that the content of the page cannot be rendered until all JavaScript code has been downloaded, parsed and executed. For pages that require a lot of JavaScript files, there will undoubtedly be page display delays. Here are three solutions:
Solution 1. Change the location of labels
We put the < script > element reference in the < body > element, as shown in the following example:
<!DOCTYPE html> <html> <head> <title>HTML js application</title> <meta http-equiv="Content-type" content="text/html; charset=GBK"></meta> </head> <body> <div> <h1>Study hard and make progress every day</h1> </div> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </body> </html>
In this way, the content of the page will be fully displayed in the browser before parsing the included JavaScript code. Users will also feel that the opening speed of the browser window is accelerated because of the shorter time it takes to display blank pages.
Solution 2. Add deferred scripts to <script> elements
HTML 4.01 defines defer attributes for <script> tags. The purpose of this property is to indicate that the script will not affect the structure of the page when it is executed. That is to say, the script will be delayed until the entire page is parsed. Therefore, setting the defer attribute in the < script > element is equivalent to telling the browser to download immediately, but to delay execution. Look at the code implementation below:
<!DOCTYPE html> <html> <head> <title>HTML js application</title> <meta http-equiv="Content-type" content="text/html; charset=GBK"></meta> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body> <div> <h1>Study hard and make progress every day</h1> </div> </body> </html>
In this example, although we put the < script > element in the < head > element of the document, the script it contains will be delayed until the browser encounters the </html> tag. The HTML5 specification requires scripts to load in the order in which they appear.
Solution 3. Adding asynchronous scripts to <script> elements
HTML5 defines the async attribute for the < script > element, which is similar to the defer attribute and is used to change the behavior of processing scripts. Similar to defer, async applies only to external script files and tells browsers to download files immediately. But unlike defer, scripts marked as async do not guarantee that they will be executed in the order specified. The following examples are given:
Note: In XHTML documents, set the async attribute to async="async".<!DOCTYPE html> <html> <head> <title>HTML js application</title> <meta http-equiv="Content-type" content="text/html; charset=GBK"></meta> <script type="text/javascript" async src="example1.js"></script> <script type="text/javascript" async src="example2.js"></script> </head> <body> <div> <h1>Study hard and make progress every day</h1> </div> </body> </html>
For reprinting, please indicate the source:
http://blog.csdn.net/mark_yangs/article/details/75246717
This article is from: Yang Haibo's Blog