标签的位置
按照传统的做法，所有<script>元素都应该放在页面的<head>元素中
<!DOCTYPE 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>
这种做法的目的就是把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方.可是,在文档的<head>元素中包含所有 JavaScript 文件,意味着必须等到全部 JavaScript代码都被下载,解析和执行完成以后,才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）.对于
那些需要很多 JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白.
defer
HTML 4.01 为<script>标签定义了 defer属性.这个属性的用途是表明脚本在执行时不会影响页面的构造.也就是说,脚本会被延迟到整个页面都解析完毕后再运行.因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行.
<!DOCTYPE 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>之后再执行
- 延迟脚本有先后顺序,脚本会依次执行
- 延迟脚本会先于
DOMContentLoaded事件执行 - 延迟脚本只适用于外部脚本
上面是HTML5的规范, 但是然并卵,实际情况是延迟脚本不一定依次执行,也不会在DOMContentLoaded之前执行
async
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
异步脚本与延迟脚本类似,唯一不同点是异步脚本的加载顺序是随机的,互相不依赖的.上面例子中的脚本可能第一个先加载也可能第二个先加载.另外异步脚本一定会在load事件之前执行.
小结
- 在包含外部 JavaScript 文件时,必须将 src 属性设置为指向相应文件的 URL.而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件.
- 所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析.在不使用 defer和async属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码.
- 由于浏览器会先解析完不使用 defer 属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>标签前面。
- 使用 defer 属性可以让脚本在文档完全呈现之后再执行.延迟脚本总是按照指定它们的顺序执行.
- 使用 async 属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现.不能保证异步脚本按照它们在页面中出现的顺序执行。
网友评论