This is the third day of my participation in Gwen Challenge

We know that the main way to insert JavaScript into HTML is to use

To get a better idea of how JavaScript loads in HTML, let’s start with a few basics.

The

  • async: optional. Indicates that you should start downloading the script immediately, but you cannot organize other page actions, such as downloading resources or waiting for other scripts to load. This applies only to external script files.

  • charset: optional. usesrcProperty to specify the code character set. This property is rarely used because most browsers don’t care about its value.

  • crossorigin: optional. Configure request CORS (Cross-domain Resource Sharing) Settings. CORS does not apply by default. Crossorigin =”anonymous” profile requests do not have to set credential flags.

  • defer: optional. Indicates that the script can be deferred until the document is fully parsed and displayed. This applies only to external script files. In IE7 and earlier, you can specify this property for inline scripts as well.

  • integrity: optional. Allows the peer to verify sub-resource Integrity (SRI) by receiving and specifying encrypted signatures. If the signature of the received resource does not match the signature specified by this property, an error is reported and the script is not executed. This property can be used to ensure that a Content Delivery Network (CDN) does not serve malicious Content.

  • language: scrap. Originally used to represent a scripting language (such as “JavaScript,” “JavaScript 1.2,” or “VBScript”) within a code block. Most browsers ignore this property and should never use it again.

  • src: optional. Represents an external file that contains the code to execute.

  • type: optional. Instead oflanguageRepresents the content type (also known as MIME type) of the scripting language in the code block. By convention, this value is always going to betext/javascript, even thoughtext/javascript 和 ecmascriptIt’s all abandoned. The MIME type of a JavaScript file is usuallyapplication/x-javascript, but totypeProperty this value is possibleThe script is ignored. Other values that are valid in non-IE browsers includeapplication/javascript 和 application/ecmascript. If this ismodule, the code is treated as an ES6 module, and only then can it appear in the codeimport 和 exportThe keyword.

External JavaScript loading and interpretation

usesrcProperty to resolve external resourcessrcProperty to send a GET request for the resource, presumably a JavaScript file. This initial request is not restricted by the browser’s same-origin policy, but the JavaScript returned and executed is. Of course, this request is still limited by the parent page HTTP/HTTPS protocol.

By default, the browser follows<script>The order in which they appear on the page explains them in turn, provided they are not useddefer 和 asyncProperties. The second<script>The code for the element must be first<script>The element cannot be explained until the code has been explained, the third must wait until the second has been explained, and so on.

The label position

In the past, all<scriptElements are placed on the page<head>Inside the tag, as shown in the following example:

<! DOCTYPE html> <html> <head> <title>Document</title> <script src="example11.js"></script> <script src="example12.js"></script> </head> <body> <! </body> </ HTML >Copy the code

The main purpose of this practice is to keep external CSS and JavaScript files in one place. However, put all the JavaScript files in<head>This means that all the JavaScript code must be downloaded, parsed, and interpreted before the page can be rendered (parsed in the browser)<body>Start rendering when the start TAB. For pages that require a lot of JavaScript, this causes a significant delay in page rendering, during which the browser window is completely blank. Without addressing this problem, modern Web applications typically place all JavaScript references in<body>Element, as shown in the following example:

<! DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <! --> <script SRC ="example11.js"></script> <script SRC ="example12.js"></script> </body> </ HTML >Copy the code

This way, the page renders the page completely before processing the JavaScript code. The user will feel that the page loads faster because the browser displays a blank page for less time.

Defer script execution (defer)

HTML 4.01<script>The element defines an element calleddeferProperties. This property indicates that the script will execute without changing the structure of the page. That is, the script is delayed until the entire page has been parsed. Therefore, in the<script>Set on elementdeferProperty, which tells the browser to download now but delay execution.

<! DOCTYPE html> <html> <head> <title>Document</title> <script defer src="example11.js"></script> <script defer src="example12.js"></script> </head> <body> <! </body> </ HTML >Copy the code

Although in this case<script>Element contained in the page<head>, but they will be parsed to the end in the browser</html>After the tag is executed. The HTML5 specification requires that scripts be executed in the order in which they appear, so the first deferred script is executed before the second deferred script, and both are executed before the DOMContentLoaded event. In practice, however, deferred scripts are not always executed sequentially or before the DOMContentLoaded event, so it is best to include only one such script.

Asynchronous script Execution (Async)

HTML 5 for<script>The element definesasyncProperties. In terms of changing the way scripts are handled,asyncProperties anddeferSimilar. Of course, both only work with external scripts, and both tell the browser to start downloading immediately. However, with thedeferThe difference is, let’s label itasyncScripts are not guaranteed to be executed in the order in which they appear. For example:

<! DOCTYPE html> <html> <head> <title>Document</title> <script async src="example11.js"></script> <script async src="example12.js"></script> </head> <body> <! </body> </ HTML >Copy the code

In this case, the second script might be executed before the first. Therefore, the point is that there is no dependency between them. Add to the scriptasyncThe purpose of the property is to tell the browser that it does not have to wait for the script to download and execute before loading the page, nor does it have to wait for that step of the script to download and execute before loading other scripts. Because of this, asynchronous scripts should not modify the DOM during loading.

Asynchronous scripts are guaranteed to be executed before the page load event, but may be executed after or before DOMContentLoaded.

Comparison of script loading times

Our previous picture 👆

  • Green Parser: Refers to HTML engine parsing, a parser that parses HTML text

  • Blue FETCH: fetching script resources

  • Red execution: Indicates the execution of a script

By default

By default, the loading and parsing of the script interrupts parsing of the HTML text.

This is because, since the JS parsing engine and the browser rendering engine are mutually exclusive, the GUI rendering thread will be suspended (the current state of the rendering will be saved) during the JS parsing. The render thread will resume only after JS execution has finished.

When using the defer attribute

usedeferThe loading process does not interrupt the parsing of THE HTML text, but obtains the script asynchronously. However, parsing of the script at this point will still wait until the parsing of the HTML text is complete.

When async property is used

useasyncAttribute, anddeferSimilarly, the script is loaded asynchronously. However, parsing execution of the script does not depend on the completion of parsing of the HTML document. Parsing of the HTML text is interrupted immediately after the script is loaded.

Load execution for type=”module”

As mentioned in the basics section above, usetype="module"Of the tag<script>Element, the code is treated as an ES6 module.

The script loads and executes logically by default anddeferThe rules for attribute tags are consistent when encountered<script>With the tag element, the script will load asynchronously from the module entry, possibly fork to load other referenced scripts, and finally return to the entry module, without breaking the parsing of the HTML text. Parsing execution of scripts is like addingdeferAttributes need to wait for the HTML text to finish parsing before starting.

If usetype="module"Is used at the same timeasyncProperty, parsing execution of the script takes place immediately after loading, and parsing execution interrupts parsing of THE HTML text.

conclusion

We know that<script>Tags are the most fundamental mechanism for using JavaScript in a web page, so understanding these load times and various properties will be important for future performance optimizations and scripting security.