Script is used to embed or reference executable scripts.

The optional attributes are as follows.

  • type: used to define scripting languagesMIMETypes, includingtext/javascript,text/ecmascript,application/javascript,application/ecmascript, pay attention toHTML5Can be omittedtype, its default value istext/javascript
  • src: specifies the external script to referenceURL
  • defer: Applies only to external chains and provides for script delay
  • async: Applies only to external chains, which require asynchronous script execution
  • integrity: used to verify that the obtained resource is tampered with, if the received resource signature andintegrityThe specified signature does not match, the page displays an error, and the script does not execute
  • crossorigin: Browser enabledCROSAccess check, property values includeanonymous,use-credentialsIf no attribute value or invalid attribute value is specified, the browser uses it by defaultanonymous

defer/async

Script tags block parsing of the page. To avoid DOM parsing blocking, script tags are usually placed at the bottom of the HTML page.

Defer does not execute the code until the page has been parsed (that is, the DOM has been loaded but the image resources have not yet been downloaded). The download of the script with the defer attribute will be loaded in parallel with the subsequent parsing of the document elements, and the script will be deferred until the DOM has been parsed and executed before DOMContentLoaded.

The download of a script with async property is loaded in parallel with subsequent parsing of document elements, but is executed as soon as the script download is complete. DOM parsing is blocked if the DOM is not loaded.

The only difference is the timing of script execution. Defer is deferred until DOM parsing is complete and DOMContentLoaded, while Async is executed immediately after downloading. If the DOM is not loaded, parsing will be blocked.

See JS and CSS for more blocking questions on whether or not DOM rendering and parsing is blocked.

integrity

The following tells the browser to use the SHA256 signature algorithm to calculate the downloaded JS file and compare it with the signature provided by Integrity. If the two are inconsistent, the script will not be executed.

Integrity is generally used for static files on the CDN. While a CDN is useful, a CDN can be hijacked, resulting in downloaded files that have been tampered with, and integrity allows you to check if a file is the original. The domain name used by local files is the same domain name as the web page, so there is no problem with hijacking, so local static files do not need to use this attribute.

<script 
    integrity="sha256-PJJrxrJLzT6CCz1jDfQXTRWOO9zmemDQbmLtSlFQluc=" 
    src="https://xxx.xxx.js">
</script>
Copy the code

crossorigin

When a cross-domain script is introduced on a web page, if there is an error in the script, the error information cannot be obtained due to browser restrictions (the root cause is protocol regulations). When you try window.onerror locally to catch a Script error, cross-domain Script errors only return Script error.

HTML5 allows local Access to cross-domain script error information, but two conditions must be met. First, the cross-domain script server must Allow the current domain name to Access the error information through the Access-Control-allow-Origin header. Second, the script tag must indicate that the address specified by the SRC attribute is a cross-domain address, that is, the crossorigin attribute, refer to MDN for details.