script标签

属性

async: 表示应该立即下载脚本, 但不影响页面中其他的操作.该属性对于内联脚本无作用(即没有src属性的脚本)
defer: 脚本可以被延迟到文档完全被解析和显示之后, 触发DOMContentLoaded事件前执行(相当于告诉浏览器立即下载, 但是延迟执行).该属性对于内联脚本无作用(即没有src属性的脚本)
crossorigin
charset
language
src: 既可以加载本域的也可以加载其他域的(jsonp就是利用src的这一特性来实现跨域的)
type

执行顺序

只要不存在async和defer属性,浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析, 并且是阻塞的,即页面会暂停其他处理

标签位置

如果放在<head>元素中, 会出现下面的问题:
必须等到全部的javascript代码被下载, 解析, 执行完成后, 才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容).对于那些需要很多javascript代码的页面, 将会导致浏览器在呈现页面时会出现明显的延迟, 而延迟期间的浏览器窗口中将是一片空白;

建议是放在<body>标签后面, 这样在解析包含javascript代码之前, 页面的内容将完全呈现在浏览器中, 而用户也会因为浏览器窗口显示空白页的时候缩短而感到打开页面的时间变快了

延迟脚本

script 的defer属性是表明脚本在执行时不会影响页面的构造, 也就是说, 脚本会延迟到整个页面都解析完毕后再运行, 相当于告诉浏览器立即下载, 但是延迟执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script defer="defer" src="example1.js"></script>
    <script defer="defer" src="example2.js"></script>
</head>
<body>
    <!-- 这里放内容 -->
</body>
</html>

上面这个例子, 虽然把script放在了<head>元素中, 但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行;

defer属性有浏览器的兼容问题can I use defer, 所以最好还是把延迟脚本当在底部

异步脚本

与defer相同时, async同样也会改变处理脚本的行为, 且只适用于外部脚本, 并告诉浏览器立即下载文件, 与defer不同的是, 标记为async的脚本并不保证按照指定它们的顺序执行;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <!-- 这里放内容 -->
</body>
</html>

上面代码中第二个脚本可能会在第一个脚本之前执行, 因此, 要确保两者之前互不依赖. 指定async属性的目的是不让页面等待两个脚本下载和执行, 从而异步加载页面其他内容;
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行;

async属性有浏览器的兼容问题can I use async, 所以最好还是把延迟脚本当在底部

script标签

属性

执行顺序

标签位置

延迟脚本

异步脚本

推荐阅读更多精彩内容