動態載入css詳解

這次給大家帶來動態載入css詳解，動態載入css的注意事項有哪些，下面就是實戰案例，一起來看一下。

一、方法引用來源和應用

此動態載入css方法 loadCss，剝離自Sea.js，並做了進一步的最佳化（最佳化代碼後續會進行分析）。

因為公司項目需要用到懶載入來提高網站載入速度，所以將非首屏渲染必需的css檔案進行動態載入操作。

二、最佳化後的完整代碼

/** @function 動態載入css檔案* @param {string} options.url -- css資源路徑* @param {function} options.callback -- 載入後回呼函數* @param {string} options.id -- link標籤id*/function loadCss(options){    var url = options.url,        callback = typeof options.callback == "function" ? options.callback : function(){},        id = options.id,        node = document.createElement("link"),        supportOnload = "onload" in node,        isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536, // webkit舊核心做特殊處理        protectNum = 300000; // 閾值10分鐘，一秒鐘執行pollCss 500次    node.rel = "stylesheet";    node.type = "text/css";    node.href = url;    if( typeof id !== "undefined" ){        node.id = id;    }    document.getElementsByTagName("head")[0].appendChild(node);    // for Old WebKit and Old Firefox    if (isOldWebKit || !supportOnload) {        // Begin after node insertion        setTimeout(function() {            pollCss(node, callback, 0);        }, 1);        return;    }    if(supportOnload){        node.onload = onload;        node.onerror = function() {            // 載入失敗(404)            onload();        }    }else{        node.onreadystatechange = function() {            if (/loaded|complete/.test(node.readyState)) {                onload();            }        }    }    function onload() {        // 確保只跑一次下載操作        node.onload = node.onerror = node.onreadystatechange = null;        // 清空node引用，在低版本IE，不清除會造成記憶體泄露        node = null;        callback();    }    // 迴圈判斷css是否已載入成功    /*    * @param node -- link節點    * @param callback -- 回呼函數    * @param step -- 計步器，避免無限迴圈    */    function pollCss(node, callback, step){        var sheet = node.sheet,            isLoaded;        step += 1;        // 保護，大於10分鐘，則不再輪詢        if(step > protectNum){            isLoaded = true;            // 清空node引用            node = null;            callback();            return;        }        if(isOldWebKit){            // for WebKit < 536            if(sheet){                isLoaded = true;            }        }else if(sheet){            // for Firefox < 9.0            try{                if(sheet.cssRules){                    isLoaded = true;                }            }catch(ex){                // Firefox特殊版本，通過特定值獲知是否下載成功                // The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"                // to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0                // in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"                if(ex.name === "NS_ERROR_DOM_SECURITY_ERR"){                    isLoaded = true;                }            }        }        setTimeout(function() {            if(isLoaded){                // 延遲20ms是為了給下載的樣式留夠渲染的時間                callback();            }else{                pollCss(node, callback, step);            }        }, 20);    }}

三、解析代碼

一、參數

本方法支援三個參數，可進行擴充。

1.1 opations.url

 url是需要引入的css資源路徑，也即標籤的href屬性內容。

1.2 options.id

 id是標籤的id屬性。這個參數為非必要參數，可不傳。主要作用是標記當前標籤，方便js進行尋找，以確定是否已載入某個css檔案。

1.3 options.callback

 callback是css檔案載入完成後會調用的回呼函數。也存在特殊情境下，檔案載入失敗，回呼函數仍舊執行的情況。

二、產生標籤，並插入頭部head，進行載入資源

var url = options.url,    callback = typeof options.callback == "function" ? options.callback : function(){},    id = options.id,    node = document.createElement("link");node.rel = "stylesheet";node.type = "text/css";node.href = url;if( typeof id !== "undefined" ){    node.id = id;}document.getElementsByTagName("head")[0].appendChild(node);

產生一個dom節點，然後配置好rel、type、href等必需的屬性值，以便瀏覽器能正常解析連結的資源。

接著，尋找到head節點，將節點插入。

三、實現css資源下載狀態監控的pollCss方法

 pollCss方法的職責是判斷插入的link節點，也即node變數反饋資源是否已載入完成。

3.1 判斷的主要依據

瀏覽器載入css資源，會給該link節點產生sheet屬性，可以根據瀏覽器不同，讀取sheet屬性相關內容，來判斷是否已經載入完成。所以第一句語句var sheet = node.sheet首先要做的就是擷取sheet屬性值。

3.2 普通瀏覽器判斷

try{    if(sheet.cssRules){        isLoaded = true;    }}catch(ex){    // Firefox特殊版本，通過特定值獲知是否下載成功    // The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"    // to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0    // in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"    if(ex.name === "NS_ERROR_DOM_SECURITY_ERR"){        isLoaded = true;    }}

如果讀取sheet.cssRules有值，證明css資源已經連結進頁面，並開始解析。此時可以判斷資源載入成功。

如果讀取失敗，則根據拋錯內容，判斷是否有特定name屬性ex.name === "NS_ERROR_DOM_SECURITY_ERR"。存在，則代表是低版本Firefox（9.0以前），且資源已經載入成功。

3.3 舊webkit核心瀏覽器判斷

var isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536; // webkit舊核心做特殊處理if(isOldWebKit){    // for WebKit < 536    if(sheet){        isLoaded = true;    }}

如果是webkit舊核心瀏覽器，則只需要判斷sheet屬性值存在，則代表資源載入完成。

3.4 增加多次迴圈檢測

setTimeout(function() {    if(isLoaded){        // 延遲20ms是為了給下載的樣式留夠渲染的時間        callback();    }else{        pollCss(node, callback, step);    }}, 20);

觸發pollCss方法後，可能第一次檢測sheet值，會檢測不到。也就代表還沒載入完成。所以需要進行輪詢。這裡是隔20ms進行一次問詢，直到資源載入完成為止。

3.5 輪詢容錯（針對Sea.js源碼的最佳化）

 css資源載入也有可能出錯的時機存在，而且存在不觸發onerror方法的可能性。如果不加一個保護，則輪詢可能一直持續下去，所以需要有一個極限閾值。

var protectNum = 300000, // 閾值10分鐘，一秒鐘執行pollCss 500次    step = 0;// 很多代碼....step += 1;// 保護，大於10分鐘，則不再輪詢if(step > protectNum){    isLoaded = true;    // 清空node引用    node = null;    callback();    return;}

這裡的閾值是輪詢10分鐘，如果10分鐘後，仍然不符合條件，則預設資源已下載完成，執行callback方法，並清空node引用。

四、確定觸發pollCss檢查的時機

 4.1 pollCss輪詢的應用情境

當瀏覽器核心是舊的webkit核心時，或者不支援節點觸發onload方法時，才使用pollCss進行輪詢。

// for Old WebKit and Old Firefoxif (isOldWebKit || !supportOnload) {    // Begin after node insertion    setTimeout(function() {        pollCss(node, callback, 0);    }, 1);    return;}

五、現代瀏覽器直接用onload和onreadystatechange做判斷

現代瀏覽器用這種方式判斷，可以避免輪詢的弊端。判斷也更加準確及時。

 5.1 onload方法

function onload() {    // 確保只跑一次下載操作    node.onload = node.onerror = node.onreadystatechange = null;    // 清空node引用，在低版本IE，不清除會造成記憶體泄露    node = null;    callback();}

 onload方法觸發執行後，應立即將多個相關方法進行重設，以避免callback多次觸發。

 node = null;將node重設為null，是為了避免低版本的IE出現記憶體溢出問題，及時清除沒用的dom節點。

最後，執行callback方法。

5.2 支援onload方法瀏覽器的處理

if(supportOnload){    node.onload = onload;    node.onerror = function() {        // 載入失敗(404)        onload();    }}

5.3 不支援onload方法瀏覽器的處理

if(supportOnload){    // 代碼...}else{    node.onreadystatechange = function() {        if (/loaded|complete/.test(node.readyState)) {            onload();        }    }}

四、後記

選擇剝離Sea.js方法進行改造的原因：因為該js庫使用人群很廣泛，如果出問題，作者也會及時修複。所以，以此代碼為藍本進行改造契合公司的使用者群，避免大面積出現問題。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS實現一級導覽列

html+css中的四種隱藏方式

CSS3中nth-child與nth-of-type的區別以及提示