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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
网页自动跳转代码收集
Sep 27 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
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
session 的生命周期是多长
2006/10/09 PHP
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
turn.js异步加载实现翻书效果
2019/07/25 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
使用python绘制温度变化雷达图
2019/10/18 Python
pycharm安装及如何导入numpy
2020/04/03 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
集体备课反思
2014/02/12 职场文书
毕业寄语大全
2014/04/09 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
小王子读书笔记
2015/06/29 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python