快捷導(dǎo)航

JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用

更新時(shí)間：2022年09月02日 08:59:14 作者：快樂(lè)的蜜蜂

這篇文章主要介紹了JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用場(chǎng)景與使用區(qū)別的介紹，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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>
// 或者這里寫 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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: