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

更新時間：2017年01月18日 08:51:41 作者：wall''''s

本文主要介紹了動態(tài)加載css的方法實現(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屬性相關內(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í)行后，應立即將多個相關方法進行重置，以避免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)問題。

在產(chǎn)品上應用該方法后，到目前為止，未有客戶反饋樣式異常問題。所以，看本文章的程序猿們，可以放心使用。

ps：公司用戶群有1千多萬的用戶量，涉及大大小小繁雜的瀏覽器，從IE6到chrome都有。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

JavaScript 繼承封裝多態(tài)實現(xiàn)及原理詳解
這篇文章主要介紹了JavaScript 繼承封裝多態(tài)實現(xiàn)及原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07
使用 electron 實現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動畫、窗體3D翻轉)
這篇文章主要介紹了使用 electron 實現(xiàn)類似新版 QQ 的登錄界面效果(陰影、背景動畫、窗體3D翻轉),其實主要用到的就是 CSS3 的效果：邊框圓角、陰影，3D變換，實現(xiàn)代碼超級簡單，需要的朋友可以參考下
2018-10-10
關于this和self的使用說明
剛接觸python的時候，最不習慣的事情，就是每個方法都要加一個self。無論Javascript還是C#，都直接一個this搞定，干嘛非要加一個變量self。
2010-08-08
Webpack如何引入bootstrap的方法
本篇文章主要介紹了Webpack如何引入bootstrap的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
JavaScript函數(shù)獲取事件源的小例子
這篇文章主要介紹了JavaScript函數(shù)獲取事件源具體實現(xiàn)，需要的朋友可以參考下
2014-05-05
JavaScript讓Textarea支持tab按鍵的方法
這篇文章主要介紹了JavaScript讓Textarea支持tab按鍵的方法,涉及javascript針對textarea實現(xiàn)響應tab按鍵的方法,需要的朋友可以參考下
2015-06-06
js原生代碼實現(xiàn)輪播圖的實例講解
下面小編就為大家?guī)硪黄猨s原生代碼實現(xiàn)輪播圖的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
15個頂級開源JavaScript框架和庫
今天小編就為大家分享一篇關于15個頂級開源JavaScript框架和庫的文章，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-10-10
javascript實現(xiàn)簡單頁面倒計時
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單頁面倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
JavaScript?中的單例內(nèi)置對象Global?與?Math
這篇文章主要介紹了JavaScript?中的單例內(nèi)置對象Global與Math，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-07-07