Javascript 为什么hoverintent函数使用了这么多CPU?
我已经实现了以下插件:Javascript 为什么hoverintent函数使用了这么多CPU?,javascript,jquery,performance,profiling,hoverintent,Javascript,Jquery,Performance,Profiling,Hoverintent,我已经实现了以下插件: jQuery.event.special.hoverintent = { pxDelta: 7, pxRate: 100, bindType: "mouseover", delegateType: "mouseover", handle: function( event ) { var args = Array.prototype.slice.call( arguments, 0 ), ta
jQuery.event.special.hoverintent = {
pxDelta: 7,
pxRate: 100,
bindType: "mouseover",
delegateType: "mouseover",
handle: function( event ) {
var args = Array.prototype.slice.call( arguments, 0 ),
target = jQuery( event.target ),
cfg = jQuery.event.special.hoverintent,
cX, cY, pX, pY, timer;
function clear() {
target
.off("mousemove", getpx )
.off("mouseout", clear );
clearTimeout( timer );
}
function getpx( e ) {
cX = e.pageX;
cY = e.pageY;
}
target
.on( "mousemove", getpx )
.on( "mouseout", clear );
(function hovercheck() {
if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.pxDelta) {
clear();
// Normally we'd need to reset this but it is async
event.type = "hoverintent";
return event.handleObj.handler.apply( event.target, args );
}
pX = cX;
pY = cY;
timer = setTimeout( hovercheck, cfg.pxRate );
})();
}
};
下面是(Google Chrome开发工具)配置文件的打印屏幕,您可能会注意到函数hovercheck
使用的数量:
- 为什么hovercheck函数使用了这么多CPU
- 如何改进此功能
更新:Internet Explorer 8(仅限Windows XP)崩溃 在不同浏览器中进行测试后,我还注意到Internet Explorer 8(Windows XP)在触发
hoverintent
事件后立即崩溃。
这是(Internet Explorer)配置文件的另一个打印屏幕。(有趣的部分可能是querySelectAll()
DOM函数)
- 你知道为什么InternetExplorer8会崩溃吗
- 解决方案
- 问题不在于悬停检查功能。大部分时间都花在事件处理程序内部
$("#mainnav").find("ul.tabs > li > a").on("hoverintent", function() {
/* all the time is spent here, what is this code? */
/* try putting something simple here to see if the performance issue goes away */
console.log("in event handler!");
});
第二个打印屏幕的英文表头是:功能、金额、包含时间(毫秒)、排除时间(毫秒)、功能类型你说得对!我有大量的代码被执行了很多次。。我在事件处理程序中优化/缩短了代码,现在它运行得更快了。有趣的是:从jQuery 1.9.1更新到1.10.1首先奇怪地解决了这个问题,优化代码只是让它更快了。。
$("#mainnav").find("ul.tabs > li > a").on("hoverintent", function() {
/* all the time is spent here, what is this code? */
/* try putting something simple here to see if the performance issue goes away */
console.log("in event handler!");
});