快捷導(dǎo)航

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

更新時間：2022年09月02日 08:59:14 作者：快樂的蜜蜂

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

async 跟 defer的應(yīng)用場景:

一些特殊的場景, 比如說你的dom要更新完才能去執(zhí)行js里面的東西, 但是js是單線程了的,讀取js是需要時間的, 但是你又想js文件中獲取到 dom的節(jié)點信息, 這個時候你就可以用 async 或者defer了, 來處理你的這個情況

一般我們?yōu)榱斯?jié)約瀏覽器的渲染時間, 都是把script腳本放到 </ body> 后面,防止js讀取跟執(zhí)行占用我們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是從上到下執(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>

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

您可能感興趣的文章: