易截截图软件、单文件、免安装、纯绿色、仅160KB

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


相关文档:

利用javascript在Siebel HI环境下进行简单的测试

Siebel支持在浏览器的地址栏使用javascript
例如
javascript:alert(theApplication().GetProfielAttr("Employee Flag");
javascript:var sBo = theApplication().ActiveBusObject();sBc = sBo.GetBusComp("Contact");alert(sBc.GetFieldValue("Last Name")); ......

a href=#与 a href=javascript:void(0) 的区别

a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP
<a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接
<a href="#" onclick="javascript:return false;"> 作用同上,不同浏览器会有差异。
点击链接后,不想使页面滚到页首,就用href="javascript:v ......

《悟透JavaScript》之 甘露模型(新)


在上面的示例中,我们定义了两个语法甘露,一个是Class()函数,一个是New()函数。使用Class()甘露,我们已经可以用非常优雅的格式定义一个类。例如前例中的:
    
var
 Employee 
=
 Class(Person,    
//
派生至Person类
    
{ ......

JavaScript经典书籍

JavaScript核心技术
http://book.jqcq.com/product/620915.html

本书通过许多基于Web的例子展示了:如何构建JavaScript逻辑和将它与现有的对象结构连接,如何构建自己的程序库以及如何利用其他JavaScript用户编写的程序库。
JavaScript 完全手册 JavaScript 完全手册
http://book.jqcq.com/product/320819.html
......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号