一、方法引用來(lái)源和應(yīng)用
此動(dòng)態(tài)加載css方法 loadCss，剝離自Sea.js，并做了進(jìn)一步的優(yōu)化（優(yōu)化代碼后續(xù)會(huì)進(jìn)行分析）。
因?yàn)楣卷?xiàng)目需要用到懶加載來(lái)提高網(wǎng)站加載速度，所以將非首屏渲染必需的css文件進(jìn)行動(dòng)態(tài)加載操作。
二、優(yōu)化后的完整代碼
/** @function 動(dòng)態(tài)加載css文件* @param {string} options.url -- css資源路徑* @param {function} options.callback -- 加載后回調(diào)函數(shù)* @param {string} options.id -- link標(biāo)簽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，不清除會(huì)造成內(nèi)存泄露 node = null; callback(); } // 循環(huán)判斷css是否已加載成功 /* * @param node -- link節(jié)點(diǎn) * @param callback -- 回調(diào)函數(shù) * @param step -- 計(jì)步器，避免無(wú)限循環(huán) */ function pollCss(node, callback, step){ var sheet = node.sheet, isLoaded; step += 1; // 保護(hù)，大于10分鐘，則不再輪詢(xún) 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){ // 火狐特殊版本，通過(guò)特定值獲知是否下載成功 // 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是為了給下載的樣式留夠渲染的時(shí)間 callback(); }else{ pollCss(node, callback, step); } }, 20); }}三、解析代碼
一、參數(shù)
本方法支持三個(gè)參數(shù)，可進(jìn)行擴(kuò)展。
1.1 opations.url
url是需要引入的css資源路徑，也即標(biāo)簽的href屬性?xún)?nèi)容。
1.2 options.id
id是標(biāo)簽的id屬性。這個(gè)參數(shù)為非必要參數(shù)，可不傳。主要作用是標(biāo)記當(dāng)前標(biāo)簽，方便js進(jìn)行查找，以確定是否已加載某個(gè)css文件。
1.3 options.callback
callback是css文件加載完成后會(huì)調(diào)用的回調(diào)函數(shù)。也存在特殊場(chǎng)景下，文件加載失敗，回調(diào)函數(shù)仍舊執(zhí)行的情況。
二、生成標(biāo)簽，并插入頭部head，進(jìn)行加載資源
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);生成一個(gè)dom節(jié)點(diǎn)，然后配置好rel、type、href等必需的屬性值，以便瀏覽器能正常解析鏈接的資源。
接著，查找到head節(jié)點(diǎn)，將節(jié)點(diǎn)插入。
三、實(shí)現(xiàn)css資源下載狀態(tài)監(jiān)控的pollCss方法
pollCss方法的職責(zé)是判斷插入的link節(jié)點(diǎn)，也即node變量反饋資源是否已加載完成。
3.1 判斷的主要依據(jù)
瀏覽器加載css資源，會(huì)給該link節(jié)點(diǎn)生成sheet屬性，可以根據(jù)瀏覽器不同，讀取sheet屬性相關(guān)內(nèi)容，來(lái)判斷是否已經(jīng)加載完成。所以第一句語(yǔ)句var sheet = node.sheet首先要做的就是獲取sheet屬性值。
3.2 普通瀏覽器判斷
try{ if(sheet.cssRules){ isLoaded = true; }}catch(ex){ // 火狐特殊版本，通過(guò)特定值獲知是否下載成功 // 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)頁(yè)面，并開(kāi)始解析。此時(shí)可以判斷資源加載成功。
如果讀取失敗，則根據(jù)拋錯(cuò)內(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)檢測(cè)
setTimeout(function() { if(isLoaded){ // 延遲20ms是為了給下載的樣式留夠渲染的時(shí)間 callback(); }else{ pollCss(node, callback, step); }}, 20);觸發(fā)pollCss方法后，可能第一次檢測(cè)sheet值，會(huì)檢測(cè)不到。也就代表還沒(méi)加載完成。所以需要進(jìn)行輪詢(xún)。這里是隔20ms進(jìn)行一次問(wèn)詢(xún)，直到資源加載完成為止。
3.5 輪詢(xún)?nèi)蒎e(cuò)（針對(duì)Sea.js源碼的優(yōu)化）
css資源加載也有可能出錯(cuò)的時(shí)機(jī)存在，而且存在不觸發(fā)onerror方法的可能性。如果不加一個(gè)保護(hù)，則輪詢(xún)可能一直持續(xù)下去，所以需要有一個(gè)極限閾值。
var protectNum = 300000, // 閾值10分鐘，一秒鐘執(zhí)行pollCss 500次 step = 0;// 很多代碼....step += 1;// 保護(hù)，大于10分鐘，則不再輪詢(xún)if(step > protectNum){ isLoaded = true; // 清空node引用 node = null; callback(); return;}這里的閾值是輪詢(xún)10分鐘，如果10分鐘后，仍然不符合條件，則默認(rèn)資源已下載完成，執(zhí)行callback方法，并清空node引用。
四、確定觸發(fā)pollCss檢查的時(shí)機(jī)
4.1 pollCss輪詢(xún)的應(yīng)用場(chǎng)景
當(dāng)瀏覽器內(nèi)核是舊的webkit內(nèi)核時(shí)，或者不支持節(jié)點(diǎn)觸發(fā)onload方法時(shí)，才使用pollCss進(jìn)行輪詢(xún)。
// for Old WebKit and Old Firefoxif (isOldWebKit || !supportOnload) { // Begin after node insertion setTimeout(function() { pollCss(node, callback, 0); }, 1); return;}五、現(xiàn)代瀏覽器直接用onload和onreadystatechange做判斷
現(xiàn)代瀏覽器用這種方式判斷，可以避免輪詢(xún)的弊端。判斷也更加準(zhǔn)確及時(shí)。
5.1 onload方法
function onload() { // 確保只跑一次下載操作 node.onload = node.onerror = node.onreadystatechange = null; // 清空node引用，在低版本IE，不清除會(huì)造成內(nèi)存泄露 node = null; callback();}onload方法觸發(fā)執(zhí)行后，應(yīng)立即將多個(gè)相關(guān)方法進(jìn)行重置，以避免callback多次觸發(fā)。
node = null;將node重置為null，是為了避免低版本的IE出現(xiàn)內(nèi)存溢出問(wèn)題，及時(shí)清除沒(méi)用的dom節(jié)點(diǎn)。
最后，執(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方法進(jìn)行改造的原因：因?yàn)樵搄s庫(kù)使用人群很廣泛，如果出問(wèn)題，作者也會(huì)及時(shí)修復(fù)。所以，以此代碼為藍(lán)本進(jìn)行改造契合公司的用戶(hù)群，避免大面積出現(xiàn)問(wèn)題。
以上所述是小編給大家介紹的深入解析動(dòng)態(tài)加載css的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
