script元素之async和defer属性

杨万里2003

于 2022-12-05 21:05:07 发布

阅读量317

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/yangwanli2010/article/details/128192813

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

普通script元素

不带async和defer的script元素为按顺序下载，并执行完，才能继续解析后面的元素。
下载完a.js，并执行完。
下载完b.js，并执行完。。。
才会渲染后面的dom。

<!DOCTYPE html>
<html>
<head>
    <script src="./js/a.js"></script>
    <script src="./js/b.js"></script>
    <script src="./js/c.js"></script>
</head>
<body>
	<div>ddd</div>		
</body>
</html>

如果有的js文件太大，执行又太慢，这样就导致页面会延迟显示部分dom，这部分在js之后的dom。影响页面效果。

async：异步加载

<!DOCTYPE html>
<html>
<head>
    <script async src="./js/a.js"></script>
	<script async src="./js/b.js"></script>
    <script src="./js/c.js"></script>
</head>
<body>
	<div>ddd</div>		
</body>
</html>

如果a.js和b.js 加上async属性，表示次脚本异步加载，告诉浏览器不用等待其加载，先去执行后面的内容。a b会在后台下载，并执行。相当于完全独立的js，可能在任何时候下载完执行。适合那种和页面显示关系不大的js。比如百度统计脚本等。
并且a和b也是相互独立的，谁先下载，谁先执行都有可能。

defer：延迟加载

<!DOCTYPE html>
<html>
<head>
    <script async src="./js/a.js"></script>
	<script defer src="./js/b.js"></script>
    <script defer src="./js/c.js"></script>
</head>
<body>
	<div>ddd</div>		
</body>
</html>

如果存在defer属性，表示此脚本延迟加载。
上面页面中，a b c都是异步下载，不会等待，继续往下执行。等到各自下载完后，a.js随时会执行，但是b和c要等到dom解析完成，并且b和c都下载完成，再按顺序执行，先执行b，再执行c。
在dom解析完之后按顺序执行defer属性的脚本，在DOMContentLoaded事件之前。
适合需要操作dom，但是加载速度慢的脚本。
注意：

动态创建的脚本默认是 async 异步的。如果要修改，需要显示定义 async = false;

let script = document.createElement('script');
script.src = "a.js";
script.async = false;
document.head.appendChild(script);

async和defer只对外部脚本有效。

杨万里2003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
script元素之async和defer属性

script元素的 async 和 defer 属性分析。
复制链接

扫一扫

专栏目录

script元素之async和defer属性

普通script元素

async：异步加载

defer：延迟加载

“相关推荐”对你有帮助么？