目录
JS script 标签的位置
- 在我们编写代码的时候,会在页面内使用
<script>
标签来写 JS,虽然理论上<script>
标签的位置放在哪里可以,但是还是有一点区别的。
1. 为什么大多数人 script 标签放在底部?
- 初学者在学习 JS 的时候看见很多 Demo 里面的
<script>
标签写在底部,但是却不是很清楚为什么,下面来解释一下: - 虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,还是放在底部是最佳的,因为如果 JS 执行出现错误了,最起码页面中的元素还能加载出来,因为 DOM 文档是按从上到下的顺序执行的。
2. DOM 对 script 标签有什么影响?
- DOM(Document Object Model,文档对象模型)是 HTML 和 XML 文档的编程接口。
- DOM 文档是自上而下的执行方式,但引入的 CSS 和 JavaScript 的顺序有所不同,CSS 引入执行加载时,程序仍然往下执行,而执行到
<script>
标签是则中断线程,待该 script 脚本执行结束之后程序才继续往下执行。
结论:
- 一般将 script 放在 body 代码之后是因为避免长时间执行 script 脚本而延迟阻塞。
- 有一些页面的效果的实现,需要预先动态地加载一些 JS 脚本,这些脚本应该放在 body 相关代码之前。
- 另一方面,不能将需要访问 DOM 元素的 JS 放在 body 相关代码之前,因为此时还没有开始生成 DOM,所以在 body 相关代码之前访问 DOM 元素的 JS 会出错或者无效。
3. script 标签在 body 闭合标签之后可以吗?
- 许多人认为只要放在底部了,无论是
</body>
标签之前还是在</body>
标签之后都是一样的。其实还是有差别的,因为从 HTML 2.0 起,放在</body>
标签之后就是不合标准的。之所以但是浏览器却不会报错,是因为如果在</body>
标签之后再出现<script>
或任何元素的开始标签, 都是parse error
,浏览器会忽略之前的</body>
,即视作仍旧在 body 内。所以实际效果和写在</body>
标签之前是没有区别的。 - 所以,只要是让浏览器做了多余的事都是不好的,虽然差别细微,但是还是应该按照标准来,即放在
</body>
标签之前”。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
...
<script>
...
</script>
</body>
</html>
- 知道了编写 JS 的 script 标签的推荐位置了,那么导入 JS 的 script 标签应该放在 head 中还是 body 中?
4. 导入 JS 的 script 标签放在哪?
- 规范是放在 head 中。不过放在其他位置也可以,主要是先加载和后加载的区别,而且各有各的好处。
- 放在 head 中:可以统一管理,方便维护;但是浏览器会先加载 JS 文件,如果 JS 文件过大,会造成页面在加载 JS 的时候无响应的时间过长,影响用户体验。
- 放在 body 中(或放在 body 后):浏览器会首先加载 JS 文件之前的元素,并显示到界面上,这样给用户的体验较好,但是不方答便维护。
- 建议:页面初始化需要用到的 JS 或者比较小版的 JS 文件,放在 head 中;比较特殊的用于页面指定位权置的 JS 文件放在 body 中对应位置;较大的、影响用户体验的 JS 文件放在 body 后。例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/... .min.js"></script>
</head>
<body>
...
<script>
...
</script>
</body>
</html>