JS載入順序(優化JS載入)

2021-06-21 11:29:41 字數 2537 閱讀 6483

樓主做前端開發一年多了,對前端的見解還是多多少少有一點的,今天特拿出來跟大家分享分享。

做前端開發少不了各種利器。比如我習慣用的還是google瀏覽器和重型**fiddller。

一: 原始情況

估計90%的程式設計師都會把js檔案放在head中,但是大家有沒有深究過呢?很多瀏覽器都會使用單一的執行緒來做「介面ui的更新」和「js指令碼的處理「,

此時使用者很可能就會給你關掉。

從上面的瀑布圖中我們可以看出二點:

第一:第二:

二:第一步優化

既然js阻止了ui渲染,那麼我們可以考慮將js放在前,這樣就可以讓121314

三:第二步優化

看上面的「瀑布圖」,估計大家也看出來了,三個js檔案進行了三次「get」請求,大家都知道get請求是需要帶http頭的,

所以說需要耗費時間,那麼我們採取的方案自然就是減少get請求。通常有兩種方案。

第一:合併js檔案,比如將上面的「hello.js"和「world.js「合併掉。

第二:利用第三方工具,比如php中的minify。

關於第二種做法,taobao用的還是比較多的,看一下其中的乙個script,應用了三個js檔案。由3個get請求變為了1個。

四:第三步優化

不管是把js檔案放在腳尾,還是三個合併乙個,其本質都是」阻塞模式「,就是說鎖死瀏覽器,當web頁面越來越複雜,js檔案越來越多,還是

讓我們頭疼的,此時我們就提倡一種「無阻塞模式「載入js指令碼,也就是頁面全部呈現完再追加js,也就對應著window.onload事件觸發後,我們才

追加js,這就是所謂的「無阻塞「,但是其中有乙個非常要注意的地方就是我們對js的要求是否有嚴格的順序。

第一:無順序要求,比如我對」hello.js「和」world.js"沒有順序要求,那麼我們完全可以用jquery來動態追加實現。

從圖中可以看出,"hello.js"和「world.js"出現在藍色線以後,也就說明這兩個js是在domcontentload結束後再進行觸發載入的,這樣就不會造成頁面的鎖定

等待。第二:有順序要求

為什麼一定要有順序要求這個概念呢?對於上面的那個動態追加的「兩個js」檔案,在ie系列中,你不能保證hello.js一定會在world.js前執行,

他只會按照伺服器端返回的順序執行**。

JS載入順序

做前端開發少不了各種利器。比如我習慣用的還是google瀏覽器和重型 fiddller。一 原始情況 估計90 的程式設計師都會把js檔案放在head中,但是大家有沒有深究過呢?很多瀏覽器都會使用單一的執行緒來做 介面ui的更新 和 js指令碼的處理 此時使用者很可能就會給你關掉。從上面的瀑布圖中我...

js載入順序

樓主做前端開發一年多了,對前端的見解還是多多少少有一點的,今天特拿出來跟大家分享分享。做前端開發少不了各種利器。比如我習慣用的還是google瀏覽器和重型 fiddller。一 原始情況 估計90 的程式設計師都會把js檔案放在head中,但是大家有沒有深究過呢?很多瀏覽器都會使用單一的執行緒來做 ...

JS載入順序

樓主做前端開發一年多了,對前端的見解還是多多少少有一點的,今天特拿出來跟大家分享分享。做前端開發少不了各種利器。比如我習慣用的還是google瀏覽器和重型 fiddller。一 原始情況 估計90 的程式設計師都會把js檔案放在head中,但是大家有沒有深究過呢?很多瀏覽器都會使用單一的執行緒來做 ...