Traditionally, loading Javascript files uses the tag. <br>Like the following: <br><script type="text/javascript" src="example.js"> The tag is very convenient, as long as Add a web page and the browser will read it and run it. However, it has some serious flaws. <br> (1) Strict reading order. Since the browser reads Javascript files in the order in which <script> appears in the web page, and then runs them immediately, when multiple files depend on each other, the file with the least dependency must be placed first, and the one with the greatest dependency must be placed first. The file must be placed at the end, otherwise the code will report an error. <br> (2) Performance issues. The browser uses "synchronous mode" to load the <script> tag, which means that the page will be "blocked", waiting for the JavaScript file to be loaded before running the subsequent HTML code. When there are multiple <script> tags, the browser cannot read them at the same time. It must read one before reading the other, which causes the reading time to be greatly extended and the page response to be slow. <br>In order to solve these problems, you can use the DOM method to dynamically load Javascript files. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"> function loadScript(url){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); }</pre><div class="contentsignin">Copy after login</div></div><p>The principle of this is that the browser instantly creates a <script> tag, and then reads the Javascript file "asynchronously". This will not cause page blocking, but it will cause another problem: the Javascript file loaded in this way is not in the original DOM structure, so the callback functions specified in the DOM-ready (DOMContentLoaded) event and window.onload event are invalid for it. . </p> <p>For more js loading related articles on using DOM method to dynamically load Javascript files, please pay attention to the PHP Chinese website! </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
