追加パフォーマンス最適化

tr レイヤー化

CSSで transform:translateZ(0) を設定して各tr行をレイヤー化します。これはパフォーマンスに役立ちます。
- 合成レイヤーの昇格により、黒い背景と赤いテキストのテキストの色が変更される場合があります。
- ~~以下のケースでこの機能を有効にしてみてください~~
  - ~~複雑な customCell コンポーネントが多い場合~~
  - ~~ハイライトアニメーションが多い場合~~

スクロール遅延の軽減が顕著かどうかを確認するために、以下のCSSを追加してみてください（低パフォーマンスマシンでより顕著）。

css

.stk-table tbody tr {
  transform: translateZ(0);
}

スクロール時の白屏

ネイティブスクロールバー
行単位スクロールを試してください。scroll-row-by-row
tr レイヤー化を試してください。
.stk-table 要素に背景色を追加しないでください。
組み込みスクロールバーを使用。scrollbar

ハイライト

ハイライトフレームレートを指定するために props.highlightConfig.fps を設定します。フレームレートを下げるとリソース使用量の削減に役立ちます。
- 推奨値：30fps。最小推奨値：15fps

relative fixed

props.cellFixedMode が relative に設定されている場合、固定列とヘッダーは相対位置を使用して実装され、sticky 実装と比較してレンダリング合成レイヤーが少なくなります。
問題：縦方向仮想スクロールが有効で横方向仮想スクロールが無効な場合、一部の列幅が設定されていないと、縦スクロールによる列幅の変更が右固定列の計算誤差を引き起こす可能性があります。

props.autoResize

監視のパフォーマンスコストを排除するために手動で props.autoResize=false を設定します。幅と高さが固定のテーブルに適しています。

props.smoothScroll

一部のブラウザバージョンにはデフォルトの慣性スクロールがあります。スクロールが速すぎると白屏が発生する可能性があります。したがって、Chrome > 85 ではデフォルトで無効になっており、onwheel を使用してスクロールをプロキシし、白屏を防止します。