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


Posted in Javascript onOctober 22, 2010

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树的不断更新而造成页面显示性能低下...

如图:
Web 前端设计模式--Dom重构 提高显示性能

源码下载 /201010/yuanma/DomForm.rar

Javascript 相关文章推荐
js原型链原理看图说明
Jul 07 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
jQuery选择器实例应用
Jan 05 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
jQuery中add实现同时选择两个id对象
Oct 22 #Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 #Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 #Javascript
使用jQuery模板来展现json数据的代码
Oct 22 #Javascript
jQuery 表单验证扩展(四)
Oct 20 #Javascript
jQuery 表单验证扩展(三)
Oct 20 #Javascript
jQuery 表单验证扩展代码(二)
Oct 20 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
javascript实现按回车键切换焦点
2015/02/09 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python Django模板的使用方法
2016/01/14 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Python实现SMTP邮件发送
2020/06/16 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
python操作toml文件的示例代码
2020/11/27 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
预备党员的自我评价
2014/03/12 职场文书
伊索寓言教学反思
2014/05/01 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android