script标签使用位置以及推迟执行脚本
作者：坚果
公众号：""
华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。
过去，所有<script>标签都被放在页面的<head>标签内，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="sample1.js"></script>
<script src="sample2.js"></script>
</head>
<body>
<!--页面内容-->
</body>
</html>这种做法的主要目的是把外部的CSS和JavaScript文件都集中放到一起。不过，把所有JavaScript文件都放在<head>里，也就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。为解决这个问题，现代Web应用程序通常将所有JavaScript引用放在<body>标签中的页面内容后面，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--页面内容-->
<script src="sample1.js"></script>
<script src="sample2.js"></script>
</body>
</html>这样一来，页面会在处理JavaScript代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。
推迟执行脚本
HTML 4.01为<script>标签定义了一个叫defer的属性。这个属性表示脚本在执行的时候不会改变页面的结构。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>标签上设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="sample1.js" defer></script>
<script src="sample2.js" defer></script>
</head>
<body>
<!--页面内容-->
</body>
</html>虽然这个例子中的<script>标签包含在页面的<head>中，但它们会在浏览器解析到结束的</html>标签后才会执行。HTML5规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在DOMContentLoaded事件之前执行。不过在实际当中，推迟执行的脚本不一定总会按顺序执行或者在DOMContentLoaded事件之前执行，因此最好只包含一个这样的脚本。
defer使用注意点说明：
defer属性只对外部脚本文件才有效。这是HTML5中明确规定的，因此支持HTML5的浏览器会忽略行内脚本的defer属性。IE4~7展示出的都是旧的行为，IE8及更高版本则支持HTML5定义的行为。对defer属性的支持是从IE4、Firefox 3.5、Safari 5和Chrome 7开始的。其他所有浏览器则会忽略这个属性，按照通常的做法来处理脚本。考虑到这一点，还是把要推迟执行的脚本放在页面底部比较好。另外，对于XHTML文档，指定defer属性时应该写成defer=“defer”。
参考文章
《JavaScript高级程序设计》
- 点赞
- 收藏
- 关注作者
评论（0）