在js引擎部分,我們可以了解到,當渲染引擎解析到script標簽時,會將控制權給JS引擎,如果script加載的是外部資源,則需要等待下載完後才能執行。 所以,在這裡,我們可以對其進行很多優化工作。
放置在BODY底部
為了讓渲染引擎能夠及早的將DOM樹給渲染出來,我們需要將script放在body的底部,讓頁面盡早脫離白屏的現象,即會提早觸發DOMContentLoaded事件. 但是由於在IOS Safari, Android browser以及IOS webview裡面即使你把js腳本放到body尾部,結果還是一樣, 所以這裡需要另外的操作來對js文件加載進行優化.
DEFER加載
這是HTML4中定義的一個script屬性,它用來表示的是,當渲染引擎遇到script的時候,如果script引用的是外部資源,則會暫時掛起,並進行加載。 渲染引擎繼續解析下面的HTML文檔,解析完時,則會執行script裡面的腳本。
<script src="outside.js" defer></script>
他的支持度是<=IE9的.
並且,他的執行順序,是嚴格依賴的,即:
<script src="outside1.js" defer></script> <script src="outside2.js" defer></script>
當頁面解析完後,他便會開始按照順序執行 outside1 和 outside2文件。
如果你在IE9以下使用defer的話,可能會遇到 它們兩個不是順序執行的,這裡需要一個hack進行處理,即在兩個中間加上一個空的script標簽
<script src="outside1.js" defer></script> <script></script> //hack <script src="outside2.js" defer></script>
ASYNC加載
async是H5新定義的一個script 屬性。 他是另外一種js的加載模式。
可以看出async也可以解決 阻塞加載 這個問題。不過,async執行的時候是異步執行,造成的是,執行文件的順序不一致。即:
<script src="outside1.js" async></script> <script src="outside2.js" async></script>
這時,誰先加載完,就先執行誰。所以,一般依賴文件就不應該使用async而應該使用defer.
defer的兼容性比較差,為IE9+,不過一般是在移動端使用,也就不存在這個problem了。
腳本異步
腳本異步是一些異步加載庫(比如require)使用的基本加載原理. 直接上代碼:
function asyncAdd(src){ var script = document.createElement('script'); script.src = src; document.head.appendChild(script); } //加載js文件 asyncAdd("test.js");
這時候,可以異步加載文件,不會造成阻塞的效果.
但是,這樣加載的js文件是無序的,無法正常加載依賴文件。
這時候,我們需要對上述函數進行優化.
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"); //或者簡便一點 ["first.js","second.js"].forEach((src)=>{async(src);});
但是,使用腳本一步加載的話,需要等待css文件加載完後,才開始進行加載,不能充分利用浏覽器的並發加載優勢。而使用靜態文本加載async或者defer則不會出現這個問題。
使用腳本異步加載時,只能等待css加載完後才會加載
使用靜態的async加載時,css和js會並發一起加載
關於這三種如何取捨,那就主要看leader給我們目標是什麼,是兼容IE8,9還是手機端,還是桌面浏覽器,或者兩兩組合。
但是對於單獨使用某一個技能的場景,使用時需要注意一些tips。
1、js文件放置位置應該放置到body末尾
2、如果使用async的話,最後加上defer以求向下兼容
<script src="test.js" async defer></script> //如果兩者都支持,async會默認覆蓋掉defer //如果只支持一個,則執行對應的即可
通常,我們使用的加載都是defer加載,因為很強的依賴關系。
以上就是本文的全部內容,希望對大家的學習有所幫助。