一、方法引用來源和應用
此動態加載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){ // 火狐特殊版本,通過特定值獲知是否下載成功 // 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){ // 火狐特殊版本,通過特定值獲知是否下載成功 // 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"。存在,則代表是低版本火狐(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 Firefox if (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庫使用人群很廣泛,如果出問題,作者也會及時修復。所以,以此代碼為藍本進行改造契合公司的用戶群,避免大面積出現問題。
以上所述是小編給大家介紹的深入解析動態加載css的實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!