angular / angular/components

mat-table laggy behavior with large number of elements

オープン
#13,460 コメント 8 件 リアクション 18 件 担当者 0 名 GitHub で見る
area: cdk/table P4 perf
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### Bug, feature request, or proposal:
The mat-table component with selection suffers in performance when the number of elements gets decently large. Selecting a single row or the select all buttons shows a lot of lag that increases as the number of columns increases.

#### What is the expected behavior?
mat-table should be able to support good performance for large number of rows.

#### What is the current behavior?
Slow, laggy animations from clicking on single row checkbox or checkbox for select all

#### What are the steps to reproduce?
Providing a StackBlitz reproduction is the *best* way to share your issue.

https://stackblitz.com/edit/angular-vyv97t
Update table with 100 rows, click a few checkboxes.
Update table with 1,000 rows, click a few checkboxes.
Update table with 10,000 rows, click a few checkboxes.

The performance gets significantly worse.

#### What is the use-case or motivation for changing an existing behavior?
Creating a table which contains lot of entries from the some backend API service. The user should be able to experience smooth UI and user experience.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 6, Material 6.4.7, Chrome

#### Is there anything else we should know?

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz の再現手順から始め、列数を変えながら、100 行、1,000 行、10,000 行でのチェックボックス操作を比較します。mat-table の選択動作をプロファイリングして、遅延の原因を特定します。大規模なテーブルで個々の行およびすべての行を選択しても応答性が維持されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend, performance
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。