Web 前端设计模式

Web 前端模式 Web 前端设计模式首页那边有一个产品浏览的版块在延迟载入的时候，将我所有的隐藏帧的项都显示出来，因为慢导致页面变形。 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 ul li a href="#" id="tablink1" 包装盒 /a /li li a href="#" id="tablink2" 画册 /a /li li a href="#" id="tablink3" 手提袋 /a /li li a href="#" id="tablink4" 三折页 /a /li /ul /div div 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 id='tabcontent"+i+"' str+=" div id='"+type+"demo' str+=" div id='"+type+"indemo' str+=" div id='"+type+"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' /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 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 id='tabcontent"+i+"' str+=" div id='"+type+"demo' str+=" div id='"+type+"indemo' str+=" div id='"+type+"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' /div str+=" /div /div div $("#tabcontent").append(str); } 4.设计小结 网站的性能提高了，既不会出现在首次载入的时候页面元素负荷过重而造成的延迟，也不会因为Dom树的不断更新而造成页面显示性能低下... 如图: 源码下载