|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
net网页编程程序员的大部门代码都靠控件拖拽完成的,虽然java也有,但是无论从美观和速度上都没发和.net网页编程比。java程序员都是代码完成的,所以java程序员常戏称.net网页编程程序员是操作员,呵呵。浅谈DOM事务的优化
在JavaScript程序的开辟中,常常会用到一些频仍触发的DOM事务,如mousemove、resize,另有不是那末经常使用的鼠标滚轮事务:mousewheel(在Firefox中,滚轮事务为DOMMouseScroll)。
扫瞄器为了确保这些事务可以实时呼应,触发的频次会对照高,详细的触发频次各扫瞄器固然有收支,但收支不年夜。良多时分在必要注意功能的场景下利用这些事务会想各类举措对事务的触发频次举行优化,上面说说我的一些优化办法。
mousemove在拖拽中的优化
拖拽(Drag)是很罕见的一个功效,在扫瞄器还没完成原生的拖拽之前,经由过程mousedown、mousemove、mouseup3种事务范例就能够摹拟出拖拽效果来,固然这里不谈怎样往完成一个拖拽功效。
mousemove事务在拖拽的使用中既要确保拖拽的流利度,又要确保拖拽时的功能,怎样坚持二者的均衡呢?
能够经由过程设置一个计数器往复失落一半的mousemove事务的触发,代码以下:
01varcount=0;
02
03elem.onmousemove=function(){
04count++;
05
06//当计数器为偶数的时分不实行mousemove
07if(count%2===0){
08return;
09}
10
11//完成拖拽功效的代码...
12};
下面只是增添了很少的几行代码,经由过程判别计数器是不是为偶数,就能够往失落一半的mousemove事务实行的次数,同时拖拽功效的流利度基础不受影响。
mousemove摹拟mouseenter效果
比来碰着这么一个需求,必要在图片上绑定一个事务,当鼠标挪动到图片上时对图片举行缩小,尽年夜多半人的第一反响就是间接利用mouseenter事务来处置。可是利用mouseenter事务会带来误触发,只管可使用准时器来共同也仍是会有误触发,由于图片关于mouseenter的触发地区是对照年夜的,当鼠标划过一张200*200尺寸的图片时,此时给mouseenter设置一个500毫秒的延时,效果大概达不到预期。对交互体例做进一步的优化,当鼠标疾速划过图片时不触发事务,只要鼠标长久的停止在图片上时才触发事务。经由过程对mousemove增加一个准时器就能够完成该效果。代码以下:
01vartimer,
02move=function(){
03clearTimeout(timer);
04//设置一个较短的准时器
05timer=setTimeout(function(){
06//这里是完成图片缩小的代码...
07},200);
08};
09
10img.onmousemove=move;
11img.onmou搜索引擎优化ut=function(){
12clearTimeout(timer);
13};
鼠标频仍的挪动触发的mousemove事务会扫除失落上一次增加的准时器,只要当鼠标停止工夫凌驾设置的200毫秒才会触发事务,固然在鼠标移开的时分必定要记得扫除失落准时器。360图片搜刮就接纳了这类触发体例,如许就不会再有误触发了。
resize事务的优化
resize是在扫瞄器窗口巨细改动的时分触发的事务,一般改动一次会触发2、3次resize事务,关于IE6/7resize更简单被触发。resize事务一般用于当窗口改动巨细时,网页的结构也会依据窗口巨细举行自顺应结构。自顺应结构假如对功能的损耗对照年夜,那末就要尤其注重resize触发的频次。一样利用准时器来完成。
01varthrottle=function(fn,timeout){
02vartimer;
03
04returnfunction(){
05varself=this,
06args=arguments;
07
08clearTimeout(timer);
09
10timer=setTimeout(function(){
11fn.apply(self,args);
12},timeout);
13};
14};
15
16window.onresize=throttle(function(){
17//自顺应结构的代码...
18},100);
经由过程重复的调试,觉察给resize增加一个100毫秒的提早的效果会对照幻想,既能包管事务的实时性,又能到达优化的目标。
自己的整个学习思路完全被老师的讲课思路所牵制,这样几节课听下来,恐怕自己的见解都应该是书里的知识点了,根本谈不上自身发现问题,分析问题,和解决问题能力的切实提高。 |
|