快捷導(dǎo)航

Web 前端設(shè)計模式--Dom重構(gòu) 提高顯示性能

更新時間：2010年10月22日 15:13:49 作者：

首頁那邊有一個產(chǎn)品瀏覽的版塊在延遲載入的時候，將我所有的隱藏幀的項都顯示出來，因為慢導(dǎo)致頁面變形。

1. 設(shè)計場景

首頁那邊有一個產(chǎn)品瀏覽的版塊在延遲載入的時候，將我所有的隱藏幀的項都顯示出來（如圖，我本意是顯示兩行圖片，可是在載入卡住，將下面一些隱藏元素都顯示出來了），整體畫面粗糙凌亂，整個網(wǎng)頁完全載入并順利運行的時間延遲超過5秒，在這種交互性極強(qiáng)的在線印刷網(wǎng)站是非常致命的，這給用戶一種極其糟糕的Web體驗，并歸結(jié)為網(wǎng)站的不穩(wěn)定...

此時不能責(zé)怪公司的服務(wù)器爛，網(wǎng)速卡之類的，那樣很可能會導(dǎo)致老大對我一頓胖揍甚至扣獎金...
所以只能從網(wǎng)站性能方面進(jìn)行改良...

2.設(shè)計目標(biāo)
減少頁面載入時不必要的元素，構(gòu)建一個輕量級的Web頁面...

3.解決方案
當(dāng)初我接到這個Case的時候，最初的設(shè)計方案毫無疑問是隱藏幀做法，這是最好用也是最容易簡單的，它的方法就是將四個標(biāo)簽tab（畫冊，手提袋，掛歷，包裝）所對應(yīng)的四個Div全部載入頁面，并在載入時顯示第一個tab（畫冊）的Div，在鼠標(biāo)輪滑過tab的時候顯示相應(yīng)tab標(biāo)簽的Div，隱藏其他tab標(biāo)簽的Div...
因此才會出現(xiàn)上述的情況，我想起我前一天晚上看的一本W(wǎng)eb設(shè)計模式的書，上面的一段話引曾起我的注意：使用頁面元素更新來重構(gòu)Dom樹往往比隱藏幀的性能要高得多...所以此時我的想法便是重構(gòu)Dom樹...

Web頁面的源碼很簡單，重要的在于 id="tabcontent" 的那個Div，它是關(guān)鍵，它里面元素的變換取決于上面的四個<li>標(biāo)簽,當(dāng)鼠標(biāo)經(jīng)過時就將不同的內(nèi)容更新到Div里面，這使得頁面不用一開始就將所有的元素都載入，并進(jìn)行不厭其煩的隱藏和顯示，實現(xiàn)代碼如下。。。
這樣，就有四個id分別tabcontent1,tabcontent2,tabcontent3,tabcontent4為Div不斷的輪換替換進(jìn)id="tabcontent"的 Div里面，嘗試一下，確實性能高了很多...

復(fù)制代碼代碼如下:

 
<div class="menu"> 
<ul> 
<li><a href="#" id="tablink1" onclick="return false">包裝盒 </a></li> 
<li><a href="#" id="tablink2" onclick="return false">畫冊 </a></li> 
<li><a href="#" id="tablink3" onclick="return false">手提袋 </a></li> 
<li><a href="#" id="tablink4" onclick="return false">三折頁 </a></li> 
</ul> 
</div> 
<div class="border2 w1" id="tabcontent"> 
</div> 

復(fù)制代碼代碼如下:

 
/隱藏標(biāo)簽 
function tabs(i) 
{ 
var num,ids,ordnum; 
switch(i) 
{ 
case 1:{ append(1,1,"f"); break;} 
case 2:{ append(2,5,"s"); break;} 
case 3:{ append(3,9,"t"); break;} 
case 4:{ append(4,13,"fo"); break;} 
} 
} 

//更新數(shù)據(jù) 
function append(i,j,type) 
{ 
var str="<div class='show_img h3' id='tabcontent"+i+"'>"; 
str+="<div id='"+type+"demo' class='demo'>"; 
str+="<div id='"+type+"indemo' class='indemo'>"; 
str+="<div id='"+type+"demo1' class='demo1'>"; 
str+="<a href='#'><img src='img/"+j+".png' border='0' /></a>"; 
str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>"; 
str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>"; 
str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>"; 
str+="</div>"; 
str+="<div id='"+type+"demo2' class='demo2'></div>"; 
str+="</div></div><div>"; 
$("#tabcontent").html(str); 
} 

到這里應(yīng)該算結(jié)束，可是我突然想起一個問題，這種做法其實和jQuery中的hover思想是一樣的，而這邊是進(jìn)行輪詢的Dom元素更新，也就是說每一次鼠標(biāo)移動標(biāo)簽都要有一些數(shù)據(jù)要發(fā)送和接收，相對與上面小段數(shù)據(jù)是沒什么影響，但是大的Case中使用這種方法就不可行，因為它的Dom元素更新可能是十幾kb甚至幾十kb的數(shù)據(jù)流，這無疑給Web頁面的性能帶來極大的挑戰(zhàn)...

因此，我又做了一個小小的改動，那就是使用Dom重構(gòu)+隱藏幀用法，在頁面第一次載入的時候，先載入的是第一個標(biāo)簽所對應(yīng)的Div，即畫冊所對應(yīng)的Div，當(dāng)鼠標(biāo)移到其他tab標(biāo)簽時候，追加該標(biāo)簽所對應(yīng)的元素（該元素若存在則去掉隱藏并顯示，不存在則追加），并隱藏其他Tab標(biāo)簽所對應(yīng)的Div標(biāo)簽...該方法有個名稱，叫做“多階段下載...”，這樣就不用每次都進(jìn)行元素更新，代碼如下...

復(fù)制代碼代碼如下:

 
//隱藏標(biāo)簽 
function tabs(i) 
{ 
for(var j=1;j<5;j++) 
{ 
$("#tabcontent"+j).hide(); 
} 
$("#tabcontent"+i).show(); 
var num,ids,ordnum; 
var len= $("#tabcontent"+i).length;//這句話很重要，它是杜絕將元素重復(fù)載入的判斷（如果該元素存在，就不需再次追加） 
if(len==0) 
{ 
switch(i) 
{ 
case 1:{ append(1,1,"f"); break;} 
case 2:{ append(2,5,"s"); break;} 
case 3:{ append(3,9,"t"); break;} 
case 4:{ append(4,13,"fo"); break;} 
} 
} 
} 

//載入數(shù)據(jù) 
function append(i,j,type) 
{ 
var str="<div class='show_img h3' id='tabcontent"+i+"'>"; 
str+="<div id='"+type+"demo' class='demo'>"; 
str+="<div id='"+type+"indemo' class='indemo'>"; 
str+="<div id='"+type+"demo1' class='demo1'>"; 
str+="<a href='#'><img src='img/"+j+".png' border='0' /></a>"; 
str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>"; 
str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>"; 
str+="<a href='#'><img src='img/"+ (++j) +".png' border='0' /></a>"; 
str+="</div>"; 
str+="<div id='"+type+"demo2' class='demo2'></div>"; 
str+="</div></div><div>"; 
$("#tabcontent").append(str); 
} 