脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JSt延迟加载

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延迟加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Eval and new funciton not the same thing

    Eval and new funciton not the 

    以前有人会说，new Function的方式是几乎与eval相等，今天我查了一下，确实是不同的东西，说这句话的人太不负责了。关于eval和new function，得到的结果都是一致的，都会叫你不要去使用它们。所以结论就是“不得不”才使用
    2012-12-12
  • JavaScript中好用的数组对象排序方法分享

    JavaScript中好用的数组对象排序方法分享

    在日常工作中，我们经常需要对数组对象进行排序，尤其是在处理数据可视化需求中。本文将介绍一些简单而又实用的方法，帮助你实现对数组对象的某几个 key 进行排序
    2023-05-05
  • js处理php输出时间戳对不上号的解决方法

    js处理php输出时间戳对不上号的解决方法

    JS时间戳为13位，包含3位毫秒的，而PHP只有10位不包含毫秒的，这就是为什么对不上号原因，处理方法如下
    2014-06-06
  • JavaScript简写技巧总结

    JavaScript简写技巧总结

    这篇文章总结了JavaScript的一些简写技巧，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 点击A元素触发B元素的事件在IE8下会识别成A元素

    点击A元素触发B元素的事件在IE8下会识别成A元素

    IE8自动触发的事件源会识别成手动点击的元素就是点击A元素触发B元素的事件在IE8下会识别成A元素,需要的朋友可以参考下
    2014-09-09
  • uniapp引用echarts的详细步骤(附柱状图实例)

    uniapp引用echarts的详细步骤(附柱状图实例)

    最近在uni-app搭建的微信小程序项目中使用了ECharts,下面这篇文章主要给大家介绍了关于uniapp引用echarts的详细步骤,文中还附有柱状图实例,需要的朋友可以参考下
    2022-07-07
  • 详解微信小程序实现跑马灯效果（附完整代码）

    详解微信小程序实现跑马灯效果（附完整代码）

    这篇文章主要介绍了微信小程序跑马灯效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript中的location、history、navigator对象实例介绍

    JavaScript中的location、history、navigator对象实例介绍

    这篇文章主要介绍了JavaScript中的location、history、navigator对象实例介绍,需要的朋友可以参考下
    2023-05-05
  • 图片上传之FileAPI与NodeJs

    图片上传之FileAPI与NodeJs

    本文主要介绍了使得我们处理图片上传更加简单的方法FileAPI。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 基于js的变量提升和函数提升(详解)

    基于js的变量提升和函数提升(详解)

    下面小编就为大家带来一篇基于js的变量提升和函数提升(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论