Angular 2 應用程序僅在 Chrome DevTools 打開時反應非常緩慢

Question

我的 Angular 2 應用程序對按鍵輸入、按鈕點擊、跨輸入切換等的響應速度很慢（1-5 秒），只有當 Chrome 開發者工具打開時。 Material 2 動畫也變得緩慢且斷斷續續。

我已經開發這個應用程序三個月了，每天都在使用 Chrome DevTools。 這個問題似乎在一夜之間突然出現。

我知道的：

• 我隱藏了所有待處理的應用程序更改，以將我的應用程序恢復到這不是問題的時候。 問題一直存在。
• Chrome DevTools 似乎不會在同一瀏覽器會話中減慢任何其他應用程序（即谷歌收件箱、谷歌地圖）的速度。
• 令人抓狂的是，當我運行 DevTools 的時間軸“記錄”以嘗試了解問題時，問題消失了，頁面再次以正常速度做出反應！ 我認為這是我擁有的最佳線索，但我不太了解 DevTools 的內部工作原理，無法了解“時間線記錄”如何改變事物。
• 我重新啟動了 Chrome 並刪除了所有緩存的數據。
• 當我在 Firefox 或 IE 中打開開發人員工具時，沒有任何類似的事情發生。

任何關於下一步去哪里的建議將不勝感激！

Answer 1

我已經解決了這個問題，但我永遠不會知道是什么導致了它。 可能是我不小心更改的設置。

我刪除了 Chrome 應用程序並重新安裝，一切恢復正常。 如果其他人有這個問題或想要做出貢獻，我將保留這個問題。

Answer 2

最終答案：

刪除所有斷點

即使他們沒有被擊中，這也會為我修復它並使性能恢復正常。

如果您有記錄斷點，則可能是一個更大的問題 - 因此，如果您附加到斷點，請先嘗試刪除那些斷點。

---

以前的答案：

我想出了一個解決方法 - 盡管仍然沒有真正弄清楚什么是真正的錯誤。

我還發現了一堆我什至不知道存在的工具，我之前跳過了它們 - 它們在More tools 。

首先打開Performance Monitor 。 這顯示了為您的 Chrome 選項卡隔離的一個很好的 CPU 圖表 - Windows 任務管理器和以往一樣無用。

這是我從mat-calendar選擇日期時得到的行為。 沒有其他邏輯在運行 - 只是選擇一個日期。 我從app-component刪除了所有app-component ，只放了一個mat-calendar ，更改日期花了十秒鍾！

其他控件一般都很好。 我可以打開對話框，使用組合框等，而且速度快。 但是選擇一個日期給了我這樣的廢話：

我嘗試清空本地存儲、清除緩存等，然后更改了我網站的端口號。 我只是將dev.example.com:44300更改為dev.example.com:44301 - 換句話說，Chrome 現在認為它是一個不同的網站。

這是我切換端口號后的樣子。

我也使用反向代理服務器得到了同樣的效果——它將我的本地機器放在互聯網上——所以我可以嘗試從其他機器復制這個問題。 我不能。

所以希望對某人有所幫助 - 仍然不知道這台服務器的緩存中有什么對性能產生如此巨大的影響。 但可以肯定，這不僅僅是我的代碼。

---

這里有一些其他的事情可以嘗試：

使用--aot標志進行測試

這對我沒有任何影響，但有助於縮小范圍。

添加一些不做任何事情的控件（作為控件）

通過這種方式，您可以找到是否是某些特定的操作或控制導致速度變慢。 您當然應該能夠立即切換這些。

只需打開和關閉它們，隱藏一些東西。

<mat-radio-group>
    <mat-radio-button [value]="false">
        bloop
    </mat-radio-button> 
    <mat-radio-button [value]="false">
        bloop bloop
    </mat-radio-button> 
</mat-radio-group>

啟用渲染調試選項

確保您沒有不斷地重新渲染整個頁面

上面的渲染選項將在某種程度上顯示這一點，但我喜歡做的一件事就是添加一個隨機文本框 - 輸入它，如果文本隨后消失，您就知道控件已被重新渲染。

 <!-- yes, just a standard text box -->
 <input type="text"/>      

用 *ngIf="false" 隱藏東西

隱藏控件（您的和第三方的）並查看是否有任何問題導致問題。

對我來說，我目前懷疑mat-calendar會導致問題 - 但我仍然很困惑為什么啟用“記錄”會使問題不存在。

Answer 3

在 Chrome 開發工具打開的情況下，每個 Web 應用程序運行緩慢是正常的。

特別是如果您打開了檢查選項卡，它就像同時打開了一個新頁面+在任何塊渲染上都有動畫。

Answer 4

我們今天在同事工作站上遇到了這個問題。 原來它是一個 chrome 擴展（不記得了，名字中帶有“ghost”）。 所以也許可以嘗試使用訪客模式並檢查問題是否仍然存在。 如果沒有，請依次重新激活擴展程序以查看是哪個擴展程序導致了問題。 如果它仍然發生，請遵循其他建議的方法。