原文来自:
http://www.cainiao8.com/web/js_examples/22_tuozhuai5.html
JavaScript拖拽的性能问题
在一次距离适中的拖拽过程中,鼠标的mousemove事件可能要触发成百上千次(不信的话可以在“addEventSimple观察鼠标事件”那个例子里测试一下)。而拖拽脚本要做的恰恰是响应mousemove事件,那么是不是会很耗费资源呢?我们来问问资源管理器吧。
说明一下,我测试用的浏览器为FireFox。
首先,非拖拽的时候,资源管理器截图如下:CPU占用率在0-2之间跳动,0的时间较长。
之后,我们来看看拖拽状态下的CPU占用率:截图显示为11,实际上是在10-15之间波动,而且是13、4的时间多一些。这是较快速度拖拽时候的占用率,但是慢速拖拽也基本上差不多。而且当我以最快速度做最大距离狂甩鼠标的时候,CPU占用率最高会达到22%。
优化拖拽性能
能不能改善一下拖拽的性能呢?我们已经知道资源占用多的原因了——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占用率也不会有明显变化。可见性能优化还是有一定效果的。
调整延时时间为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——修复错误
分享到:
相关推荐
此外,书中还会涉及性能优化和跨浏览器兼容性问题,这是每个前端开发者都必须面对的挑战。讲解如何编写高性能的JavaScript代码,避免内存泄漏,以及如何确保代码在不同浏览器中保持一致的行为。 对于那些寻求提升...
p03.pptx和p04.pptx可能深入到JavaScript的事件处理和DOM操作,p05.pptx和p06.pptx可能探讨CSS3的动画和响应式设计,而p07.pptx至p09.pptx可能涵盖更高级的主题,如Ajax、JavaScript框架或性能优化。 学习动态网页...
在“网页课程设计———文旅新乡”这个项目中,我们主要关注的是如何利用现代Web技术,特别是HTML5、CSS3和JavaScript,来构建一...在实际开发过程中,除了技术应用,还需要考虑用户体验、性能优化和网站的可持续维护。
4. **性能优化** - 对于大型树结构,性能是个挑战。优化可能包括延迟渲染、虚拟DOM技术(如React)、以及仅更新受影响的节点。 - 使用事件委托可以减少事件监听器的数量,提升性能。 5. **可视化** - 使用CSS和...
《displaceable:轻量级高性能的JavaScript库——实现鼠标移动元素平滑移动的魔法》 在现代网页设计中,动态交互元素已经成为提升用户体验的重要手段。"displaceable"作为一个小巧而高性能的JavaScript库,正是为此...
#### 第二十五章:性能优化 随着Web应用变得越来越复杂,优化JavaScript执行效率显得尤为重要。本章分享了一些有效提升应用性能的方法和技术。 #### 附录 - **附录A**:核心JavaScript语言——详细记录了语法细节及...
以下是对七大JavaScript框架——Dojo、Prototype、YUI、jQuery、MooTools、Script.aculo.us以及ExtJS的优缺点分析: 一、Dojo Dojo是一个功能强大的JavaScript库,具有丰富的API和工具,特别适合大型企业级应用。它...
五、性能优化 移动端的网络环境和硬件性能相比桌面端有较大差异,因此性能优化尤为重要。H41模板可能采取了以下优化措施:图片压缩,减少HTTP请求,使用CDN加速静态资源加载,利用服务端渲染或预加载技术提升首屏...
script.aculo.us 1.8.0版本带来了许多性能优化和新功能,使其成为构建现代Web应用的理想选择。 结合使用Prototype和script.aculo.us,开发者可以创建出既具有复杂业务逻辑,又具有出色用户体验的Web应用。Prototype...
同时,对前端性能优化和用户体验的追求也是必不可少的,包括加载速度、交互响应和页面流畅性。 在团队协作中,了解CSS预编译语言如SASS、LESS可以帮助编写更简洁、模块化的CSS代码,而Webpack这样的构建工具可以...
- JavaScript文件则负责前端交互逻辑,如拖放效果和宽度调整的动画。 4. **学习价值**: - 对于初学者,这个源码提供了一个深入理解ASP.NET GridView控件的实例,学习如何扩展和定制其功能。 - 对于开发者,可以...
CSS用于样式控制,JavaScript和jQuery则用于添加交互效果和提高页面性能。 8. **安全性**:任何Web应用程序都应考虑安全性问题。ASP.NET提供了一些内置的安全特性,如身份验证、授权、防止XSS和SQL注入等,确保学生...
8. **性能优化**: 避免在`drag`事件中进行大量的计算或DOM操作,可能导致性能问题。可以使用requestAnimationFrame或节流/防抖函数来优化。 9. **用户反馈**: 提供清晰的视觉反馈,如拖动元素的阴影、缩放或...
为了提供流畅的拖动体验,开发者可能需要考虑性能优化,比如减少不必要的服务器往返,利用缓存技术,以及优化JavaScript代码,避免阻塞UI线程。 8. **调试与测试** 开发过程中,调试工具和单元测试至关重要。...
总的来说,通过分析和学习这个"简单火车票查询源码",我们可以深入理解ASP.NET的Web Forms模型,掌握数据库操作、用户界面设计、权限控制以及性能优化等多方面的技能,这对于提升ASP.NET开发能力大有裨益。...
在实际开发中,我们需要对WebView进行调试和性能优化。Android Studio提供了Chrome开发者工具,可以远程调试WebView中的JavaScript代码。此外,合理使用缓存策略、减少网络请求、优化CSS和JavaScript性能都是提升...
在移动设备上,JavaScript还可以用于优化用户体验,比如触摸事件处理和性能优化。 “前端源码”标签表明这些文件是用于浏览器端的,而不是服务器端。前端开发关注的是用户可以直接看到和交互的部分,而服务器端开发...
在本例中,我们将关注的是一个特定类型的拖放——拖拽窗口或元素,即登录框。 1. **HTML结构**: - 创建一个登录框的HTML元素,通常是一个`div`,并设置相应的CSS样式使其看起来像一个弹出窗口。这个元素需要一个...
jQuery和其他JavaScript库也可能被用于增强前端交互效果。 8. **部署与配置** ASP.NET应用可以轻松部署到IIS(Internet Information Services)服务器上,配置文件web.config用于设置应用程序的各种配置项,如...