无视浏览器性能差异的批处理

08 August 2013

引言

有时我们会需要处理大量的任务,如果一股脑的一个接一个处理,直到最后一个的话,有可能在量大或者处理逻辑复杂的情况--特别 是有dom交互的情况时,浏览器会卡住,给人的感觉就是无响应,也就是说死机的感觉。

展开

我们平时的处理可能就是分批来处理这样的任务,计算各个浏览器在100毫秒内分别能执行多少任务,然后在程序中判断浏览器 来分批执行相应的任务个数。

有什么不足

按照上面的方式效果上是能达到让浏览器不卡。但是我们在写这样的代码的时候会怎么样呢,计算不同浏览器的性能差异,这还不够, 在执行不同的任务时,还要计算不同任务在浏览器上的性能差异,这样的话,每次写代码都将任务和浏览器都绑得死死的,在写代码前 还要去计算某个任务在某个浏览器下连续运行多少次不会卡.这样是不是很恶心?

一个比较好的方案

我们在计算这些值的时候,是依据什么呢?对,我们要保证不卡,必须要测试,以某个时间点为准,如果浏览器在这个时间点内连续处理 js逻辑的话,因为浏览器处理js和渲染ui是在一个单线程的环境中,页面来不及渲染,处于一种停滞状态,人看了就会有死机的感觉。既 然有了这个时间基准(经过人们的科学研究,这个时间是100ms,只要卡住不超过100ms,人类是不会察觉到卡顿的),我们可以利用这个来做 一个简单的处理,下面放代码:

		/**以100毫秒为单位分批调用n次fun */
		var bat=function bat(n,fun){
			//无视浏览器性能差异的批处理
			var _n=n;
			var t=new Date,callee=arguments.callee;
			do{
				if(!n ){//退出任务条件
					log(_n,n);
					return;
				}
				fun(n--);
			}while(new Date-t<100);//100ms休息一下
			log(_n,n);
			setTimeout(function(){callee(n,fun);},20);//这里是休息时间
		}

这样是不是很cool!把各个浏览器和各种任务都统一了,统一以100ms为基准,不管浏览器的性能如何,到了100ms就释放资源,让浏览器来做其 他重要的事情,比如渲染ui,这样给用户一个良好的体验。

下面是例子

点分批处理按钮,结果会平滑显示出来,此时您可以选择文字,可以滚动等

点一次性搞点按钮则页面会卡住一小段时间,这样体验会很不爽


tags:    js   
回到首页