↑ これの日本語版です (Japanese version of this article)
業務でag-gridというテーブルのライブラリを使っていました
ある日同僚のQAの方からこんなタスクが作成されました
テーブルにデータが500ぐらいあると、スクロールがスムーズに動かないです。またたまに動かなくなります
▼ 調査開始ですが、まずこのprojetでは tree data grid と呼ばれるものを使用していました。
tree-data
しかし他のタスクで既に、Javascriptを使用し画像のような縦線を入れておりました
なので直感的に「あ、DOM operationしてるこの線が原因だろうなぁ」と思ってました。
しかしそれは厳禁、前ここで書いたように、パフォーマンスに関しては「予測するな、測れ」が基本原則なので、測ることにしました。
google chrome > Inspect > Performance
ジャーン
２箇所重い部分が見つかりました(オレンジと青の線)
- オレンジ -> JS scripting
- 青 -> styleの再計算
1.オレンジ部分
userComponentFactory.newCellRendererというag-gridの関数を見つけました、これはtableのcellをcustomizeするときの関数です
cell renderer (string以外をcellで使用したい時など)
これを削除できたらよかったですが、プロジェクトではリンクやhoverでのtooltip表示があり、できませんでした。
2.青い部分
↑ これが私が直感で思った「Javascriptで縦の線を入れる」部分です。
しかし思っていたよりもかなり軽い。。。
そしてもっと重い処理を見つけました
redrawAfterScroll()
👨💻 スクロール後の何か関数。。
removeRowCompos()
RowContainerComponent.removeRowElement()
👨💻 remove row ...??
最初は意味がわかりませんでしたが、後にrowBuffer: 100というag-gridの設定をコード内で見つけました。
RowBuffer
RowBufferってなに？？
例えばサーバーから1万データがきたとします、するとDOM作成に時間がかかりすぎてブラウザがcrashするかもしれません。
なのでag-gridはデフォルトで表示以外に上下10列DOMを作成する設定になってます(Row buffer: 10の状態)
この数値がプロジェクトでは100になっていました、するとこうなります
1, 500データをサーバーから取得
2, 100列DOMを作成
3, スクロールします
4, 新しいDOMを作成し、前のDOMを削除...この繰り返し
この見えない位置の上下100列を保つための関数RowContainerComponent.removeRowElement()が重かったのです。
😮 ではどうRowBufferを設定したのか？
max-rendered-rows
ag-gridでは設定をmax 500だと記載があり、450に設定しました。(500だと重すぎた)
もちろん最初のダウンロードで時間はかかりますが、スクロール中のラグやクラッシュよりかは良いので、こうしました。
Top comments (0)