angular / angular/components

feat(cdk/scrolling): Integrate Pretext Library for Precise Text Measurement in Auto-Size Virtual Scroll

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

説明

### Feature Description

**Description:**

### Problem Statement

The current `AutoSizeVirtualScrollStrategy` implementation relies on `ItemSizeAverager` to estimate the size of unseen items based on historical measurements. While this approach works for many scenarios, it has several limitations:

1. **Reflow overhead**: Must render elements first before measuring, triggering expensive layout reflows
2. **Inaccurate predictions**: Averaging-based estimation can be imprecise for heterogeneous content, especially variable-height text items
3. **Performance bottlenecks**: Frequent DOM measurements during scrolling impact performance
4. **Layout shifts**: Predictive scrolling may cause visual jumps when estimated sizes differ significantly from actual sizes

### Proposed Solution

I'd like to propose integrating the **Pretext** library (https://github.com/chenglou/pretext) into the auto-size virtual scroll strategy. Pretext is a pure JavaScript/TypeScript library that provides:

- **Accurate text measurement without DOM**: Calculates text dimensions using pure arithmetic, avoiding `getBoundingClientRect` and `offsetHeight`
- **Excellent performance**: Benchmarks show `layout()` operations at ~0.09ms for 500 texts (hot path)
- **Comprehensive language support**: Handles all languages, emojis, and mixed-bidi text correctly
- **Predictive sizing**: Enables pre-rendering size calculations for virtual lists

### Implementation Ideas

The integration could work as follows:

1. **For text-heavy virtual lists**:
- When items contain primarily text content with known font/line-height configurations
- Use Pretext's `prepare()` + `layout()` API to calculate heights before rendering
- This allows the scroll strategy to know exact item sizes upfront

2. **Hybrid approach**:
- Use Pretext for text content measurement
- Fall back to current DOM measurement for non-text or complex layouts
- Combine both for maximum accuracy

3. **Performance optimization**:
- Cache `PreparedText` objects for reuse during resize events
- Only re-run `layout()` (the cheap 0.09ms operation) when container width changes

### Benefits

- **Eliminates layout reflow** for text measurement in virtual lists
- **More accurate scrolling behavior** with predictable item sizes
- **Better performance** especially for long lists with variable-height text items
- **Reduced visual jumps** during scrolling since sizes are pre-calculated
- **Support for all languages and scripts** including complex layouts

### Example Use Case
- Chat applications with varying message lengths.
- Feeds/Dashboards with dynamic text content.

### Use Case

_No response_

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

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

調査の方向性

AutoSizeVirtualScrollStrategy とその ItemSizeAverager から始め、次に提案されている Pretext の prepare() API と layout() API、およびテキスト量の多い項目と複雑なレイアウトの違いを確認します。正確なサイズ計測をリグレッションなしで示すために、統合範囲、フォールバック動作、必要な検証を定義します。

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

評価

技術スタック
angular, typescript
領域
frontend, performance
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
静か
明瞭さ
説明が足りない
初心者へのやさしさ
35/100

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

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