樓主做前端開發一年多了,對前端的見解還是多多少少有一點的,今天特拿出來跟大家分享分享。
做前端開發少不了各種利器。比如我習慣用的還是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中,但是大家有沒有深究過呢?很多瀏覽器都會使用單一的執行緒來做 ...