JavaScript延迟加载之async与defer的应用_javascript技巧_

async 跟 defer的应用场景:

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

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

请看例子

index.js

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

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

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

 // 或者这里写 defer 

这里就拿到了 节点信息

defer跟 async的区别

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

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

async

 // 这里的执行顺序 是谁先完成就谁先执行 

defer

 // defer 是从上到下依次执行的 

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

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！