Summary of using JS methods in HTML

This time I will bring you a summary of the methods of using JS in HTML. What are the precautions for using JS in HTML? Here are practical cases, let’s take a look.

Preface JavaScript is the browser’s built-in scripting language. When a JavaScript script is embedded in a web page and the browser loads the web page, it will execute the script to operate the browser and achieve various dynamic effects

Methods for embedding JavaScript code into web pages 1, Element directly embeds code function sayHello() { alert("hello!"); } 2, Element loads external script Tag related Attribute type attribute ## The label defaults to JavaScript code, embedded javascript When scripting, the type attribute can be omitted

If the value of the type attribute is not recognized by the browser, the code will not be executed, so it can be used in ## To embed any text content in the # tag, just add a type attribute that the browser does not recognize. The browser will not execute or display its content, but the node still exists. In the DOM, you can use the text attribute of the node to read its content

defer attribute The running process of the defer attribute:

The browser starts to parse the HTML web page

During the parsing process, # with the defer attribute is found ## Element The browser continues to parse the HTML web page and downloads in parallel

The external script loaded by the element The browser has completed parsing the HTML web page, and now goes back to execute the downloaded script

Note: Load resources asynchronously

Execute scripts in sequence

External scripts loaded using defer do not You should use the

document .write method async attribute

async attribute running process: The browser starts to parse the HTML web page

During the parsing process, the

tag with the async attribute # is found ##The browser continues to parse the HTML web page and downloads the external script in the

tag in parallel Script download completed , the browser pauses parsing the HTML web page and starts executing the downloaded script

After the script is executed, the browser resumes parsing the HTML web page

Note:

Asynchronous loading of resources

will not execute JS in order. Whoever downloads it first will be executed first.

External scripts loaded using async should not use the document.write method

Async and defer attribute induction

can solve the "blocking effect" all load resources asynchronously, but the order of execution is different

If the scripts If there is no dependency, use the async attribute. If there is a dependency between scripts, use the defer attribute

Dynamicly generate script

['a.js', 'b.js'].forEach(function(src) { var script = document.createElement('script'); script.src = src; script.async = false; document.head.appendChild(script); }); No Will block page rendering Async is set to false to ensure that b.js is executed after a.js

is loaded after this code The script file will wait until b.ja is executed before executing it

Summary of relevant knowledge points

included in The JavaScript code inside the tag will be parsed from top to next No matter which way the code is embedded, as long as the defer and async attributes do not exist, the browser will process the tags in the order they appear on the page. Analysis Advantages of loading external scripts: maintainability, cacheability, adaptability to the future

Reasons for placing it at the bottom: 1. To avoid the "blocking effect". 2. Avoid calling DOM node before the DOM structure is generated, resulting in an error

I believe you have mastered the method after reading the case in this article, please pay attention for more exciting information Other related articles on php Chinese website!