js載入順序

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

做前端開發少不了各種利器。比如我習慣用的還是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載入順序（優化JS載入）

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

JS載入順序

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

JS載入順序

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