这里提供一个用于展现超大数据量的表格的demo,1W行100列,直接在前端显示。可以保证在IE6下正常使用。
http://download.csdn.net/detail/yongxiaofeiche/5539805有兴趣的同学可以下载来看看。目前只支持IE,其他浏览器没调试。因为,懒的删代码了,所以,将整个框架全部提供出来了。里面还有一个用于前端数据分析的cube组件。有兴趣的同学可以自己研究研究。整个框架还在完善过程中,所以,请大家不要过多吐槽。另外,别和我讨论JQuery,以牺牲性能为代价换简化编码风格的事不做。datatable大数据展现javascript

解决方案 »

  1.   

    发布到这里就是希望大家对这个组件多提意见,我自己正在调整对其他浏览器的兼容性问题。我认为做富客户端应用最大的问题是前端的数据处理能力。希望给大家在被迫做分页、异步加载之前提供另外一条解决思路。当然,任何一种解决方法都不是万能的。我的目标是,前端数据量在1W以内时可以保持和flex或桌面应用类似的展现性能。这样,就可以解决大多数BS应用数据展现方面的不足。
      

  2.   

    一直专注大数据表格,请教yongxiaofeiche一个关于JS的问题,麻烦加关注
      

  3.   

    话说  1w 行 给谁看那 根据视窗原理 我只要显示视窗大小的行数就可以了
    另外jq 会影响性能? 
      

  4.   

    JQ的好多控件确实会影响速度。尤其在IE下
      

  5.   

    “另外,别和我讨论JQuery,以牺牲性能为代价换简化编码风格的事不做。”
    表示不明白
      

  6.   

    因为项目的问题一直要兼容IE6-9.所以对IE的jscript做了很多性能测试。关于性能方面主要集中在以下几点:
    1、方法调用代价
       使用高级语言开发时,如java、c、c#方法调用时虽然要做对象复制,入栈出栈的操作。但总的来看,方法调用的时间成本几乎可以忽略不计。我自己用java测试的结果是1秒10亿次调用。而js是解释型语言,方法调用的执行效率实在是到了令人汗颜的地步。我目前的测试结果是IE6 1秒能够完成1W次调用,高版本会更快一些。js的执行速度一般会直接干扰用户体验,简单的表现为一顿一顿的效果。因此,在datatable中,为了保证拉动流畅,表格每一次渲染的速度要控制在100ms以内。而jq中大量的方法嵌套调用对我来说是无法忍受的。
    2、遍历对象
       jq中遍历集合对象的最基础的实现,封装了for循环很实用的方法,但为了适应各类对象的遍历操作,内部逻辑比较多,并且增加了方法调用成本。因此,对于明确的数组循环,我都是直接用for。
    3、对象封装
       不知道大家有没有注意过对象js对象创建的时间消耗。创建一个对象最简单的写法obj={}。单一个孤立的对象对我们来说是没有任何意义的。给对象添加属性其实是一个很耗时的操作,属性添加后,对属性读写各个版本浏览器的速度几乎是一样的。(有兴趣可以看一下Ext.lt.recrodset对象中将二维数组还原成对象的操作)jq中对java对象进行了大量的封装,虽然很好用,但是对我来说完全没有用处。所以,尽量不会通过jq去获取对象。
        由于以上的问题,在实现datatable时最终放弃使用jq。    在开发datatable的过程中,另一个以外的收获是Ext.lt.recrodset对象。现在项目中前后端的数据传输已经全部使用这种结构。综合性能要明显优于直接使用json,一般数据的压缩比为1/5-1/20传输。如果没有这个数据集,1w行表格的数据量在传输环节就夭折了。
      

  7.   

        这就跟汽车的最高时速一样,仪表盘上最高可以到时速200多公里,但觉大多数情况下都是开到60到100之间。
        现在BS系统的交互操作越来越复杂,而用户对BS系统的响应速度要求却越来越高。系统响应的时间中,去掉网络消耗时间、服务端处理时间、浏览器延迟时间、页面渲染时间,真正留给脚本执行的时间已经非常少了。而表格显示一般都是页面中最重量级的组件之一,所以,需要尽量减少显示表格数据所占用的时间。但一般情况下,都是以牺牲用户获取的有效信息量为代价,来换取响应速度。现在只是给你提供另外一种提高速度的方式,至于怎么用,如何用就是见仁见智的问题了。
        比如,原来显示一个500行的表格要500毫秒,现在用300毫秒就可以完成,那么在省出来的200毫秒里是不是可以做一些淡入淡出的效果,来提高用户体验。
        这种底层的改变也需要我们突破原有思维方式,创造出新的应用方式。比如,由于传统页面中,有效信息量很少,因此,页内搜索实际上是一个很鸡肋的功能。提高有效信息的传输和展现,页内搜索功能就变得越来越重要。
      

  8.   

    Ext.lt.recrodset有没有简要的说明?
      

  9.   

    这里下载 recordset 的api http://download.csdn.net/detail/yongxiaofeiche/5893173