script标签在HTML放置位置的区别

素颜马尾好姑娘i 2023-09-29 16:16 15阅读 0赞

原文网址：[script标签在HTML放置位置的区别\_IT利刃出鞘的博客-CSDN博客][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.  可以统一管理，方便维护。
2.  缺点：
    
    1.  如果JS比较大，加载页面时会有很明显的卡顿。
        
        1.  原因：浏览器读取HTML文件时，如果遇到<script> 标签则会停下来进行下载、读取、执行，会阻塞解析其他HTML数据的工作。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS。
        2.  解决方案：使用async或者defer特性。见：[解决HTML的script标签在head中无法访问DOM的问题\_IT利刃出鞘的博客-CSDN博客][HTML_script_head_DOM_IT_-CSDN]
    2.  <script>引入的JS程序不能操作DOM
        
        1.  原因：此时还没有读取DOM数据
        2.  实例：见：[解决HTML的script标签在head中无法访问DOM的问题\_IT利刃出鞘的博客-CSDN博客][HTML_script_head_DOM_IT_-CSDN]
3.  适合将<script>放到head内的场景：
    
    1.  页面初始化需要用到的 JS
    2.  页面效果实现类的JS
    3.  比较小的 JS 文件

**body内（body标签的最后边）**

1.  优点：
    
    1.  **不会影响页面的加载**
2.  缺点：
    
    1.  对于一些高度依赖于JS的网页，就会显得慢了。
        
        1.  解决方案：一边解析页面，一边下载JS。
    2.  不太方便维护
3.  适合将<script>放到body内的场景：
    
    1.  需要访问DOM的JS
    2.  比较大的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>

[script_HTML_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125126269
[HTML_script_head_DOM_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125156554