In the process of making web pages, we often write code similar to the following:
[html]
Example HTML Page
< ;body>
Example HTML Page
< ;/body>
By convention, all <script> elements should be placed within the <head> element of the page. Please note: No matter how many external js files are referenced, the browser will parse them in sequence according to the order in which the <script> elements 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, and then the third and fourth... <br>The purpose of this approach is to place references to all external files (including CSS files and JavaScript files) in the same place. However, including all JavaScript files in the <head> element of the document means that all JavaScript code must be downloaded, parsed, and executed before the content of the page can begin to be rendered (the browser will wait until it encounters the <body> tag Only then will the content begin to be displayed). For pages that require a lot of JavaScript code, this will undoubtedly cause the browser to experience a noticeable delay in rendering the page, and the browser window during the delay will be blank. To avoid this problem, modern web applications generally place all JavaScript references in the <body> element, after the content of the page, as shown below: <br>[html] <br><div class="codetitle">
<span> <a style="CURSOR: pointer" data="92026" class="copybut" id="copybut92026" onclick="doCopy('code92026')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code92026"> <br><html> <br><head> <br><title>Example HTML Page< ;/title> <br></head> <br><body> <br><!--Put content here--> <br><script type="text/javascript" src=" example1.js"></script>
< ;/html>
Example HTML Page
This way, before parsing the included JavaScript code , the content of the page will be fully rendered in the browser. Users will also feel that the speed of opening the page is accelerated because the time the browser window displays a blank page is shortened.
Alternatively, you can use the defer attribute of the <script> tag to indicate that the script will not affect the structure of the page when executed, that is, the script will be delayed until the entire page is parsed before running. The code is as follows: <br>[html] <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="70000" class="copybut" id="copybut70000" onclick="doCopy('code70000')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code70000"> <br><html> <br><head> <br><title>Example HTML Page</title> <br><script type="text/javascript" defer="defer" src ="example1.js"></script>
< /head>
