JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用
async 跟 defer的應(yīng)用場(chǎng)景:
一些特殊的場(chǎng)景, 比如說(shuō)你的dom要更新完 才能去執(zhí)行js里面的東西, 但是js是單線程了的,讀取js是需要時(shí)間的, 但是你又想js文件中獲取到 dom的節(jié)點(diǎn)信息, 這個(gè)時(shí)候 你就可以用 async 或者defer了, 來(lái)處理你的這個(gè)情況
一般我們?yōu)榱斯?jié)約瀏覽器的渲染時(shí)間, 都是把script腳本放到 </ body> 后面,防止js讀取跟執(zhí)行占用我們html的渲染時(shí)間, 下面只是為了舉例子
請(qǐng)看例子
<!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);
因?yàn)閖s是從上到下執(zhí)行了, 所以我們這里打印出的值是 null,他獲取不到div的節(jié)點(diǎn)信息
我們通過(guò) 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>
// 或者這里寫(xiě) defer
<script async src="./index.js"></script>
<body>
<div id="box"></div>
</body>
</html>這里就拿到了 節(jié)點(diǎn)信息
defer跟 async的區(qū)別
defer: 等在html解析完成才會(huì),依次從上到下執(zhí)行js腳本代碼
async: async跟html是同步解析的執(zhí)行順序是誰(shuí)先完成js腳本,就誰(shuí)先執(zhí)行
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>
// 這里的執(zhí)行順序 是誰(shuí)先完成就誰(shuí)先執(zhí)行
<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 是從上到下依次執(zhí)行的
<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>到此這篇關(guān)于JavaScript延遲加載之a(chǎn)syc與defer的應(yīng)用的文章就介紹到這了,更多相關(guān)JSt延遲加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- script標(biāo)簽中的async和defer詳細(xì)說(shuō)明與使用場(chǎng)景
- script標(biāo)簽中的defer和async使用技巧說(shuō)明
- JS script腳本中async和defer區(qū)別詳解
- JavaScript無(wú)阻塞加載和defer、async詳解
- 淺析script標(biāo)簽中的defer與async屬性
- 關(guān)于Javascript中defer和async的區(qū)別總結(jié)
- JS中script標(biāo)簽defer和async屬性的區(qū)別詳解
- 淺談async、defer以普通script加載的區(qū)別
相關(guān)文章
這篇文章主要為大家介紹了GoJs分組繪圖模板go.Group使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
本文通過(guò)實(shí)例代碼給大家介紹了js同時(shí)按下兩個(gè)方向鍵的實(shí)現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起看看吧2007-12-12
這篇文章主要介紹了js獲取及修改網(wǎng)頁(yè)背景色和字體色的方法,涉及JavaScript針對(duì)頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-12-12
js中獲取jsp表單中radio類(lèi)型的值簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js中獲取jsp表單中radio類(lèi)型的值簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
這篇文章主要介紹了Bootstrap縮略圖的創(chuàng)建方法，教大家如何實(shí)現(xiàn)Bootstrap縮略圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
CocosCreator Typescript制作俄羅斯方塊游戲
目前關(guān)于cocos開(kāi)發(fā)俄羅斯方塊的文章幾乎寥寥無(wú)幾，因此本文將主要介紹如何通過(guò)CocosCreator Typescript制作簡(jiǎn)單的俄羅斯方塊游戲，代碼具有一定價(jià)值，感興趣的同學(xué)可以學(xué)習(xí)一下2021-11-11
Document.body.scrollTop的值總為零的快速解決辦法
這篇文章主要介紹了Document.body.scrollTop的值總為零的解決方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
微信小程序?qū)崿F(xiàn)上傳圖片裁剪圖片過(guò)程解析