Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

Discussion on the position of javascript tags in the page_Basic knowledge

WBOY
Release： 2016-05-16 17:37:23
Original
1032 people have browsed it

In the process of making web pages, we often write code similar to the following:
[html]

Copy code The code is as follows:



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&lt ;/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>






Example HTML Page







The actual effect of the above two writing methods is the same. However, not all browsers support the defer attribute, and some browsers ignore this attribute and do not delay the execution of the script.
Related labels：
Location Label
source：php.cn
Previous article：Method to obtain mouse click position coordinates based on JavaScript_Basic knowledge Next article：JS adds and deletes a group of text boxes and verifies the input information to determine its correctness_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
SQL Count() also requires 0 I have only one table and I want to count each entry of a tag that starts with 0. Now I tr...
From 2024-04-06 19:48:53
0
1
449
In mobile view, how can I close this navigation bar when the user clicks on the link? When the user clicks a link to browse the website, the navigation bar does not close? I've...
From 2024-04-06 19:23:03
0
1
411
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...
From 2024-04-06 17:46:54
0
1
355
CSS styles not applied to site I'm making a website using Bootstrap5 but the index.css properties are not being applied t...
From 2024-04-06 17:12:23
0
1
336
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template