<!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是從上到下執(zhí)行了, 所以我們這里打印出的值是 null,他獲取不到div的節(jié)點信息

我們通過 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é)點信息

defer跟 async的區(qū)別

defer: 等在html解析完成才會,依次從上到下執(zhí)行js腳本代碼

async: async跟html是同步解析的執(zhí)行順序是誰先完成js腳本,就誰先執(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í)行順序 是誰先完成就誰先執(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>

到此這篇關于JavaScript延遲加載之a(chǎn)syc與defer的應用的文章就介紹到這了,更多相關JSt延遲加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: