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 effectsMethods for embedding JavaScript code into web pages1,<code>Element directly embeds code</code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><script type="text/javascript"> function sayHello() { alert("hello!"); } Copy after login 2, <code>Element loads external script</code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><script type="text/javascript" src="example.js">Copy after login <code>Tag related</code>Attribute<a href="http://www.php.cn/wiki/169.html" target="_blank"></a> </h2>type attribute<h3 style="text-align: left;"></h3> <ul class=" list-paddingleft-2"> <li>##<script><p style="text-align: left;">The label defaults to JavaScript code, embedded javascript When scripting, the type attribute can be omitted<code></code></p> </li>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<li><script>## 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 <p style="text-align: left;"><script><code> node still exists. In the DOM, you can use the text attribute of the </code><script><code> node to read its content </code><code></code></p>defer attribute</li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><script src="a.js" defer> Copy after login 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 ##</li>Element<li> <p style="text-align: left;"><code></code>The browser continues to parse the HTML web page and downloads in parallel </p><script></li>The external script loaded by the element<li><p style="text-align: left;"><code></code>The browser has completed parsing the HTML web page, and now goes back to execute the downloaded script</p></li> <li> <p style="text-align: left;"></p>Note:</li> </ol> <p style="text-align: left;"><strong></strong>Load resources asynchronously</p> <ul class=" list-paddingleft-2"> <li><p style="text-align: left;">Execute scripts in sequence</p></li> <li> <p style="text-align: left;">External scripts loaded using defer do not You should use the </p>document</li>.write method<li> <p style="text-align: left;"><a href="http://www.php.cn/code/658.html" target="_blank"></a>async attribute</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><script src="a.js" async> Copy after login async attribute running process: The browser starts to parse the HTML web page During the parsing process, the </li> tag with the async attribute<li># is found <p style="text-align: left;"><code>##The browser continues to parse the HTML web page and downloads the external script in the </code><script></p> tag in parallel </li> <li><p style="text-align: left;"><code>Script download completed , the browser pauses parsing the HTML web page and starts executing the downloaded script</code></p></li> <li>After the script is executed, the browser resumes parsing the HTML web page<p style="text-align: left;"></p> </li> <li><p style="text-align: left;"> Note: </p></li> </ol> <p style="text-align: left;"><strong>Asynchronous loading of resources</strong></p> <ul class=" list-paddingleft-2"> <li> will not execute JS in order. Whoever downloads it first will be executed first. <p style="text-align: left;"></p> </li> <li>External scripts loaded using async should not use the document.write method<p style="text-align: left;"></p> </li> <li>Async and defer attribute induction<p style="text-align: left;"></p> </li> </ul> can solve the "blocking effect"<h3 style="text-align: left;"></h3> <ul class=" list-paddingleft-2"> <li>all load resources asynchronously, but the order of execution is different<p style="text-align: left;"></p> </li> <li>If the scripts If there is no dependency, use the async attribute. If there is a dependency between scripts, use the defer attribute<p style="text-align: left;"></p> </li> <li>Dynamicly generate script<p style="text-align: left;"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>['a.js', 'b.js'].forEach(function(src) { var script = document.createElement('script'); script.src = src; script.async = false; document.head.appendChild(script); });</pre><div class="contentsignin">Copy after login</div></div> </li> </ul>No Will block page rendering<h2 style="text-align: left;"></h2> <ul class=" list-paddingleft-2"> <li>Async is set to false to ensure that b.js is executed after a.js<p style="text-align: left;"></p> </li> <li> is loaded after this code The script file will wait until b.ja is executed before executing it<p style="text-align: left;"></p> </li> <li>Summary of relevant knowledge points<p style="text-align: left;"></p> </li> </ul>included in<h2 style="text-align: left;"><script> ;</h2>The JavaScript code inside the tag will be parsed from top to next<ol class=" list-paddingleft-2"></li><li><p style="text-align: left;">No matter which way the code is embedded, as long as the defer and async attributes do not exist, the browser will process the <code><Script> tags in the order they appear on the page. Analysis</h2> <li><p style="text-align: left;">Advantages of loading external scripts: maintainability, cacheability, adaptability to the future</p></li> <li><p style="text-align: left;"><code><script></code> Reasons for placing it at the bottom: 1. To avoid the "blocking effect". 2. Avoid calling <a href="http://www.php.cn/code/6401.html" target="_blank">DOM node</a> before the DOM structure is generated, resulting in an error </p></li> <p> 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! </p> <p>Recommended reading:</p> <p><a href="http://www.php.cn/js-tutorial-398251.html" target="_blank">How to deal with MySQL database access denial</a><br></p> <p><a href="http://www.php.cn/js-tutorial-398247.html" target="_blank">How to implement hexagonal button special effects</a><br></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
