1. The main method of inserting js into an html page is to use the <script> element
2. HTML4.01 defines the following 6 attributes for <script>: [language has been discarded, and the other 5 attributes are optional]
async means that the script should be downloaded immediately , but should not hinder other operations on the page, such as downloading other resources or waiting to load other scripts, only valid for external files [The purpose of specifying the async attribute is to prevent the page from waiting for the script to be downloaded and executed, thereby asynchronously Load other content on the page, for this reason, it is recommended that asynchronous scripts do not modify the DOM during loading]
charset indicates the character set of the code specified by the src attribute. Since most browsers ignore its value, this attribute is rarely used
defer [download immediately, delay execution] means that the script can be delayed until the document is completely parsed and displayed before execution. Only valid for external files
language is obsolete
src indicates the external file containing the code to be executed
type can be seen as an alternative attribute of language; indicates the content type (also known as MIME type) of the scripting language used to write the code. Default value: text/javascript
3. There are two ways to use the script element:
3.1. Embed js code directly in the page
3.2, including external js files
4. The src attribute of the <script> element can also include js files from external domains. It should be noted that you must be more careful when accessing js files on servers that you cannot control. If you encounter a malicious program unfortunately , they could replace the code in that file at any time, so if you want to include code from a different domain, either you are the owner of that domain, or the owner of that domain is trustworthy
5. As long as there are no defer and async attributes, the browser will parse the <script> elements in the order in which they appear on the page. In other words, after the code contained in the first <script> element is parsed, the code contained in the second <script> will be parsed, then the third, the fourth....
6. Label position
Traditionally, all <script> elements are placed in the <head> element. The purpose of this is to put references to all external files (including css files and js files) in the same place, but the <head> of the document Including all <script> elements in the element means that all js codes must be downloaded, parsed and executed before they can start rendering the content (browsers start rendering content when they encounter the <body> tag ). For those pages that require a lot of js code, this will undoubtedly cause a significant delay when the browser renders the page, and the browser window during the delay will be blank. In order to avoid this problem, modern web applications generally put all js references behind the page content in the <body> element.
7. Embed code and external files
Although there is no problem with embedding js code in html, it is generally believed that the best way is to use external files to contain js code as much as possible, but there is no hard and fast rule that external files must be used. Advantages of using external files:
Maintainability , put all js files in one folder, it is much easier to maintain,
Cacheable , the browser can cache all external js files linked according to specific settings, that is, if two pages use the same file, then this file only needs to be downloaded once. So the end result is the ability to load pages faster
8. Summary: the difference and applicable occasions between asnyc and defer
With the asnyc attribute added, the browser secretly downloads the js script file while rendering the page, and immediately executes the js inside after downloading, and the page rendering is interrupted at this time
In the previous html4 specification, there was a defer attribute. With this attribute, the browser also secretly downloads the js file, but after downloading, it waits for the browser to render all the html tags before executing the js file
