快捷導(dǎo)航

JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解

更新時間：2021年09月09日 08:39:01 作者：Code_Dreaming

這篇文章主要介紹了JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

上來先給一個問題：在書寫html頁面時，當(dāng)你要從外部引入js文件時，script標(biāo)簽會放置在哪個位置呢，放置位置不同對頁面加載有影響嗎？
默認(rèn)情況下，瀏覽器是同步加載 JavaScript 腳本：即渲染引擎遇到 script 標(biāo)簽就會停下來，等到執(zhí)行完腳本，再繼續(xù)向下渲染。如果是外部腳本，還必須加入腳本下載的時間。
如果腳本體積很大，下載和執(zhí)行的時間就會很長，因此造成瀏覽器堵塞，用戶會感覺到瀏覽器“卡死”，出現(xiàn)短暫的空白，沒有任何響應(yīng)。這會造成很不好的用戶體驗(yàn)，解決這個問題有兩種方案：

①. 改變script標(biāo)簽的放置位置。最好將其丟在body標(biāo)簽的最后面，即放在</ body>標(biāo)簽的前面，這種方式不會影響瀏覽器的DOM渲染，會讓頁面處理執(zhí)行完后才去執(zhí)行它

②. 同步轉(zhuǎn)異步。瀏覽器允許腳本異步加載，這種方式可以讓 script 標(biāo)簽繼續(xù)放在head頭部，下面是兩種異步加載的語法：

<script src="./1.js" async></script>
<script src="./1.js" defer></script>

async與defer

異步就是 script 標(biāo)簽打開defer或async屬性，腳本就會異步加載。瀏覽器渲染引擎遇到這一行命令，就會開始下載外部腳本，在下載的同時渲染引擎會直接執(zhí)行后面的命令。

async和defer都會讓外部腳本下載時，渲染引擎不停下來。

async屬性與defer的區(qū)別就在于：

在這里插入圖片描述

藍(lán)色線代表網(wǎng)絡(luò)讀?。_本下載），紅色線代表執(zhí)行，這倆都是針對腳本的；綠色線代表 HTML 解析。

defer屬性，瀏覽器會立即下載相應(yīng)的腳本，在下載的過程中頁面的處理不會停止，等到文檔解析完成后腳本才會執(zhí)行。

async屬性，瀏覽器會立即下載相應(yīng)的腳本，在下載的過程中頁面的處理不會停止，下載完成后立即執(zhí)行，執(zhí)行過程中頁面處理會停止。

若不設(shè)置任何屬性，那么當(dāng)與到script腳本時，會等script腳本下載和執(zhí)行都完成之后才繼續(xù)執(zhí)行下面的頁面處理。

【注】且async比defer更“厲害”，當(dāng)同一標(biāo)簽同時使用兩種屬性時，遵循async?。?！

多個腳本

async和defer的區(qū)別不僅體現(xiàn)在外部script文件的下載和執(zhí)行上，更體現(xiàn)在多個腳本存在時的不同：
先來個代碼示例：

外部script文件
1.js 文件：

// ... 非常多的js代碼
console.log('1');

2.js 文件：

console.log('2');

主html文件

使用defer：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js阻塞</title>
    <!-- defer會讓dom先執(zhí)行 -->
    <script src="./1.js" defer></script>
    <script src="./2.js" defer></script>
</head>
<body>
    <h1>js的阻塞是如何進(jìn)行的？</h1>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOMContentLoaded');
        })
    </script>
</body>
</html>

控制臺執(zhí)行結(jié)果：

在這里插入圖片描述

使用async：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js阻塞</title>
    <!-- defer會讓dom先執(zhí)行 -->
    <script src="./1.js" async></script>
    <script src="./2.js" async></script>
</head>
<body>
    <h1>js的阻塞是如何進(jìn)行的？</h1>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOMContentLoaded');
        })
    </script>
</body>
</html>

控制臺執(zhí)行結(jié)果：

在這里插入圖片描述

從控制臺的運(yùn)行結(jié)果就可以看出：
defer：第一個延遲腳本會先于第二個延遲腳本執(zhí)行（當(dāng)然，如果一些瀏覽器不完全遵照html5標(biāo)準(zhǔn)，也會出現(xiàn)不按順序執(zhí)行的情況），且這兩個腳本會先于DOMContentLoaded事件執(zhí)行。

async：哪個先下載完成哪個就立即執(zhí)行！！！這兩個腳本不一定會在DOMContentLoaded事件觸發(fā)之前執(zhí)行，但一定會在window.onload 事件之前執(zhí)行完成。另外，值得注意的是，在先下載完的腳本執(zhí)行過程中，其他腳本不會停止下載，而會繼續(xù)下載。

【注】DOMContentLoaded會在dom加載完成后觸發(fā)，即文檔完全加載和解析之后觸發(fā)。
○ 更多關(guān)于DOMContentLoaded，請參考 http://m.fzitv.net/article/222345.htm

小結(jié)

防堵塞的最佳實(shí)踐就是將script標(biāo)簽放到body的最下面；
defer 和 async 在網(wǎng)絡(luò)讀?。ㄏ螺d）方面是一樣的，都是異步的（相較于 HTML 解析）
它倆的差別在于腳本下載完之后何時執(zhí)行，顯然 defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的，尤其對于有script文件之間有依賴的情況（依賴就是可能這個js文件引用了上一個js文件的內(nèi)容），它是按照加載順序執(zhí)行腳本的?。?！
async 則是一個亂序執(zhí)行的主，對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執(zhí)行
仔細(xì)想想，async 對于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級的順序執(zhí)行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics
defer/async都只適合與操作外部腳本，另外，在操作DOM腳本時最好不要使用async/defer，因?yàn)楸热缡褂胊sync時可能頁面還沒加載完，就執(zhí)行了js代碼，這樣很可能產(chǎn)生異常；如果一定要使用，可以把需要操作 DOM 的js 部分放在 DOMContentLoaded 事件回調(diào)中執(zhí)行☺！