Home > Developer > JavaScript
I. Location of the <script> label
The traditional approach is to put the <script> element in the
<! DOCTYPE html> <html> <head> <title> Example </ title> <script type = "text / javascript" src = "example.js"> </ script> </ head> <body> ! <!-Put content here-> </ body> </ html>
However, there is a problem with this approach, which includes all JavaScript files in the all javaseript code is downloaded, parsed, and executed before the content of the page is rendered (the browser encounters The content is only started when the <body> tag is present). For pages that require a lot of JavaScript code, this will undoubtedly cause the browser to have a noticeable delay in rendering the page, while the browser window in the delay period will be blank. To avoid this problem, modern Web applications typically place all Javaseript references behind the page content in the <body> element, as shown in the following example:
<! DOCTYPE html> <html> <head> <title> Example </ title> </ head> <body> <!-Put content here-> <script type = "text / javascript" src = "example.js"> </ script> </ body> </ html>
This way, the contents of the page are fully present in the browser before parsing the included JavaScript code. Users will also feel the speed of opening the page because of the shortened time of the browser window showing blank pages.
Second, delay script (defer property)
Applies to external script files only
HTML 4.01 defines the defer property for the <script> tag. The purpose of this property is to indicate that the script does not respond to the construction of the page when it executes. In other words, the script is deferred until the entire page has been parsed and then run. Therefore, setting the Defer property in the <script> element is equivalent to telling the browser to download it immediately, but defer execution .
<! DOCTYPE html> <html> <head> <title> Example </ title> <script type = "text / javascript" defer = "defer" src = "example1.js"> </ script> <script type = "text / javascript" defer = "defer" src = "example2.js"> </ script> </ head> <body> <!-Put content here-> </ body> </ html>
In this example, the <script> element is placed in the best to include only one deferred script .
IE4, Firefox 3.5, Safari 5, and Chrome are the first browsers to support defer properties. Other browsers will ignore this attribute, like the usual sample processing script. For this reason, placing the deferred script at the bottom of the page is still the best option .
Iii. Asynchronous script (Async attribute)
Applies to external script files only
HTML5 defines the async attribute for the <script> element. This property, like the Defer property, is used to change the behavior of the script and tell the browser to download the file immediately. Unlike defer, however, scripts marked as Async are not guaranteed to be executed in the order in which they are specified. For example:
<! DOCTYPE html> <html> <head> <title> Example </ title> <script type = "text / javascript" async src = "example1.js"> </ script> <script type = "text / javascript" async src = "example2.js"> </ script> </ head> <body> <!-Put content here-> </ body> </ html>
In the above code, the second script file may be executed before the first script file. Therefore, it is important to ensure that they are not dependent on each other. The purpose of specifying the async attribute is to not allow the page to wait for the script to download and execute, which asynchronously loads the other content of the page . For this reason, it is recommended that asynchronous scripts do not modify the DOM during loading.
Four, the need to pay attention to the small knowledge points
1. The <script> element with the SRC attribute should not contain additional JavaScript code between its <script> and </script> tags. If embedded code is included, only the external script file is downloaded and executed, and the embedded code is ignored.
2, regardless of the code, as long as there is no defer and async attributes, the browser will follow the <script> elements in the order in which they appear in the page to parse them sequentially. In other words, after the first <script> element contains the code parsing complete, the third <script> contains the code to be parsed, and then the third, fourth ...
JavaScript <script> Tag Location, deferred script (defer property) and asynchronous script (Async property)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
