您好,登錄后才能下訂單哦!
在js引擎部分,我們可以了解到,當(dāng)渲染引擎解析到script標(biāo)簽時(shí),會(huì)將控制權(quán)給JS引擎,如果script加載的是外部資源,則需要等待下載完后才能執(zhí)行。 所以,在這里,我們可以對(duì)其進(jìn)行很多優(yōu)化工作。
放置在BODY底部
為了讓渲染引擎能夠及早的將DOM樹給渲染出來,我們需要將script放在body的底部,讓頁面盡早脫離白屏的現(xiàn)象,即會(huì)提早觸發(fā)DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js腳本放到body尾部,結(jié)果還是一樣。 所以這里需要另外的操作來對(duì)js文件加載進(jìn)行優(yōu)化.
DEFER加載
這是HTML4中定義的一個(gè)script屬性,它用來表示的是,當(dāng)渲染引擎遇到script的時(shí)候,如果script引用的是外部資源,則會(huì)暫時(shí)掛起,并進(jìn)行加載。 渲染引擎繼續(xù)解析下面的HTML文檔,解析完時(shí),則會(huì)執(zhí)行script里面的腳本。
<script src="outside.js" defer></script>
他的支持度是<=IE9的.
并且,他的執(zhí)行順序,是嚴(yán)格依賴的,即:
<script src="outside1.js" defer></script> <script src="outside2.js" defer></script>
當(dāng)頁面解析完后,他便會(huì)開始按照順序執(zhí)行 outside1 和 outside2文件。
如果你在IE9以下使用defer的話,可能會(huì)遇到 它們兩個(gè)不是順序執(zhí)行的,這里需要一個(gè)hack進(jìn)行處理,即在兩個(gè)中間加上一個(gè)空的script標(biāo)簽
<script src="outside1.js" defer></script> <script></script> //hack <script src="outside2.js" defer></script>
ASYNC加載
async是H5新定義的一個(gè)script 屬性。 他是另外一種js的加載模式。
渲染引擎解析文件,如果遇到script(with async)
繼續(xù)解析剩下的文件,同時(shí)并行加載script的外部資源
當(dāng)script加載完成之后,則瀏覽器暫停解析文檔,將權(quán)限交給JS引擎,指定加載的腳本。
執(zhí)行完后,則恢復(fù)瀏覽器解析腳本
可以看出async也可以解決 阻塞加載 這個(gè)問題。不過,async執(zhí)行的時(shí)候是異步執(zhí)行,造成的是,執(zhí)行文件的順序不一致。即:
<script src="outside1.js" async></script> <script src="outside2.js" async></script>
這時(shí),誰先加載完,就先執(zhí)行誰。所以,一般依賴文件就不應(yīng)該使用async而應(yīng)該使用defer.
defer的兼容性比較差,為IE9+,不過一般是在移動(dòng)端使用,也就不存在這個(gè)problem了。
腳本異步
腳本異步是一些異步加載庫(比如require)使用的基本加載原理. 直接上代碼:
function asyncAdd(src){ var script = document.createElement('script'); script.src = src; document.head.appendChild(script); } //加載js文件 asyncAdd("test.js");
這時(shí)候,可以異步加載文件,不會(huì)造成阻塞的效果.
但是,這樣加載的js文件是無序的,無法正常加載依賴文件。
這時(shí)候,我們需要對(duì)上述函數(shù)進(jìn)行優(yōu)化.
var asyncAdd = (function(){ var head = document.head, script; return function(src){ script = document.createElement('script'); script.src= src; script.async=false; document.head.appendChild(script); } })(); //加載文件 asyncAdd("first.js"); asyncAdd("second.js"); //或者簡(jiǎn)便一點(diǎn) ["first.js","second.js"].forEach((src)=>{async(src);});
但是,使用腳本一步加載的話,需要等待css文件加載完后,才開始進(jìn)行加載,不能充分利用瀏覽器的并發(fā)加載優(yōu)勢(shì)。而使用靜態(tài)文本加載async或者defer則不會(huì)出現(xiàn)這個(gè)問題。
使用腳本異步加載時(shí),只能等待css加載完后才會(huì)加載
使用靜態(tài)的async加載時(shí),css和js會(huì)并發(fā)一起加載
關(guān)于這三種如何取舍,那就主要看leader給我們目標(biāo)是什么,是兼容IE8,9還是手機(jī)端,還是桌面瀏覽器,或者兩兩組合。
但是對(duì)于單獨(dú)使用某一個(gè)技能的場(chǎng)景,使用時(shí)需要注意一些tips。
js文件放置位置應(yīng)該放置到body末尾
如果使用async的話,最后加上defer以求向下兼容
<script src="test.js" async defer></script> //如果兩者都支持,async會(huì)默認(rèn)覆蓋掉defer //如果只支持一個(gè),則執(zhí)行對(duì)應(yīng)的即可
通常,我們使用的加載都是defer加載(因?yàn)楹軓?qiáng)的依賴關(guān)系).
以上這篇基于js文件加載優(yōu)化(詳解)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。