接下来我将为你详细讲解一下“HTML5 script元素async、defer异步加载使用介绍”的完整攻略。
什么是async、defer异步加载
在HTML5中，script标签有两个属性可以实现异步加载，分别是async和defer。
async属性定义了脚本是否异步加载，异步加载的脚本不会阻塞页面的加载。
defer属性定义了脚本是否延迟执行，延迟执行的脚本会在HTML文档解析完成后，DOMContentLoaded事件触发前执行。defer属性只对外部脚本有效，内部脚本会自动当做defer处理。
async和defer的用法
async使用示例
<!DOCTYPE html>
<html>
<head>
<title>async示例</title>
</head>
<body>
<h1>async示例</h1>
<script src="./js/script1.js" async></script>
<script src="./js/script2.js" async></script>
<script>
console.log('这里是内联脚本');
</script>
<p>这里是网页主体内容</p>
</body>
</html>
上述代码会异步加载script1.js和script2.js脚本，因此这两个脚本不会阻塞页面的加载。另外，内联脚本会在DOM构建完成后执行。
defer使用示例
<!DOCTYPE html>
<html>
<head>
<title>defer示例</title>
<script src="./js/script1.js" defer></script>
<script src="./js/script2.js" defer></script>
</head>
<body>
<h1>defer示例</h1>
<p>这里是网页主体内容</p>
</body>
</html>
上述代码会延迟执行script1.js和script2.js脚本，因此这两个脚本会在HTML文档解析完成后，在DOMContentLoaded事件触发前被执行。
总结
async属性让脚本异步执行，不会阻塞页面的渲染和用户的交互。defer属性也能实现异步加载，但是会在DOMContentLoaded事件触发前执行。我们可以根据实际需求选择使用。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML5 script元素async、defer异步加载使用介绍 - Python技术站
微信扫一扫 
支付宝扫一扫 