Angular 4應用程序的瀏覽器性能問題

我是Angular 4應用程序的全新產品，並且已經瞭解了幾個星期。環境是Node v6.11.0，NPM 3.10.10，Angular CLI 1.1.3，Typescript 2.2.2.0。Angular 4應用程序的瀏覽器性能問題

我顯示直接從幾個SQL Server表中檢索到的數據。我有一張有140列和幾千行的桌子。我最近編寫了一個分頁機制來獲取1000個行塊的記錄，並且MS WebAPI後端在本地開發筆記本電腦的5秒左右內將這些數據提供給Angular應用程序。上週我們向數據庫添加了大量的行。以前只有20條記錄，並且這個少量的行沒有性能問題。

此Angular應用程序使用服務從使用http.get的SQL Server獲取數據，並將其映射到來自SQL Server的json數組行。很基本的東西，這一點沒有問題。

顯示1000條記錄的大塊是性能下降的地方。這只是一個簡單的靜態顯示，沒有輸入字段，不允許用戶編輯顯示的數據。

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th style="width:auto;" *ngFor="let column of columns"> 
       {{column}} 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of data"> 
      <td *ngFor="let column of columns">{{item[column]}}</td> 
     </tr> 
    </tbody> 

    <tfoot> 
    </tfoot> 
</table>

隨着1000個記錄塊，即11扼流圈，能夠抓住前1000個記錄和顯示器30秒左右之後，但隨後下一個塊上，它只是顯示一個空白屏幕和瀏覽器必須關閉。 Chrome對它的處理要好得多，但從接收數據到呈現數據時仍有很大的延遲。

我發現IE11處理50個記錄塊對於這個特定的表格來說相當好，但是在50到100個塊大小之間，IE開始窒息。不幸的是，我們的客戶想要使用IE而不是Chrome或Firefox。

我在StackOverflow上發現了一些類似的問題，但他們都沒有解決這個問題。任何人都可以提出提高性能的方法嗎我不確定Angular在後臺做了多少處理，並且不應該需要任何綁定，因爲這是數據的靜態顯示。默認情況下，Angular是否具有綁定功能，可能會導致延遲渲染可以以某種方式關閉的數據？

我試着實現「沒有軌道」，但沒有任何性能上的差異。

感謝您的任何建議您角度的老兵可以提供指向我在正確的方向。

來源

2017-08-07 CardsFan

我不知道這是否會提高這麼多..但儘量把[innerText屬性]，而不是{{}}：

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th style="width:auto;" *ngFor="let column of columns" [innerText]="column"> 

      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of data"> 
      <td *ngFor="let column of columns" [innerText]="item[column]"></td> 
     </tr> 
    </tbody> 

    <tfoot> 
    </tfoot> 
</table>

還有一件事......爲什麼不你試試paginate的結果??

希望它可以幫助你

來源

2017-08-07 14:52:59

謝謝，我會給你一個鏡頭。我已經實現了分頁，但客戶端要爲每個頁面使用1000個記錄塊。我們會看看這是否可能。感謝fredrico！ – CardsFan

Angular 4應用程序的瀏覽器性能問題

回答

相關問題