本文探讨JavaScript脚本在HTML页面中的放置位置对加载性能的影响。传统做法是将script置于head，但这会阻塞页面渲染。现代Web应用推荐将脚本放在body末尾以优化用户体验，或使用defer属性实现非阻塞加载。文章对比了不同放置方式及defer属性的浏览器兼容性，帮助开发者选择最佳脚本加载策略。
JavaScript脚本的传统放置位置与解析顺序
在网页开发过程中，我们常遇到如下代码结构：
[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>
<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>按照常规惯例，所有的<script>元素通常被放置在页面的<head>元素内部。需要注意的是，无论引用了多少个外部JS文件，浏览器都会严格遵循<script>元素在文档中出现的先后顺序，依次进行解析。这意味着，只有当第一个<script>元素内的代码解析执行完毕后，浏览器才会开始解析第二个<script>，接着是第三个、第四个，依此类推。
将脚本移至body末尾的优化方案
这种将CSS和JavaScript引用统一放置在<head>中的做法，旨在集中管理外部资源。然而，其副作用是：在文档的<head>中包含所有JavaScript文件，意味着浏览器必须等待所有JS代码下载、解析并执行完毕后，才能开始渲染页面内容（即遇到<body>标签时）。对于依赖大量JavaScript的页面，这会导致明显的页面呈现延迟，用户在等待期间看到的是一片空白窗口。为解决此问题，现代Web应用程序通常将所有JavaScript引用移至<body>元素内部，并置于页面内容之后，结构如下：
[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>
<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代码之前，会先完整呈现页面的HTML内容。这缩短了用户看到空白页面的时间，从而让用户感知到页面打开速度有所提升。
利用defer属性实现非阻塞加载
另一种方案是使用<script>标签的defer属性，该属性指示脚本在执行时不会阻塞页面构造，即脚本会被延迟到整个HTML文档解析完毕后再执行，示例代码如下：
[html]
代码如下:
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>上述两种写法在理想情况下的实际效果一致。但需注意，并非所有浏览器都支持defer属性，部分旧版浏览器可能会忽略该属性，导致脚本无法按预期延迟执行。