众所周知，在HTML中如果你想使用JavaScript脚本，那么必定少不了<script></script>标签，<script></script>此标签是在HTML中插入JavaScript脚本的主要方法。
我们当然熟悉它的使用，就像这样：
<script type=”text/javascript”>
function fn() {
console.log("this is javascript");
}
</script>
还可以是这样：
<script type=”text/javascript” src=”js/index.js”></script>
当然我们要说的并不是如何再HTML中引入JavaScript，而是我们或许未曾深究过的scirpt标签属性。或许你从未关注过它的一些属性，只知道type和src，更甚至从来都是用编辑器自动生成，那么下面要说的可能对你有很大的帮助。
script标签有6个属性：async、charset、defer、language、src、type.
-
charset：这个属性表示你引入的外部文件的字符集，但是如今的浏览器会自动忽略它，你可以放心的把这个属性抛之脑后，永远的尘封起来。
-
language：此属性已废弃，就像charset一样，你完全可以忽略它。
-
src：引入外部脚本文件的地址。
-
type：此属性在某种意义上可以说是language的替代属性，它的值其实多种多样，但是目前来看，”text/javascript”是最好也是最简单的值。如果你的编辑器不会自动生成此属性，而且你又不喜欢每次都输入，这完全没有问题，它的默认属性就是”text/javascript”。
提示：重点来了，大家集中精神。
async：表示立刻执行下载脚本，但是并不会让页面中其他操作等待。此属性只能对外部引入文件生效。
比如这样：
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="index.js" async="async"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
// index.js
var o = document.getElementById('example');
console.log(o);
打开html文件并且打开控制台，你会发现，它并没有像往常一样报错，而是显示出了DOM节点：
console控制台
是不是很神奇，对，async就如你看到的这样，在脚本加载的同时，DOM也在渲染，并不会让script标签下面的DOM节点等待而造成阻塞。
defer：表示脚本可以在DOM全部渲染完毕并且显示之后执行，也同样只是使用于外部引入文件。
此属性和你这样做没有什么区别：
<!--html… -->
</body>
</html>
<script></script>
意思就是在head里面引入了带defer属性脚本文件相当于放在了html标签后执行，当然如果他们有两个或者多个呢？
<!--html… -->
<script type=”text/javascript” src=”test1.js” defer=”defer”></script>
<script type=”text/javascript” src=”test2.js” defer=”defer”></script>
<!--html… -->
没错，他们会按顺序执行。
虽然加上此属性的script标签和放在底部的script标签表现相同，但是我们把它放在底部仍然是最好的选择。
OK，对于script标签的属性暂且说到这里，如果你意犹未尽，想对defer和async进行深入的研究，你可以点击这里。
如果你在阅读的过程中发现错误，请在下方评论中指出！
生活
网友评论