DIV CSS 佈局教程網

1. 設計場景


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

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

2.設計目標
減少頁面載入時不必要的元素，構建一個輕量級的Web頁面...

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

Web頁面的源碼很簡單，重要的在於 id="tabcontent" 的那個Div，它是關鍵，它裡面元素的變換取決於上面的四個<li>標簽,當鼠標經過時就將不同的內容更新到Div裡面，這使得頁面不用一開始就將所有的元素都載入，並進行不厭其煩的隱藏和顯示，實現代碼如下。。。
這樣，就有四個id分別tabcontent1,tabcontent2,tabcontent3,tabcontent4為Div不斷的輪換 替換進id="tabcontent"的 Div裡面 ，嘗試一下，確實性能高了很多...
代碼如下:
<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>

代碼如下:
/隱藏標簽
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;}
}
}

//更新數據
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);
}

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

因此，我又做了一個小小的改動，那就是使用Dom重構+隱藏幀用法，在頁面第一次載入的時候，先載入的是第一個標簽所對應的Div，即畫冊所對應的Div，當鼠標移到其他tab標簽時候，追加該標簽所對應的元素（該元素若存在則去掉隱藏並顯示，不存在則追加），並隱藏其他Tab標簽所對應的Div標簽...該方法有個名稱，叫做“多階段下載...”，這樣就不用每次都進行元素更新，代碼如下...
代碼如下:
//隱藏標簽
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;//這句話很重要，它是杜絕將元素重復載入的判斷（如果該元素存在，就不需再次追加）
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;}
}
}
}

//載入數據
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);
}

4.設計小結
網站的性能提高了，既不會出現在首次載入的時候頁面元素負荷過重而造成的延遲，也不會因為Dom樹的不斷更新而造成頁面顯示性能低下...

如圖：


源碼下載 /201010/yuanma/DomForm.rar