js loading uses DOM method to dynamically load Javascript files_javascript skills

Traditionally, loading Javascript files uses the <script> tag. <BR>Like the following: <BR><script type="text/javascript" src="example.js"></script>

<script>The tag is very Convenient, as long as you add the web page, the browser will read 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. <BR><div class="codetitle"><span><a style="max-width:90%" data="78858" class="copybut" id="copybut78858" onclick="doCopy('code78858')"><U>Copy code The code is as follows: <div class="codebody" id="code78858"> <BR> function loadScript(url){ <BR> var script = document.createElement("script"); <BR> script.type = "text/javascript"; <BR> script.src = url; <BR> document.body.appendChild(script); <BR>} <BR> <BR>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. .</script>