深入解析動態(tài)加載css的實現(xiàn)方法

發(fā)布時間：2017-01-18 09:57:59 作者：佚名

因為公司項目需要用到懶加載來提高網(wǎng)站加載速度，所以將非首屏渲染必需的css文件進行動態(tài)加載操作。接下來通過本文給大家分享實現(xiàn)代碼，需要的朋友參考下

一、方法引用來源和應用

此動態(tài)加載css方法 loadCss，剝離自Sea.js，并做了進一步的優(yōu)化（優(yōu)化代碼后續(xù)會進行分析）。

因為公司項目需要用到懶加載來提高網(wǎng)站加載速度，所以將非首屏渲染必需的css文件進行動態(tài)加載操作。

二、優(yōu)化后的完整代碼

/*
* @function 動態(tài)加載css文件
* @param {string} options.url -- css資源路徑
* @param {function} options.callback -- 加載后回調(diào)函數(shù)
* @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舊內(nèi)核做特殊處理
        protectNum = 300000; // 閾值10分鐘，一秒鐘執(zhí)行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，不清除會造成內(nèi)存泄露
        node = null;
        callback();
    }
    // 循環(huán)判斷css是否已加載成功
    /*
    * @param node -- link節(jié)點
    * @param callback -- 回調(diào)函數(shù)
    * @param step -- 計步器，避免無限循環(huán)
    */
    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){
                // 火狐特殊版本，通過特定值獲知是否下載成功
                // 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);
    }
}

三、解析代碼

一、參數(shù)

本方法支持三個參數(shù)，可進行擴展。

1.1 opations.url

url是需要引入的css資源路徑，也即標簽的href屬性內(nèi)容。

1.2 options.id

id是標簽的id屬性。這個參數(shù)為非必要參數(shù)，可不傳。主要作用是標記當前標簽，方便js進行查找，以確定是否已加載某個css文件。

1.3 options.callback

callback是css文件加載完成后會調(diào)用的回調(diào)函數(shù)。也存在特殊場景下，文件加載失敗，回調(diào)函數(shù)仍舊執(zhí)行的情況。

二、生成標簽，并插入頭部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節(jié)點，然后配置好rel、type、href等必需的屬性值，以便瀏覽器能正常解析鏈接的資源。

接著，查找到head節(jié)點，將節(jié)點插入。

三、實現(xiàn)css資源下載狀態(tài)監(jiān)控的pollCss方法

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

3.1 判斷的主要依據(jù)

瀏覽器加載css資源，會給該link節(jié)點生成sheet屬性，可以根據(jù)瀏覽器不同，讀取sheet屬性相關(guān)內(nèi)容，來判斷是否已經(jīng)加載完成。所以第一句語句var sheet = node.sheet首先要做的就是獲取sheet屬性值。

3.2 普通瀏覽器判斷

try{
    if(sheet.cssRules){
        isLoaded = true;
    }
}catch(ex){
    // 火狐特殊版本，通過特定值獲知是否下載成功
    // 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資源已經(jīng)鏈接進頁面，并開始解析。此時可以判斷資源加載成功。

如果讀取失敗，則根據(jù)拋錯內(nèi)容，判斷是否有特定name屬性ex.name === "NS_ERROR_DOM_SECURITY_ERR"。存在，則代表是低版本火狐（9.0以前），且資源已經(jīng)加載成功。

3.3 舊webkit內(nèi)核瀏覽器判斷

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

如果是webkit舊內(nèi)核瀏覽器，則只需要判斷sheet屬性值存在，則代表資源加載完成。

3.4 增加多次循環(huán)檢測

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

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

3.5 輪詢?nèi)蒎e（針對Sea.js源碼的優(yōu)化）

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

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

這里的閾值是輪詢10分鐘，如果10分鐘后，仍然不符合條件，則默認資源已下載完成，執(zhí)行callback方法，并清空node引用。

四、確定觸發(fā)pollCss檢查的時機

4.1 pollCss輪詢的應用場景

當瀏覽器內(nèi)核是舊的webkit內(nèi)核時，或者不支持節(jié)點觸發(fā)onload方法時，才使用pollCss進行輪詢。

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

五、現(xiàn)代瀏覽器直接用onload和onreadystatechange做判斷

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

5.1 onload方法

function onload() {
    // 確保只跑一次下載操作
    node.onload = node.onerror = node.onreadystatechange = null;

    // 清空node引用，在低版本IE，不清除會造成內(nèi)存泄露
    node = null;
    callback();
}

onload方法觸發(fā)執(zhí)行后，應立即將多個相關(guān)方法進行重置，以避免callback多次觸發(fā)。

node = null;將node重置為null，是為了避免低版本的IE出現(xiàn)內(nèi)存溢出問題，及時清除沒用的dom節(jié)點。

最后，執(zhí)行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庫使用人群很廣泛，如果出問題，作者也會及時修復。所以，以此代碼為藍本進行改造契合公司的用戶群，避免大面積出現(xiàn)問題。

以上所述是小編給大家介紹的深入解析動態(tài)加載css的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

Tag：動態(tài)加載 css

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

深入解析動態(tài)加載css的實現(xiàn)方法

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容