Web 前端设计模式–Dom重构 提高显示性能

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;}