瀏覽器對Script下載的非并行處理再說明

我提到了“將Script放到HTML文件中盡量靠近尾部”的方法來提高用戶感覺上的響應時間，有朋友對這個問題提出了疑問，因此在這里更詳細的對該方法進行說明。
      首先，瀏覽器對于script的下載是避免并行進行的。HTTP/1.1協議中規定瀏覽器和同一host之間只建立最多兩個連接，也就是說允許的最大并行度為2（當然，對IE和Firefox來說，你都可以通過修改瀏覽器的設置來擴大這個并行度）。但對于Script的下載來說，瀏覽器在開始下載Script之后，是不會并行的下載其他element的。不會并行下載script這一點是一個事實，但瀏覽器為什么要采用這種策略，以及瀏覽器我們提到的“將Script放到HTML文件中盡量靠近尾部”到底能起到多大的作用，需要注意哪些事項，我希望在這篇文章中進一步的進行討論。

      為了討論方便，我準備了一個簡單的HTML文件：
php?aid=3996" target="_blank">


      這個HTML文件include了兩個javascript文件，含有兩張圖片。兩個javascript文件內容分別如下：




      從代碼中看出，這個HTML文件很簡單，帶有兩張圖片和一個button，當button被click的時候，調用jsdownload_j2.js的OnB1Click()函數，而OnB1Click()函數是簡單的調用jsdownload_j1.js文件中的OnJ1B1Click()函數。

      我們來看看用IBM Page Detailer工具獲得的IE瀏覽器訪問該頁面時的頁面元素下載圖：


   從圖中可以看到，javascript的下載block了其他元素的下載，因此第一個可視元素（圖片）的下載完成是在1.33秒的時刻，也就是說，用戶等待1.33秒才能看到頁面上的第一幅圖片。而如果我們把HTML中的javascript的位置放到稍后的位置，例如，改成這樣：

       

則得到的element下載圖如下：




        雖然總的下載時間比上一次稍長，但在0.72秒的時候，第一幅圖片就已經下載完成，此時用戶會看到頁面的主要部分，因此對用戶來說，頁面變“快”了。

        這是一個典型的利用瀏覽器下載Script時候的非并行特性優化頁面性能的方法。接下來，我們討論下為什么瀏覽器在下載Script的時候會采用非并行的方式。其實原因也不復雜：

        在我們的HTML文件中，有兩個Script，一個是jsdownload_j1.js，另一個是jsdownload_j2.js文件，如果允許瀏覽器并行下載這兩個script，則可能發生jsdownload_j2.js文件先于jsdownload_j1.js文件下載完成的情況。這時如果頁面上后續的一個javascript調用使用了jsdownload_j2.js文件中的函數，則此調用會立即發生（因為瀏覽器判斷到jsdownload_j2.js文件已經下載完成了），而如果此時jsdownload_j2.js文件中的該函數需要依賴于jsdownload_j1.js中的另一個函數，由于此時jsdownload_j1.js文件還未下載完成，則此調用會產生一個javascript error。為了避免這樣的情況，瀏覽器采用了嚴格按照HTML文件中定義的順序下載Script，并嚴格按照非并行方式下載的策略。

        最后一個需要討論的問題，就是這種提升頁面性能的方式有哪些需要注意的內容了。實際上，如同上面黑體字的討論，如果不分青紅皂白把Script文件全部放在HTML的最后部分，也是會出問題的。例如，在我們的例子中，Button的Click事件需要調用js文件中的某個函數，如果Script都被放到HTML文件的最后的話，button這個element會在script下載完成之前被render出來，如果此時用戶點擊了這個button，就一定會出現一個Script error。關于這個問題，有兩個解決方法：
1，將Script放在合適的，盡量靠近尾部的地方，由開發人員保證不會出現這樣的問題；
2，為所有的js文件中需要被調用的函數，在HTML中實現一個空函數（放在靠前的位置），這樣當頁面需要的js文件沒有download完成時，用戶點擊按鈕等操作之后出發一個空函數，避免了Script Error（當然，可能會confuse用戶）；而等js文件download完成后，這些function會被override，用戶的操作能夠得到正確的解決

原文轉自：http://www.anti-gravitydesign.com