快捷導(dǎo)航

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

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

首頁(yè)那邊有一個(gè)產(chǎn)品瀏覽的版塊在延遲載入的時(shí)候，將我所有的隱藏幀的項(xiàng)都顯示出來，因?yàn)槁龑?dǎo)致頁(yè)面變形。

1. 設(shè)計(jì)場(chǎng)景

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

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

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

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

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

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

 
<div class="menu"> 
<ul> 
<li><a href="#" id="tablink1" onclick="return false">包裝盒 </a></li> 
<li><a href="#" id="tablink2" onclick="return false">畫冊(cè) </a></li> 
<li><a href="#" id="tablink3" onclick="return false">手提袋 </a></li> 
<li><a href="#" id="tablink4" onclick="return false">三折頁(yè) </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é)束，可是我突然想起一個(gè)問題，這種做法其實(shí)和jQuery中的hover思想是一樣的，而這邊是進(jìn)行輪詢的Dom元素更新，也就是說每一次鼠標(biāo)移動(dòng)標(biāo)簽都要有一些數(shù)據(jù)要發(fā)送和接收，相對(duì)與上面小段數(shù)據(jù)是沒什么影響，但是大的Case中使用這種方法就不可行，因?yàn)樗腄om元素更新可能是十幾kb甚至幾十kb的數(shù)據(jù)流，這無疑給Web頁(yè)面的性能帶來極大的挑戰(zhàn)...

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