JavaScript延迟加载之async与defer的应用

更新时间：2022年09月02日 08:59:14 作者：快乐的蜜蜂

这篇文章主要介绍了JavaScript延迟加载之async与defer的应用场景与使用区别的介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

async 跟 defer的应用场景:

一些特殊的场景, 比如说你的dom要更新完才能去执行js里面的东西, 但是js是单线程了的,读取js是需要时间的, 但是你又想js文件中获取到 dom的节点信息, 这个时候你就可以用 async 或者defer了, 来处理你的这个情况

一般我们为了节约浏览器的渲染时间, 都是把script脚本放到 </ body> 后面,防止js读取跟执行占用我们html的渲染时间, 下面只是为了举例子

请看例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./index.js"></script>
<body>
    <div id="box"></div>
</body>
</html>

index.js

const box = document.getElementById("box");
console.log(box);

因为js是从上到下执行了, 所以我们这里打印出的值是 null,他获取不到div的节点信息

我们通过 async 跟 defer 就可以获取到下面的 dom信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
// 或者这里写 defer
<script async src="./index.js"></script>
<body>
    <div id="box"></div>
</body>
</html>

这里就拿到了节点信息

defer跟 async的区别

defer: 等在html解析完成才会,依次从上到下执行js脚本代码

async: async跟html是同步解析的执行顺序是谁先完成js脚本,就谁先执行

async

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
// 这里的执行顺序 是谁先完成就谁先执行
<script async src="./index1.js"></script>
<script async src="./index2.js"></script>
<script async src="./index3.js"></script>
<body>
    <div id="box"></div>
</body>
</html>

defer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
// defer 是从上到下依次执行的
<script defer src="./index1.js"></script>
<script defer src="./index2.js"></script>
<script defer src="./index3.js"></script>
<body>
    <div id="box"></div>
</body>
</html>

到此这篇关于JavaScript延迟加载之asyc与defer的应用的文章就介绍到这了,更多相关JSt延迟加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

GoJs分组绘图模板go.Group使用示例详解
这篇文章主要为大家介绍了GoJs分组绘图模板go.Group使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
js同时按下两个方向键
本文通过实例代码给大家介绍了js同时按下两个方向键的实现方法，感兴趣的朋友跟随脚本之家小编一起看看吧
2007-12-12
js获取及修改网页背景色和字体色的方法
这篇文章主要介绍了js获取及修改网页背景色和字体色的方法,涉及JavaScript针对页面元素属性的相关操作技巧,需要的朋友可以参考下
2015-12-12
js中获取jsp表单中radio类型的值简单实例
下面小编就为大家带来一篇js中获取jsp表单中radio类型的值简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
Bootstrap缩略图的创建方法
这篇文章主要介绍了Bootstrap缩略图的创建方法，教大家如何实现Bootstrap缩略图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
CocosCreator Typescript制作俄罗斯方块游戏
目前关于cocos开发俄罗斯方块的文章几乎寥寥无几，因此本文将主要介绍如何通过CocosCreator Typescript制作简单的俄罗斯方块游戏，代码具有一定价值，感兴趣的同学可以学习一下
2021-11-11
Document.body.scrollTop的值总为零的快速解决办法
这篇文章主要介绍了Document.body.scrollTop的值总为零的解决方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
js实现封装jQuery的简单方法与链式操作详解
这篇文章主要给大家介绍了关于js实现封装jQuery的简单方法与链式操作的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
微信小程序分包流程步骤超详细讲解
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载,下面这篇文章主要给大家介绍了关于微信小程序分包流程步骤的相关资料,需要的朋友可以参考下
2024-03-03
微信小程序实现上传图片裁剪图片过程解析
这篇文章主要介绍了微信小程序实现上传图片裁剪图片过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08