JavaScript 笔记 - <script> 标签的位置

最新推荐文章于 2025-06-09 18:11:11 发布

原创最新推荐文章于 2025-06-09 18:11:11 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #script标签 #script标签的位

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了JavaScript文件的不同加载位置对网页加载速度的影响。介绍了传统做法中将所有<script>标签置于<head>部分可能导致的延迟问题，并推荐了现代做法——将<script>标签置于<body>标签末尾以优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 笔记 - < script> 标签的位置

按照传统的做法，所有< script>元素都应该放在页面的元素中，例如：

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

这种做法的目的就是把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方。可是，在文档的元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到标签时才开始呈现内容）。对于那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引用放在元素中页面内容的后面，如下例所示：

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

这样，在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。