Using JavaScript in HTML

Objective:

The main way to insert Javascrip into an HTML page is to use the <script> tag. This paper mainly discusses the rendering mechanism of <script> tags in HTML pages.

Points:

The embedded JS code is invalid when the 1.script tag is introduced into the file with the src of the outer chain.

2. As long as the defer and async attributes do not exist, the browser parses the script elements sequentially ( file download and code execution ) in the order in which they appear in the page. In other words, after the first SCRIPT element contains the code parsing complete, the second script contains the code to be parsed, and then the third, fourth ... This way, the rendering of the page is blocked .

3.defer: Delay script. The script is deferred until the entire page has been parsed and then run. Equivalent to telling the browser to download immediately, but deferred execution . This method does not block rendering of the page. The H5 specification requires scripts to execute in the order in which they appear, so the first deferred script takes precedence over the second deferred script execution, which precedes the domcontentloaded thing. In reality, the sequence may not necessarily be guaranteed. PS: With the latest Google browser tested, can guarantee the order.

4.async: Asynchronous Script. Similar to defer, tells the browser to download the file immediately , but delays execution and does not block page rendering. However, the order of execution cannot be guaranteed . All, there is no guaranteed order between script files with async attributes, and there should be no JS code that contains interdependencies.

Summarize:

A little thought:

1, general to ensure that the introduction of JS file sequence is its execution sequence, so async cautious use.

2, script parsing includes: JS file download and execution. The download does not block page rendering, and execution is bound to block page rendering (to be researched ).

3, if defer in modern browsers (especially mobile), can follow the H5 specification in order to execute. If you can add the defer attribute to each script tag, the advantages are as follows: 1.js file parsing does not block rendering of HTML pages. 2.js file parsing can be divided into two steps, the first step to download the JS file, compared with the non-defer attribute of multiple script tags, add the defer can be asynchronous parallel download script file (to be researched ); the second part of parsing JS file, in order to execute the JS code synchronously. In order to achieve the fastest JS parsing speed (Download JS file efficiency increase).

The above summary is some thinking, some places to be tested and verified by the demo.

Using JavaScript in HTML