div层的移动及性能优化
性能 优化 移动 div
2023-06-13 09:14:25 时间
同样如果一个页面结构很复杂或者电脑配置不好的话也会出现这种情况。为了弄清变慢的原因,我们做了几个demo对比,最后发现在mousemove事件上加上定时器能改进这个体验。
整个代码的关键地方在于当鼠标按下时开始了的计时器,这样Onmousemove事件会每隔30ms执行一次,然后在鼠标松下的时候清除计时器。
timer=setInterval(function(){flag=true;},30);
这样可以减轻浏览器绘制div层的负担,不至于拖动时每时每刻都在移动,其实太短了人眼也感觉不到变化,延迟间隔可以自己根据体验设置。
复制代码代码如下:
整个代码的关键地方在于当鼠标按下时开始了的计时器,这样Onmousemove事件会每隔30ms执行一次,然后在鼠标松下的时候清除计时器。
timer=setInterval(function(){flag=true;},30);
这样可以减轻浏览器绘制div层的负担,不至于拖动时每时每刻都在移动,其实太短了人眼也感觉不到变化,延迟间隔可以自己根据体验设置。
functionEndrag(source,target){
source=typeof(source)=="object"?source:document.getElementById(source);
target=typeof(target)=="object"?target:document.getElementById(target);
varx0=0,y0=0,x1=0,y1=0,moveable=false,index=100;
vartimer,flag=false;
vari=0;
source.onmousedown=function(e){
e=e?e:(window.event?window.event:null);
x0=e.clientX;
y0=e.clientY;
x1=isNaN(parseInt(source.style.left))?0:parseInt(source.style.left);
y1=isNaN(parseInt(source.style.top))?0:parseInt(source.style.top);
moveable=true;
//当鼠标按下时,定时器开始工作,每隔50ms执行一次mousemove事件
timer=setInterval(function(){flag=true;},30);
};
//拖动;
source.onmousemove=function(e){
e=e?e:(window.event?window.event:null);
if(moveable){
if(flag){
i++;
flag=false;
target.style.left=(e.clientX+x1-x0)+"px";
target.style.top=(e.clientY+y1-y0)+"px";
}
}
};
//停止拖动;
source.onmouseup=function(e){
if(moveable){
moveable=false;
clearInterval(timer);
//alert(i);
}
};
//停止拖动;
source.onmouseout=function(e){
if(moveable){
moveable=false;
clearInterval(timer);
//alert(i);
}
};
}
相关文章
- Linux 内核调试和性能优化框架
- PaddleNLP--UIE--小样本快速提升性能(含doccona标注)
- 英特尔处理器性能排行2021_intel芯片组天梯图
- 细说React组件性能优化_2023-03-15
- Rook v1.11 已发布,性能增强,主要变化在这里了
- 热门方向Top4:大前端监控、移动端性能与效率优化、团队可持续发展、低代码|GMTC 北京站圆满落幕
- 提升集群性能:Redis优化实践(redis集群优化)
- jsp与MySQL的结合性能测试(jspmysql测试)
- 利用Oracle性能分析工具提升性能(oracle性能分析工具)
- 利用Redis实现多级缓存优化性能(redis多级缓存)
- MySQL性能优化:实现高效运行(mysql的性能优化)
- Redis:极大提高数据访问性能的缓存解决方案(redis缓存对象)
- 优化Linux网络编程:从代码优化到极致性能(linux网络编程代码)
- MSSQL技术的233层优化:高效提升系统性能(mssql233)
- 优化MySQL JOIN顺序:把握最佳性能(mysqljoin顺序)
- CBO Oracle:实现数据库性能优化的关键(cbooracle)
- Oracle启动并行处理,优化数据库性能(oracle开启并行)
- 搞懂 Swap 与 Oracle:如何优化你的计算机性能?(swaporacle)
- 索引Oracle在线重建索引—极大地提升数据库性能(oracle 在线重建)
- Linux下使用iperf测试网络性能(linuxiperf)
- MySQL 核心技术手册:深入阅读并掌握MySQL的基本操作、性能优化与高级应用。(mysql核心技术手册)
- 利用 MSSQL 跟踪和优化数据库性能(mssql 跟踪数据库)
- 使用Redis增强性能缓存工具进行优化(缓存工具redis)
- 提升应用性能,红色不可或缺Redis高性能缓存系统(redis高性能缓存系统)
- Oracle为字段构建索引优化数据性能的必要步骤(oracle为字段加索引)
- 配置Redis请求优先级,优化性能(redis配置请求优先级)
- Oracle与DB2数据库业界对比以性能为王(oracle db2对比)
- JavaScript脚本性能优化注意事项
- asp.net程序性能优化的七个方面(c#(或vb.net)程序改进)