調試AngularJS Internet Explorer鎖定

我有一個IE10的問題，我可以很容易地複製。在通過幾頁在應用程序中反彈後，IE完全鎖定（沒有「長時間運行的腳本」警告，完全凍結）。我必須從任務管理器中殺死它。我禁用了所有附加組件並擁有乾淨的版面。我在一個相當大的工作站上運行（Win7,16GB ram，i7，yadda yadda）。調試AngularJS Internet Explorer鎖定

它不會在Chrome或Firefox中凍結。只有IE10和IE11。

關於我的應用程序

我與工業控制系統集成，以顯示我的系統的工作狀態。我有很多XHR輪詢正在進行（將轉移到WebSocket，但現在，這很容易與我的API集成）。每500ms刷新一次端點數據，這會更新頁面上的一堆字段。

當應用程序沒有被凍結時，通過瀏覽很好，很快捷。找不到導致凍結的任何特定條件。

在任何時候，我的應用程序有75至400美元的手錶（使用this answer計算）。

當前運行的AngularJS v1.3.0-rc.4。 1.2.25有類似的鎖定。

所以，我的問題

我怎麼連去有關調試呢？我試着離開F12開發工具，沒有任何東西輸出到控制檯。運行腳本分析器（Batarang在IE中不可用）顯示我在$摘要中每10秒花費大約200ms（含）。我接下來要做什麼？

來源

2014-10-07 Mike Griffith

也許Visual Studio的分析器是更好的：http://msdn.microsoft.com/en-us/library/dd264908.aspx – 2014-10-07 14:46:08

如果你正在輪詢每500ms，那麼$ interval setup/initialized controller或service /廠？（我知道這不是直接調試相關的，只是一個想法） – Brocco 2014-10-07 14:50:52

@Brocco它在控制器包含的輪詢服務。（我只是$ timeout而不是$ interval，所以我確保在處理響應和開始下一個請求之間至少保持500ms的間隔）。 – 2014-10-07 15:38:54

哎喲，我可以同情。

你可以區分顧慮嗎？測試你的前端（與ng-repeat DOM部分）與您的服務模擬不使用XHR，看看你是否遇到同樣的問題。您也可以嘗試測試XHR服務，而無需將其掛接到您的前端。（例如，您可以有一個測試視圖，只有類似<span>{{myDataArray}}</span>，以避免ng-repeat問題，用於測試目的。）基本上，嘗試將問題分成兩半，看看是否仍然可以重現該問題。

基本上，我的推理是這樣的;如果你嘲笑你的服務，並且仍然每隔500ms輪詢一次，並且遇到問題，那麼你的IE瀏覽器的DOM更新可能會有問題。如果你沒有遇到這個問題，但是你測試了真正的服務和IE的凍結，那麼XHR在某個地方有問題（可能是你的投票時間？），或者也許是Angular的watch系統的問題。

我希望我能在這裏有更多的幫助，但這是我開始的地方。試圖通過挑選一些代碼來縮小問題範圍。它不會很有趣，但如果你已經使用Angular的最佳實踐（即依賴注入和關注點分離）編寫你的應用程序，它將不那麼痛苦。

TL; DR - 「我接下來要做什麼？」您將不得不智能地剔除一些代碼，以查看哪些是有效的，哪些不是。

來源

2014-10-09 17:21:53

我一直在嘗試這個，看起來確實是給了最大麻煩的DOM。因此，我已經刪除了所有的ng-repeats，以支持手工製作的DOM操作（爲了避免在Chrome瀏覽器中觸及它，可以使用IE的去抖動功能）。所以，仍然不完美，但謝謝你的提示！ – 2014-10-16 18:28:27

@MikeGriffith對於它的價值，我完全忘了提及這一點 - 但是當你使用'ng-repeat'時，通常使用'track by'語句是很好的。這在理論上避免了大量不必要的DOM重繪（儘管在實踐中，我不知道在某個閾值之後獲得多少增益）。真正的問題是DOM和摘要週期，因爲'ng-repeat'使用了很多手錶，據我瞭解（除插值外）。 – 2014-10-16 20:24:54

我的全部解決方案適用於所有IE Lock Ups（雙關語），是將有問題的代碼包裝在window.setTimeout中。現在大多數的這些問題是由兩種原因造成的：

加載太多的DOM元素
處理一組DOM元素很多很多次，特別是如果你有多個觀察家。

如何解決這個問題：使用Google調試分析工具（特別是堆快照）來跟蹤您的DOM元素。它實際上非常棒。

很可能你正在加載太多不必要的DOM元素。嘗試通過在作用域對象上使用某些標誌來延遲加載它們。

例如，我們需要顯示一個供用戶選擇的項目樹，並且我們正在將所有項目加載到數十萬個數據庫中。這削弱了IE並放慢了Chrome瀏覽器。我所做的只是加載頂級類別，並且只在擴展類別時才加載子類。尋找這樣的優化。

這些類型的問題不會在具有幾千條記錄的開發數據庫中顯示。它們只會顯示在生產數據庫和發佈日期中，所以請花時間瀏覽您的文檔結構並找出風險點。

您還可以使用Chrome調試器的AnugularJS選項卡（性能部分）。它是一個很棒的工具，它可以顯示DOM元素中的觀察者。看一看。

來源

2014-10-09 23:45:57 Aidin

調試AngularJS Internet Explorer鎖定

回答

相關問題