深入解析動態(tài)加載css的實現(xiàn)方法
我要評論一、方法引用來源和應(yīng)用
此動態(tài)加載css方法 loadCss，剝離自Sea.js，并做了進(jìn)一步的優(yōu)化（優(yōu)化代碼后續(xù)會進(jìn)行分析）。
因為公司項目需要用到懶加載來提高網(wǎng)站加載速度，所以將非首屏渲染必需的css文件進(jìn)行動態(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標(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，不清除會造成內(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;
// 保護(hù)，大于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ù)，可進(jìn)行擴(kuò)展。
1.1 opations.url
url是需要引入的css資源路徑，也即標(biāo)簽的href屬性內(nèi)容。
1.2 options.id
id是標(biāo)簽的id屬性。這個參數(shù)為非必要參數(shù)，可不傳。主要作用是標(biāo)記當(dāng)前標(biāo)簽，方便js進(jìn)行查找，以確定是否已加載某個css文件。
1.3 options.callback
callback是css文件加載完成后會調(diào)用的回調(diào)函數(shù)。也存在特殊場景下，文件加載失敗，回調(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);
生成一個dom節(jié)點，然后配置好rel、type、href等必需的屬性值，以便瀏覽器能正常解析鏈接的資源。
接著，查找到head節(jié)點，將節(jié)點插入。
三、實現(xiàn)css資源下載狀態(tài)監(jiān)控的pollCss方法
pollCss方法的職責(zé)是判斷插入的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)頁面，并開始解析。此時可以判斷資源加載成功。
如果讀取失敗，則根據(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值，會檢測不到。也就代表還沒加載完成。所以需要進(jìn)行輪詢。這里是隔20ms進(jìn)行一次問詢，直到資源加載完成為止。
3.5 輪詢?nèi)蒎e（針對Sea.js源碼的優(yōu)化）
css資源加載也有可能出錯的時機(jī)存在，而且存在不觸發(fā)onerror方法的可能性。如果不加一個保護(hù)，則輪詢可能一直持續(xù)下去，所以需要有一個極限閾值。
var protectNum = 300000, // 閾值10分鐘，一秒鐘執(zhí)行pollCss 500次
step = 0;
// 很多代碼....
step += 1;
// 保護(hù)，大于10分鐘，則不再輪詢
if(step > protectNum){
isLoaded = true;
// 清空node引用
node = null;
callback();
return;
}
這里的閾值是輪詢10分鐘，如果10分鐘后，仍然不符合條件，則默認(rèn)資源已下載完成，執(zhí)行callback方法，并清空node引用。
四、確定觸發(fā)pollCss檢查的時機(jī)
4.1 pollCss輪詢的應(yīng)用場景
當(dāng)瀏覽器內(nèi)核是舊的webkit內(nèi)核時，或者不支持節(jié)點觸發(fā)onload方法時，才使用pollCss進(jìn)行輪詢。
// 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)代瀏覽器用這種方式判斷，可以避免輪詢的弊端。判斷也更加準(zhǔn)確及時。
5.1 onload方法
function onload() {
// 確保只跑一次下載操作
node.onload = node.onerror = node.onreadystatechange = null;
// 清空node引用，在低版本IE，不清除會造成內(nèi)存泄露
node = null;
callback();
}
onload方法觸發(fā)執(zhí)行后，應(yīng)立即將多個相關(guān)方法進(jì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方法進(jìn)行改造的原因：因為該js庫使用人群很廣泛，如果出問題，作者也會及時修復(fù)。所以，以此代碼為藍(lán)本進(jìn)行改造契合公司的用戶群，避免大面積出現(xiàn)問題。
以上所述是小編給大家介紹的深入解析動態(tài)加載css的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- Web前端圖片加載的方式多種多樣,其所產(chǎn)生的HTTP請求也各異,這里我們就來列舉CSS控制前端圖片HTTP請求的各種情況示例,需要的朋友可以參考下2016-06-16
css全屏背景圖片設(shè)置,django加載圖片路徑詳解
下面小編就為大家?guī)硪黄猚ss全屏背景圖片設(shè)置,django加載圖片路徑詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-01
純CSS3實現(xiàn)的綠色Loading加載動畫特效源碼
這是一款由純CSS3實現(xiàn)的綠色Loading加載動畫特效源碼，有多種loading樣式供用戶選擇，采用純css3實現(xiàn)，沒有引入任何外部圖形元素2016-05-27
jQuery+css3實現(xiàn)的點擊下載按鈕3D加載downlading進(jìn)度特效源碼
是一段點擊下載按鈕后，當(dāng)前下載圖標(biāo)將進(jìn)行3D翻轉(zhuǎn)，隨后在翻轉(zhuǎn)后的圖標(biāo)中進(jìn)行downlading進(jìn)度加載動畫效果代碼，本段代碼適應(yīng)于所有網(wǎng)頁使用，有需要的朋友們可以前來下載使2016-05-09- 這篇文章主要介紹了CSS實現(xiàn)彈簧效果的旋轉(zhuǎn)加載動畫的相關(guān)資料，像是彈簧在不斷伸縮，顯示加載進(jìn)度，感興趣的小伙伴們可以參考一下2016-04-25
CSS實現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動畫
這篇文章主要介紹了CSS實現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動畫的相關(guān)代碼，運(yùn)用CSS3的border-radius圓角屬性、box-shadow陰影屬性等屬性制作出來的，感興趣的小伙伴2016-04-25CSS實現(xiàn)圓環(huán)旋轉(zhuǎn)加載動畫
這篇文章主要介紹了CSS實現(xiàn)圓環(huán)旋轉(zhuǎn)加載動畫，一個圓環(huán)表示加載進(jìn)度，像一個時鐘順時針旋轉(zhuǎn)一圈，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-25- 這篇文章主要介紹了CSS實現(xiàn)橫向粒子變動加載動畫的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-25
- 這篇文章主要為大家詳細(xì)介紹了CSS3實現(xiàn)粒子旋轉(zhuǎn)伸縮加載動畫的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-22
