欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript 拖放效果系列五——性能优化

程序员文章站 2022-07-14 13:49:56
...
原文来自:http://www.cainiao8.com/web/js_examples/22_tuozhuai5.html



JavaScript拖拽的性能问题

在一次距离适中的拖拽过程中,鼠标的mousemove事件可能要触发成百上千次(不信的话可以在“addEventSimple观察鼠标事件”那个例子里测试一下)。而拖拽脚本要做的恰恰是响应mousemove事件,那么是不是会很耗费资源呢?我们来问问资源管理器吧。

说明一下,我测试用的浏览器为FireFox。

首先,非拖拽的时候,资源管理器截图如下:CPU占用率在0-2之间跳动,0的时间较长。

JavaScript 拖放效果系列五——性能优化
            
    
    博客分类: js JavaScriptWebFirefox浏览器脚本 

之后,我们来看看拖拽状态下的CPU占用率:截图显示为11,实际上是在10-15之间波动,而且是13、4的时间多一些。这是较快速度拖拽时候的占用率,但是慢速拖拽也基本上差不多。而且当我以最快速度做最大距离狂甩鼠标的时候,CPU占用率最高会达到22%。

JavaScript 拖放效果系列五——性能优化
            
    
    博客分类: js JavaScriptWebFirefox浏览器脚本 
优化拖拽性能

能不能改善一下拖拽的性能呢?我们已经知道资源占用多的原因了——mousemove发生过于频繁。那么我们就从它作为突破口。

我们知道,每次mousemove都会调用它的事件响应函数,可能在毫秒级的时间里就发生了N多次。那么如果我们不理会mousemove事件不就行了吗?当然不是永久的不理会,而是每隔一段(毫秒级)时间才响应一次mousemove。还好JavaScript提供了setTimeout函数,我们就用它来让mousemove“闭嘴”。

修改部分的代码如下:

function move(event){
	event = event || window.event;
	if(dragElement){
		var x,y;
		y = event.clientY - mouseY + objY;
		x = event.clientX - mouseX + objX;
		dragElement.style.top = y + "px";
		dragElement.style.left = x + "px";
		//移动完元素之后,延迟一段时间
		document.onmousemove = null;
		setTimeout("document.onmousemove = move;",30);
	}
} 


可以看到我们修改的代码只有两行,但是就是这两行却带来了不小的性能提升。首先,每次响应完鼠标移动事件之后我们都会让 document.onmousemove = null;,也就是不再响应该事件。而30毫秒后则会document.onmousemove = move;也就是恢复正常的响应函数。如此一来便不会造成事件响应函数频繁被调用的情况了。同时,我记得电影是1秒24帧,我们的是30毫秒一帧,一秒 33帧多,应该说效果还是不错的。可以看一看。

性能测试结果:从截图中看CPU占用率为10,好像进步不大。不过其实在拖拽的过程中是在5-13之间波动的,大多数时间都在10以下,而且即使“使劲甩鼠标”CPU占用率也不会有明显变化。可见性能优化还是有一定效果的。
JavaScript 拖放效果系列五——性能优化
            
    
    博客分类: js JavaScriptWebFirefox浏览器脚本 

调整延时时间为40毫秒,CPU占用率会进一步下降,在我的计算机上无论如何都不会超过10。而且仍然看不出来有明显的延迟现象(一秒钟仍然大于24帧)。所以我觉得这是一个比较合适的延时。可以看看完成的页面。

我试着将延时调整到100毫秒,CPU占用率将很少超过5,最大为7,但是延迟现象即为明显。

最后我又在IE8里测试了一下,性能差距更明显。
JavaScript拖拽系列

   1. JavaScript拖拽
   2. JavaScript拖拽2——多元素、分离JS
   3. JavaScript拖拽3——解决快速拖拽的问题
   4. JavaScript拖拽4——获得元素的位置
   5. JavaScript拖拽5——性能优化
   6. JavaScript拖拽6——修复错误