Web 前端設計模式 Dom重構

1. 設計場景

某個週末的早上躲在家裡睡大覺，突然我們老大（億網公司的技術總監）乙個**撥過來，他說：智華，你趕緊從床上跳起來，不要刷牙，不要洗臉，滾到電腦面前，開啟電腦，我們的印刷網（出問題了...

此時不能責怪公司的伺服器爛，網速卡之類的，那樣很可能會導致老大對我一頓胖揍甚至扣獎金...

所以只能從**效能方面進行改良...

2.設計目標

減少頁面載入時不必要的元素，構建乙個輕量級的web頁面...

3.解決方案

當初我接到這個case的時候，最初的設計方案毫無疑問是隱藏幀做法，這是最好用也是最容易簡單的，它的方法就是將四個標籤tab（畫冊，手提袋，掛曆，包裝）所對應的四個div全部載入頁面，並在載入時顯示第乙個tab（畫冊）的div，在滑鼠輪滑過tab的時候顯示相應tab標籤的div，隱藏其他tab標籤的div...

因此才會出現上述的情況，我想起我前一天晚上看的一本web設計模式的書，上面的一段話引曾起我的注意：使用頁面元素更新來重構dom樹往往比隱藏幀的效能要高得多...所以此時我的想法便是重構dom樹...

web頁面的原始碼很簡單，重要的在於

id="tabcontent" 的那個div，它是關鍵，它裡面元素的變換取決於上面的四個標籤,當滑鼠經過時就將不同的內容更新到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)
}//更新資料

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

//隱藏標籤
function tabs(i)
$("#tabcontent"+i).show();
var num,ids,ordnum;
var len= $("#tabcontent"+i).length;//這句話很重要，它是杜絕將元素重複載入的判斷（如果該元素存在，就不需再次追加）
if(len==0)
}}//載入資料

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

如圖：

Web 前端設計模式 Dom重構

web前端 DOM操作

Web前端之DOM介紹

Web前端設計模式 jQuery驗證外掛程式

Web 前端設計模式 Dom重構

web前端 DOM操作

Web前端之DOM介紹

Web前端設計模式 jQuery驗證外掛程式

相關推薦