原文网址：script标签在HTML放置位置的区别_IT利刃出鞘的博客-CSDN博客
简介
说明
本文介绍script标签在HTML放置位置的区别。
JavaScript引擎读取代码的顺序
JS引擎读DOM文档的顺序是从上往下的，也就是说：HTML文件的读取顺序是<head>=> <body>=> <body>后方。
JS引擎读取引入的 CSS 和 JavaScript 的顺序不同。读取引入的CSS 时，程序仍然往下执行；读取 <script> 标签时则中断线程，等该 script 脚本执行结束之后程序才继续执行。
HTML布局原则
一般原则是：CSS在前面，DOM在中间，script在最后面（遵循先解析再渲染再执行script这个顺序）。
CSS：应当写在 head 中，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。
script标签可以放置的位置
编写HTML时，要使用 <script> 标签来写 JS，<script> 标签的位置是有区别的。
放置位置
head内
- 优点： 1. 可以统一管理，方便维护。
- 缺点： 1. 如果JS比较大，加载页面时会有很明显的卡顿。 1. 原因：浏览器读取HTML文件时，如果遇到<script> 标签则会停下来进行下载、读取、执行，会阻塞解析其他HTML数据的工作。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS。2. 解决方案：使用async或者defer特性。见：解决HTML的script标签在head中无法访问DOM的问题_IT利刃出鞘的博客-CSDN博客2. <script>引入的JS程序不能操作DOM 1. 原因：此时还没有读取DOM数据2. 实例：见：解决HTML的script标签在head中无法访问DOM的问题_IT利刃出鞘的博客-CSDN博客
- 适合将<script>放到head内的场景： 1. 页面初始化需要用到的 JS2. 页面效果实现类的JS3. 比较小的 JS 文件
body内（body标签的最后边）
- 优点： 1. 不会影响页面的加载
- 缺点： 1. 对于一些高度依赖于JS的网页，就会显得慢了。 1. 解决方案：一边解析页面，一边下载JS。2. 不太方便维护
- 适合将<script>放到body内的场景： 1. 需要访问DOM的JS2. 比较大的JS
body后
从 HTML 2.0 起，放在 </body> 标签之后就是不合标准的。之所以浏览器不会报错，是因为如果在 </body> 标签之后再出现 <script> 或任何元素的开始标签， 都是 parse error，浏览器会忽略之前的 </body>，即视作仍旧在 body 内。所以实际效果和写在 </body> 标签之前是没有区别的。
实例
位置1：head内
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<div class="container">
这是div元素
</div>
</body>
</html>
位置2：body内（body标签的最后边）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<div class="container">
这是div元素
</div>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
位置3：body后边
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<div class="container">
这是div元素
</div>
</body>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</html>
本文转载自: https://blog.csdn.net/feiying0canglang/article/details/125126269
版权归原作者 IT利刃出鞘 所有， 如有侵权，请联系我们删除。
版权归原作者 IT利刃出鞘 所有， 如有侵权，请联系我们删除。