前端優化-Javascript篇(1.腳本放在底部)

　　從本篇博客開始，我會跟你們分享下我關於前端優化方面的學習，因爲時間緣由每篇博客只能分享一小點內容，一點點深刻前端優化的細節。
　　作過前端的人都知道，前端優化是一個永遠都不會中止的話題(固然，無論是哪一個技術，優化老是無止境的)。在前端優化這個問題上，最被你們熟知的應該就是雅虎前端優化14條軍規以及雅虎前端優化34條規則。大部分也都已經應用到了實際開發中。而個人分享並非按照優化建議來進行的，個人計劃是整個優化按照不一樣模塊進行劃分，分別是Javascript，CSS，HTML還有其餘的一些細節。今天就先從Javascript開始。
　　Javascript開篇就跟你們分享一個比較簡單的規則————腳本後置，這個是一個最基本的優化策略，我想你們都應該知道，但是我仍是想經過實際的例子來加深一下本身的理解，也許在這個簡單的事情後面能夠挖掘出更多有意思的東西。
　　爲了驗證腳本後置對前端優化究竟會有多大的影響，我把個人博客做爲測試對象，在首頁插入下面這個腳本:

function doSomething(n){
    //模擬一個須要執行n秒的腳本
    var start = new Date().getTime() ;
    while((new Date().getTime() - start) < 1000 * n){}
}
//執行5秒
doSomething(5) ;

　　我把這個腳本命名爲doSomething.js
　　首先，先來看看腳本前置的狀況，下圖是腳本前置狀況下的網絡瀑布圖
　　
　　其次，再來看看腳本後置的狀況，下圖是腳本後置狀況下的網絡瀑布圖
　　
　　

　　經過上面兩幅圖，結果已經很明顯了，雖然現代瀏覽器已經支持資源的並行下載，可是當腳本阻塞時仍然會阻止其餘圖片資源和頁面的加載，若是站點是一個有不少圖片的網站那麼這種狀況將嚴重影響用戶體驗；而腳本後置的話，圖片和腳本是並行下載，而後先加載圖片和頁面而後才執行耗時的腳本，這樣就不會阻塞圖片和頁面的加載。
　　從上面的瀑布圖咱們還能夠看出不少瀏覽器加載策略方面的東西，經過對比不一樣瀏覽器的瀑布圖也能夠看出各自的加載策略，這方面的知識還須要在摸索，也但願有了解的人來講說不一樣瀏覽器之間加載策略的不一樣。

最後，安利下個人我的博客，歡迎訪問: http://bin-playground.top