大数组的分时优化处理
灵感来自 Nicholas C. Zakas 的 Timed array processing in JavaScript.
做了个加载大容量表格数据的实例：array-processing.html
几点说明：
- timedChunk 函数是精华，里面的 50ms 来自 Response Time Overview 中的调查结果：100ms 内的响应能让用户感觉非常流畅。50ms 是 Nicholas 针对 JavaScript 得出的最佳经验值。
- setTimeout 延时 25ms, 是因为浏览器的时间分辨率问题。25ms 可以保证主流浏览器都顺畅（有喘息的机会去更新 UI）。
- 上面的实例，传统方式加载会让浏览器在加载数据期间，无法更新界面和响应任何操作。采用分时加载，则可以让浏览器始终保持可响应状态，提升界面流畅性和用户体验。
- 顺便八卦：Safari 4 和 Chrome 2 真不是吹的，速度嗖嗖的。相比，Firefox 和 IE 慢得够可以。
- Opera 依旧保持怪胎特性，传统方式加载也能保持界面的更新和响应，可惜速度不佳，喜忧参半。
- 最后，很钦佩 Nicholas C. Zakas. 短短的一段代码，蕴含了博学的可用性知识 + 专业的 JS 技能 + 细心的疯狂测试。如此牛人，实在是学习的绝佳榜样。
August 15th, 2009 on 23:47
沙发，本来想翻译这篇文档，看来经过你这么解释及没有这个必要啦 :^)
August 16th, 2009 on 0:44
恩，大侠应该补充介绍下setTimeout的工作机制，
see this
http://ejohn.org/blog/how-javascript-timers-work/
August 16th, 2009 on 3:40
arr.contact()和+new Date()都是亮点，尤其用在这个神一般的算法中。
August 16th, 2009 on 5:21
测试了下，相同的delay参数，如果每次处理多个（比如20-100个）结果，使用分时和同时结合的方式，可以更快的完成呈现，而并不影响体验。
August 16th, 2009 on 8:46
以前做体育彩票在线计算项目时曾用过类似的方式解决问题。当时是IE在大量的INNERHTML操作的时候假死严重，所以用SETTIMEOUT分批写入。
August 16th, 2009 on 10:23
用SETTIMEOUT来实现小小的多线程…
August 16th, 2009 on 11:17
还是有必要解释下其背后的原理的
http://www.uedmagazine.com/ued/?p=160
August 16th, 2009 on 21:06
请问一下，Google code需要怎样才可以像你这样直接运行html而不是显示源码呢？例如 http://hotoo.googlecode.com/svn/trunk/hotoo/labs/css/css-fonts.html ，只有IE才默认不显示源码。
August 16th, 2009 on 22:19
提一个问题考考大家，
通过这样构造出来的大数据表格，在上面绑定事件会相应缓慢（尤其IE6），如何解决
August 16th, 2009 on 22:33
@闲耕：通过 SVN 添加 mime type: text/html. 具体方法可 google
@feng: 事件代理
August 17th, 2009 on 8:39
请问下面这条语句：
var start = +new Date();
为什么要用一个加号呢？
August 17th, 2009 on 8:56
@老田：+new Date() == Number(new Date()) == new Date().getTime() 将Date转换为数值
August 17th, 2009 on 15:37
神个鬼，，我上个月突发奇想也想到了用setTimeout来处理以防止页面不能操作，，因为JavaScript引擎是阻塞式执行代码，setTimout 和setInterval能打破这一平衡。。
很神？不神？？——呵呵，貌似有点来踢馆的味道！虽然我很“神”，依旧待业，因为我是学农的，人家见到简历就把偶打去西天了。。。不知道是我的悲哀还是别人的悲哀。。。
August 17th, 2009 on 17:43
timeChunk中启动process, 有必要也放在timeout中注册回调吗?
August 18th, 2009 on 8:19
@各位：最神的不是 setTimout, 是 25, 50 这两个数值。7楼说明了setTimeout的机理，但这不是timedChunk的精华。
August 18th, 2009 on 11:39
嗯，不错的代码，贴在这里备份一下
http://fayaa.com/code/view/4758/
话说浏览器机制一更新（比如Chrome新出的Worker线程），这个就不大适用了
August 28th, 2009 on 17:54
@lifesinger 事件代理的效果同样不理想哦
August 29th, 2009 on 18:20
@feng: 说说你的解法
September 18th, 2009 on 21:34
timer resolution, 我觉得翻译为时钟频率会更好些, 以前碰到过一个setTimeout的时间问题, 就和这个时钟频率有关, 后来去查了一下资料, 了解到的情况是这样: IE浏览器的时钟频率好像由cpu决定, 而其他浏览器的时钟频率则是浏览器自带的, 不知道记错没有, 呵呵
October 28th, 2009 on 17:02
setTimeout中的代码也是阻塞执行的，就是说当setTimeout匿名函数中的程序执行完之后，才会做一个指定时间的等待，也就是这个时间的等待是在页面渲染之后再做的，所以我感觉可能不是由于是否为25ms决定（setInterval是按照楼主所说的方法，就是说等待的时间包含了页面渲染）
刚才把楼主的测试页面代码修改了一下，将delay改成了0，发现并没有页面渲染阻塞的情况
December 7th, 2009 on 11:51
果然牛
June 4th, 2010 on 9:17
恩.. 以前项目中也有类似的应用, 可惜数据量太大了, 分时加载到后期的每次添加耗时都成指数类型增长
July 26th, 2010 on 12:05
钦佩
timedChunk好细腻好犀利
leave a reply