並行下載 Script , 圖片以及css

2014-02-22

995
0
Javascript
2014-02-23

摘要:並行下載指令稿以及圖片 , css

網頁通常需要載入 Javascript , css , image 等檔案 ,

這些檔案不是同時下載的 , 而是有順序載入 , 而 Javascript , css 會比其他檔案先行下載 ( 若 css 撰寫在 js 之前 , 則 css 會先行載入 ),

這是因為 Javascript , Css 可能會改變頁面 , 那會影響後續下載的東西 , 這表示圖片等資源無法同時下載 ,

當然還有其他的影響因素 , 例如 Http 1.1 只能同時發送 6 個 Http Connection , 詳情可參閱 Http 協定與 Web 優化的關係

下圖可以看到圖片等資源都是等到 Js , css 等資源完全載入後才後續下載 :

那要怎樣突破這種限制讓圖片能提早下載 ?

在 IE 8 中 , 你可以在載入 Js 時 , 加入 refer , 而在其他瀏覽器中就需要使用其他的手段了 ,

在這裡我會使用下面的 Code 來載入我們需要的 Js , 下面的 Code 會動態建立 script 的 html 元素 :

        var scriptElem = document.createElement("script");
        scriptElem.src = your javascript ;
        document.getElementsByTagName("head")[0].appendChild(scriptElem);

讓我們再來看看在瀑布圖會呈現怎樣的狀況 ,

可以看到 , 有些 Js 檔都被移動到後面下載了, 而有些圖片則被移動到前面下載了 ,

如此一來在客戶端將更快看到圖片等元素 , 而不是等整個 Js , css 檔載入完成後才能看到整個網頁的呈現 ,

上圖光是在載入所需的 Js 檔就需要4秒左右了 ,

但是能這樣做的前提是 , 你必須確保並行載入的 Js 是不需要優先載入並且執行動作的 ,

例如你的頁面有些特效如 slider 等

回首頁