table of Contents
JS script tag location
- When we write code, it will be used within a page
<script>tab to write JS, although in theory,<script>where the position of the label on the can, but still a little different.
1. Why do most people put script tags at the bottom?
- Many beginners see Demo inside at the time of learning JS
<script>label written on the bottom, but it is not quite clear why, let's explain: - Although it is theoretically possible to put it anywhere, for front-end page optimization, it is best to put it at the bottom, because if there is an error in the execution of JS, at least the elements in the page can still be loaded because the DOM document It is executed in order from top to bottom .
2. How does DOM affect script tags?
- DOM (Document Object Model) is a programming interface for HTML and XML documents.
- DOM document is a top-down implementation, but the order of the introduction of CSS and JavaScript are different, the introduction of the implementation of CSS is loaded, the program is still down implementation, and execution to the
<script>label is then interrupted thread, until the end of the script script execution After that, the program continues to execute.
in conclusion:
- The script is generally placed after the body code because it avoids long-term execution of the script script and delays blocking .
- There are some pages to achieve the effect, you need to dynamically load some JS scripts in advance, these scripts should be placed before the body related code .
- On the other hand, you can't put the JS that needs to access the DOM element before the body related code. Because the DOM has not been generated at this time, the JS that accesses the DOM element before the body related code will be wrong or invalid .
3. Is the script tag allowed after the body closing tag?
- Many people believe that as long as at the bottom, whether it is
</body>before or on the label</body>after the label is the same. In fact, there are still differences, because starting from HTML 2.0, placed</body>after the label is sub-standard. But the reason why the browser but does not complain, because if in</body>again after the tag<script>or the start tag of any element areparse error, the browser will ignore before</body>, that is regarded as still in the body. Therefore, the actual results and written</body>before the label is no difference . - So, as long as let the browser do the extra things are bad, though nuanced, but still should be in accordance with standards that put
</body>before the label " For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
...
<script>
...
</script>
</body>
</html>
- Knowing the recommended location for writing script tags for JS, should the script tags for imported JS be placed in the head or body?
4. Where are the script tags imported into JS?
- The specification is placed in the head . However, it can also be placed in other locations, mainly due to the difference between loading first and loading later, and each has its own benefits.
- Put it in the head: it can be managed in a unified manner, which is convenient for maintenance; but the browser will load the JS file first. If the JS file is too large, it will cause the page to become unresponsive for too long when loading JS, which will affect the user experience.
- Put in the body (or after the body): The browser will first load the element before the JS file and display it on the interface, which gives the user a better experience, but it is not easy to maintain.
- Suggestions: JS files used for page initialization or relatively small versions of JS files should be placed in the head ; the more specific JS files used for page position setting should be placed in the corresponding position in the body ; larger ones that affect the user experience The JS file is placed after the body . E.g:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/... .min.js"></script>
</head>
<body>
...
<script>
...
</script>
</body>
</html>
Original link: https://qwert.blog.csdn.net/article/details/105570568
