執行單擊並拖動鼠標操作時，Internet Explorer會凍結。如何檢測這個原因？

我正在研究創建簡單圖表的JavaScript應用程序，並且在Internet Explorer（版本8）中有一些性能問題。執行單擊並拖動鼠標操作時，Internet Explorer會凍結。如何檢測這個原因？

該應用程序可以被用於繪製的圖上線（參見圖）。繪製線有兩個主要的處理程序。 ONMOUSEUP事件選取用戶的點擊，表示用戶想要在線上放置一個點並開始一個新的線段（線由多個線段組成）。

一個的OnMouseMove處理程序繪製一個淡出的片段作爲視覺幫助到用戶，而他是畫線。

請參考這些圖像用於線繪製過程的屏幕截圖： http://imgur.com/TuueR http://i51.tinypic.com/fxjqf.jpg

如果用戶點擊鼠標（鼠標按下），但犯規釋放它，而是開始拖動鼠標左右，IE完全凍結。一段時間後，它會解凍並照常進行。

上的Chrome瀏覽另一方面，處理此道（同時拖動操作正在發生的事情，鼠標移動處理器工作的工作，該點的ONMOUSEUP事件觸發後僅放置。

我的理論是資源管理器可能是單線程的，在這種情況下，他會拾取MOUSEMOVE事件，但只有在ONMOUSEUP事件完成後才執行它們（這意味着在拖動操作期間本質上沒有任何操作），但我不知道如何檢查如果這是真的，或如何解決它。

我做了一些分析與IE8內置的JS探查，並且這兩種處理器都堪稱倍於正常的量，有沒有函數被調用數千次會導致凍結。探測器在IE被凍結時被凍結，並且不會輸出任何東西，直到解凍，之後結果看起來就像沒有凍結一樣。

編輯：這裏是根據的dynaTrace分析器工具時間軸：http://i51.tinypic.com/348sxty.jpg。

來源

2011-10-18 skali

你創建的圖表和褪色正常的HTML元素線？ – Esailija

@Esailija是的，他們大多是跨度元素。點具有背景圖像，而線是具有頂部或右邊界的透明元素。 – skali

的問題是，更新DOM是一個非常昂貴的操作。現在，mousemove事件會不斷調用，如果不加限制，並且舊的瀏覽器無法跟上，如果在每次觸發mousemove事件時更新DOM。

解決方案可能將鼠標移動事件至少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或者對於IE的（excanvas）進行繪圖操作。

來源

2011-10-18 14:23:23 Esailija

我已經在這裏做了一些性能優化，通過強制只在網格上繪製的線條（如圖所示）。這樣我只在鼠標在x或y軸上移動至少10px時才更新DOM。當用戶正常繪製線時，IE中沒有性能問題。通常，我的意思是CLICK_MOUSE（創建點），MOVE_MOUSE（從該方向的起點繪製一條線），CLICK，MOVE，CLICK，MOVE等。此用例在每個瀏覽器中均正常工作。 – skali

但是，在IE中繪製線條時，MOUSEDOWN + MOUSEMOVE組合會完全凍結瀏覽器。因此，總結：MOUSEDOWN + MOUSEUP = CLICK - > MOUSEMOVE - > CLICK - > MOVE正常工作。 MOUSEDOWN + MOUSEMOVE（點擊未完成）=凍結問題 – skali

您有任何可查看的頁面，或者您可以放置[jsfiddle]（http://jsfiddle.net）嗎？ – Esailija

執行單擊並拖動鼠標操作時，Internet Explorer會凍結。如何檢測這個原因？

回答

相關問題