<script>标签位置的影响

最新推荐文章于 2024-09-26 19:57:04 发布

tjuking

最新推荐文章于 2024-09-26 19:57:04 发布

阅读量231

点赞数

分类专栏： JavaScript 文章标签： Javascript script 延迟加载标签位置 body ViewUI

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

通常情况下，我们会把<script>标签放置于<head>标签内，如下所示：

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<script type=”text/javascript” src=”文件1.js”></script>
<script type=”text/javascript” src=”文件2.js”></script>
<script type=”text/javascript” src=”文件n.js”></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

这样做的好处就是把所有的外部链接（Javascript、CSS等）放在一起便于管理和维护。不过，如果引入较多的Javascript文件则会导致一些问题。

我们知道，head标签是前于body标签处理的，在head标签的所有文件加载完前是没法进行body内容的展示和渲染。如果js代码较多、文件较大或者数量较多很有可能导致用户需要较长的等待时间才能看到页面的结构和内容，这对于良好的用户体验设计而言是非常不好的。

此时可以将这样的script标签放置于body标签的底部，如下所示：

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<!-- 页面内容 -->
<script type=”text/javascript” src=”文件1.js”></script>
<script type=”text/javascript” src=”文件2.js”></script>
<script type=”text/javascript” src=”文件n.js”></script>
</body>
</html>

当然我们应该认识到，对于Javascript文件的延迟加载，有可能导致在页面展示后Javascript未加载而无法交互或发生Javascript错误。