84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
1.第一种总是显得一卡一卡的, 第二个却没这问题. 求帮忙解释一下为什么?
2.现在是想把e.pageX - $('.mask').offset().left-50提出来做if判断,但是一这样就成了第一种的情况, 该怎么解决呢?
好好学习,天天向上!!!
Questions about the execution of jQuery? -PHP Chinese website Q&A-Questions about the execution of jQuery? -PHP Chinese website Q&A
Let’s take a look and learn.
因为第一种每次mousemove的时候,都要动态去查两次$('.mask')并且更新DOM的位置,又由于这个鼠标事件触发的频率是非常非常高的,导致JS性能下降。对比之下第二种他直接使用this,这个this直接就是DOM的引用了,不需要浪费资源去在文档里面查询,不会有太大的性能问题。
综合起来,优化的办法有两个方面:
一、提前获取DOM的引用,不用每次都去动态获取:
var mask = $('.mask'); ...
二、限制一下事件处理的频率:
var canResponse = true; $('.small').mousemove(function (e) { if (canResponse) { // 没被禁止,可继续进行处理 // 这里是一些处理鼠标事件的操作... // 后置操作:限制事件处理的频率 canResponse = false; // 禁止事件的处理 setTimeout(function() { canResponse = true; }, 50); // 50毫秒后释放,可以执行鼠标事件的处理 } }
Questions about the execution of jQuery? -PHP Chinese website Q&A-Questions about the execution of jQuery? -PHP Chinese website Q&A
Let’s take a look and learn.
因为第一种每次mousemove的时候,都要动态去查两次$('.mask')并且更新DOM的位置,又由于这个鼠标事件触发的频率是非常非常高的,导致JS性能下降。对比之下第二种他直接使用this,这个this直接就是DOM的引用了,不需要浪费资源去在文档里面查询,不会有太大的性能问题。
综合起来,优化的办法有两个方面:
一、提前获取DOM的引用,不用每次都去动态获取:
二、限制一下事件处理的频率: