一、方法引用來源和應用
此動態載入css方法 loadCss，剝離自Sea.js，並做了進一步的優化（優化程式碼後續會進行分析）。
因為公司專案需要用到懶載入來提高網站載入速度，所以將非首屏渲染必需的css檔案進行動態載入操作。
二、優化後的完整程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
/* * @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資源路徑，也即<link>標籤的href屬性內容。
1.2 options.id
id是<link>標籤的id屬性。這個引數為非必要引數，可不傳。主要作用是標記當前<link>標籤，方便js進行查詢，以確定是否已載入某個css檔案。
1.3 options.callback
callback是css檔案載入完成後會呼叫的回撥函式。也存在特殊場景下，檔案載入失敗，回撥函式仍舊執行的情況。
二、生成<link>標籤，並插入頭部head，進行載入資源
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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節點<link>，然後配置好rel、type、href等必需的屬性值，以便瀏覽器能正常解析連結的資源。
接著，查詢到head節點，將<link>節點插入。
三、實現css資源下載狀態監控的pollCss方法
pollCss方法的職責是判斷插入的link節點，也即node變數反饋資源是否已載入完成。
3.1 判斷的主要依據
瀏覽器載入css資源，會給該link節點生成sheet屬性，可以根據瀏覽器不同，讀取sheet屬性相關內容，來判斷是否已經載入完成。所以第一句語句var sheet = node.sheet首先要做的就是獲取sheet屬性值。
3.2 普通瀏覽器判斷
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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核心瀏覽器判斷
|
1 2 3 4 5 6 7 8 |
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 增加多次迴圈檢測
|
1 2 3 4 5 6 7 8 |
setTimeout(function() { if(isLoaded){ // 延遲20ms是為了給下載的樣式留夠渲染的時間 callback(); }else{ pollCss(node, callback, step); } }, 20); |
觸發pollCss方法後，可能第一次檢測sheet值，會檢測不到。也就代表還沒載入完成。所以需要進行輪詢。這裡是隔20ms進行一次問詢，直到資源載入完成為止。
3.5 輪詢容錯（針對Sea.js原始碼的優化）
css資源載入也有可能出錯的時機存在，而且存在不觸發onerror方法的可能性。如果不加一個保護，則輪詢可能一直持續下去，所以需要有一個極限閾值。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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核心時，或者不支援<link>節點觸發onload方法時，才使用pollCss進行輪詢。
|
1 2 3 4 5 6 7 8 |
// 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方法
|
1 2 3 4 5 6 7 8 9 |
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方法瀏覽器的處理
|
1 2 3 4 5 6 7 |
if(supportOnload){ node.onload = onload; node.onerror = function() { // 載入失敗(404) onload(); } } |
5.3 不支援onload方法瀏覽器的處理
|
1 2 3 4 5 6 7 8 9 |
if(supportOnload){ // 程式碼... }else{ node.onreadystatechange = function() { if (/loaded|complete/.test(node.readyState)) { onload(); } } } |
四、後記
選擇剝離Sea.js方法進行改造的原因：因為該js庫使用人群很廣泛，如果出問題，作者也會及時修復。所以，以此程式碼為藍本進行改造契合公司的使用者群，避免大面積出現問題。
在產品上應用該方法後，到目前為止，未有客戶反饋樣式異常問題。所以，看本文章的程式猿們，可以放心使用。
ps：公司使用者群有1千多萬的使用者量，涉及大大小小繁雜的瀏覽器，從IE6到chrome都有。