单击“+”时，Internet Explorer 会冻结执行拖动鼠标操作。如何检测出现这种情况的原因呢？

Question

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

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

ONMOUSEMOVE 处理程序会绘制一个淡出的线段，作为用户绘制线条时的视觉帮助。

画线过程截图请参考以下图片： https://i.sstatic.net/AxcFr.jpg http://i51.tinypic.com/fxjqf.jpg

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

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

我的理论是，资源管理器在这种情况下可能是单线程的他拾取 MOUSEMOVE 事件，但仅在 ONMOUSEUP 事件完成后才执行它们（这意味着在拖动操作期间基本上没有执行任何操作），但我不知道如何检查这是否属实，或者 。

我已经使用 IE8 内置 JS 分析器进行了一些分析，并且两个处理程序都被调用了通常的次数，没有任何函数被调用数千次，这会导致分析器冻结 IE 被冻结并且不输出任何内容，直到解冻，之后结果看起来与没有冻结操作相同

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

Answer 1

问题是更新 DOM 是一个非常昂贵的操作。现在，如果没有限制，mousemove 事件会不断触发，如果您在每次触发的 mousemove 事件上更新 DOM，旧版浏览器就无法跟上。

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

这是如何限制 mousemove 事件的：

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) 用于绘图操作。