JavaScript 文件延迟和异步加载:defer和async属性

延迟执行 JavaScript 文件

<script>标签中有一个布尔属性值 defer 设置该属性能够将JavaScript文件延迟到页面解析完成后在运行
示例:

// index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" defer src="test.js"></script>
</head>
<body>
    <h1>网页标题</h1>
    <p>正文内容</p>
</body>
</html>

注意:defer 属性适用于外部 JavaScript 文件,不适用于 <script>签包含的 JavaScript 脚本。

异步加载JavaScript文件

在默认情况下,网页都是同步加载外部 JavaScript 文件的,如果 JavaScript 文件比较大, 就会影响后面 HTML 代码的解析。上面提到一种解决方法:就是最后加载 JavaScript 文件。

现在可以为 <script> 标签设置 async 属性,让浏览器异步加载 JavaScript 文件,即在加载 JavaScript 文件时,浏览器不会暂停,而是继续解析。这样能节省时间,提升响应速度。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" async src="test.js"></script>
</head>
<body>
    <h1>网页标题</h1>
    <p>正文内容</p>
</body>
</html>

async 是 HTML5 新增的布尔型属性,通过设置 async 属性,就不用考虑 <script> 标签的放置位置,用户可以根据习惯继续把很多大型 JavaScript 库文件放在 <head> 标签内。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容