數據綁定慢 - Angular 5

Question

我正在開發一個帶有簡單 HttpClient 請求的 Angular 5 應用程序，以從后端獲取單個值。 我將從 API 服務接收到的數據綁定到 HTML。 （使用 [(ngModel)] ）。 API 的響應約為 200 毫秒。 但在屏幕上顯示數據所需的時間約為 3 秒。 我不確定我是否朝着正確的方向前進。 發生這種情況的可能性有哪些？

Answer 1

我前一段時間遇到了同樣的問題，這些是我發現的相關內容，幫助我解決了這個問題。

1. 許多事件監聽器被添加到 DOM 中。 特別是，我發現這些事件偵聽器已添加到document中，假設 20 個click偵聽器已添加到文檔中，因此應用程序中任何地方的每次點擊都會調用所有 20 個點擊處理程序，並將導致整個應用程序的 20 個changeDetection周期。 （我遇到這個問題是因為我使用的是 css 包之一：來自 Bootstrap 的下拉切換）

您可以檢查event listeners器，如下圖所示。

2. 您的應用程序中呈現了很多組件，例如，您有一個包含 100 個項目的列表，列表中的每個項目本身就是一個組件。 現在，當 changeDetection 周期在應用程序中運行時，在某些瀏覽器事件發生時，將檢查整個應用程序以及檢查所有 100 個渲染組件中的更改。 根據您對應用程序的需要，如果您有很多重復組件，您可以將重復組件的changeDetection策略更改為onPush ，這樣，如果它們的引用未更改，至少不會檢查相關組件的所有輸入屬性.

我希望這兩個對您的應用程序有用！

Answer 2

我通過刪除ChangeDetectionStrategy.OnPush來修復它

Answer 3

對於所有遇到這個問題的人，我有一個類似的問題，我正在顯示一個帶有輸入切換的表格，當我打開輸入時，表格（10 行 8 列）將顯示輸入 - 沒有數據綁定對它，一次一個。 一個會顯示暫停，然后是下一個，下一個...問題最終是[(ngModel)]存在問題，添加后缺少[ngModelOptions]="{standalone: true} ，所有顯示一次.