Javascript动态生成表格的性能调优
客户端动态输出table数据并展示表格,是web应用中较为常见的工作。对于循环打印输出tr,td本身是一件非常僵硬和暴力的编程办法,再加上最后绑定元素innerHTML字符流输出,
系统所消耗的性能代价是非常高昂的,如果我们需要展现的数据非常庞大时,那么代价也是成倍的。然而这种动态输出表格的方法是大多数客户端程序员最常用的方法。那么基于最常用的方法,
如何才能降低性能成本,改善用户体验,快速安全的显示我们所需要的数据呢?
我认为从根本上调优需要从两个方面去考虑。
1:server的数据吐出和client的数据解析。这里涉及的知识点较多,今后再做详细的说明。但是对于较为复杂的xml的数据格式来说,client的解析应该用xpath寻址和dom内置对象相结合的方法,高速定位。
2:DHTML的优化。包括dom,css,js的优化,也就是MVC(model,
view, control)的优化。
这里我们用js动态生成一个table, 构建一个3000行,8列的表格,代码分多个版本,便于清晰的比较每个版本不同的性能消耗。
vision
0.1 【耗时14694ms】
貌似以下的写法是没有任何错误,但是确是最暴力,效率最低,性能消耗最大的写法。对于大量的数据行和列,用for循环拼接元素字符串,最后innerHTML输出是不可取的。
3000记录页面加载耗时14694毫秒,近15秒。这样的页面数据加载是近乎灾难的,应该竭力避免。
<html>
<body>
<div
id="tableDiv"></div>
<script>
var maxRow =3000;
var maxCol = 8;
var strTbl = "<table
border='1'><tbody>";
var strTbody = '';
for(var i = 0; i < maxRow; i++){
strTbody +="<tr>";
for(var j = 0; j < maxCol; j++){
strTbody +=
"<td>test</td>";
}
strTbody += "</tr>";
}
strTbl = strTbody +
"</tbody></table>";
var obj =
document.getElementById("tableDiv");
obj.innerHTML = strTbl;
</script>
</body>
</html>
vision 0.2 【耗时3623ms】
这个版本的代码有非常大的改进,采用DOM技术动态添加元素,说明在需要处理展现大量数据的情况下,运用DOM快速定位并添加绑定元素的方法,效率远比拼接html元素字符串的方法要高许多。
整个页面加载完成所耗的时间为3
相关文档:
每一项都是js中的小技巧,但十分的实用!
1.document.write(""); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById("表单中元素的 ......
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> JavaScript: xm ......
在程序员杂志上看到一篇短文《前端开发工具概览》。觉得很有实用价值。现总结如下:
一、调试工具
1.firebug
2.Web Developer Toolbar--调整页面的各个细节
3.IE Developer Toolbar--调试IE的HTML和CSS
4.Companion.JS--调试IE的Javascript
5.Fiddler--Web调试代理,记录本机到互联网的所有HTTP(S)请求。
二、测试工 ......
下面都是我收集的一些比较常用的正则表达式,因为平常可能在表单验证的时候,用到的比较多。特发出来,让各位朋友共同使用。呵呵。
匹配中文字符的正则表达式: [u4e00-u9fa5]
评注:匹配中文还真是个头疼的事,有了这个表达式就好办了
匹配双字节字符(包括汉字在内):[^x00-xff]
评注:可以用来计算字符串的长度(一个 ......
a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP
<a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接
<a href="#" onclick="javascript:return false;"> 作用同上,不同浏览器会有差异。
点击链接后,不想使页面滚到页首,就用href="javascript:v ......