原文网址：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. 页面初始化需要用到的 JS
2. 页面效果实现类的JS
3. 比较小的 JS 文件

body内（body标签的最后边）

优点：
1. 不会影响页面的加载
缺点：
1. 对于一些高度依赖于JS的网页，就会显得慢了。
  1. 解决方案：一边解析页面，一边下载JS。
2. 不太方便维护
适合将<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放置位置的区别

简介

script标签可以放置的位置

放置位置

实例

猜你喜欢