Internet Explorer在执行鼠标单击+拖动操作时冻结.如何检测其原因

Internet Explorer freezes when a click + drag mouse action is performed. How to detect the cause of this?

本文关键字：何检测 检测 冻结 执行 Explorer 鼠标 单击 操作 拖动 Internet      更新时间：2023-09-26

我正在开发一个用于创建简单图表的JavaScript应用程序，并且我在Internet Explorer(版本8)中遇到一些性能问题。

该应用程序可用于在图表上绘制线条(见图)。有两个主要的处理程序用于绘制线条。ONMOUSEUP事件收集用户的点击，这表明用户想要在行上放置一个点并开始一个新的段(行由多个段组成)。

ONMOUSEMOVE处理程序在用户绘制线时绘制淡出段作为视觉帮助。

画线过程截图如下图所示:https://i.stack.imgur.com/AxcFr.jpghttp://i51.tinypic.com/fxjqf.jpg

如果用户点击鼠标(mousedown)，但是没有释放它，而是开始拖动鼠标，IE完全冻结。一段时间后，它将解冻并正常运行。

另一方面，Chrome可以很好地处理这个问题(当拖动操作发生时，MOUSEMOVE处理程序工作，并且只有在ONMOUSEUP事件触发后才放置该点)。

我的理论是，资源管理器可能是单线程的，在这种情况下，他拿起MOUSEMOVE事件，但只有在ONMOUSEUP事件完成后才执行它们(这意味着在拖动操作的持续时间内基本上什么都不做)，但我不知道如何检查这是否为真，或者如何修复它。

我已经用IE8内置的JS分析器做了一些分析，两个处理程序都被调用了通常的次数，没有函数被调用数千次会导致冻结。当IE被冻结时，分析器被冻结，并且在它解冻之前不输出任何内容，之后的结果看起来就像没有冻结动作一样。

编辑:这是根据dynaTrace分析器工具的时间轴:http://i51.tinypic.com/348sxty.jpg.

问题是更新DOM是一个非常昂贵的操作。现在，如果不进行限制，mousemove事件就会不断触发，如果你在每个触发的mousemove事件上更新DOM，那么旧的浏览器就跟不上了。

解决方案可以将鼠标移动事件限制至少200毫秒。这意味着您只会在鼠标停止移动200毫秒后更新DOM，给浏览器一些时间来恢复。

这是你如何限制鼠标移动事件:

jQuery( "#element").bind( "mousemove", function(){
//Code to react to mousemove goes here
//Also add code here to check if the position has actually changed from last time,
//So you don't update the DOM for nothing
}.throttle( 200 ) );

节流阀方法所需代码:

Function.prototype.throttle = function( delay ) {
var timeridto = 0, callback = this;
    function r(){
    var     args = Array.prototype.slice.call( arguments ),
        self = this;
        clearTimeout( timeridto );
        timeridto = setTimeout( function(){callback.apply( self, args ); }, delay );
    };
    r.cancel = function(){
     clearTimeout( timeridto );   
    }
    return r;
};

如果这不能解决问题，那么你可以使用html5 canvas或(excanvas for IE)进行绘图操作。

相关文章：