feat(cdk/scrolling): Integrate Pretext Library for Precise Text Measurement in Auto-Size Virtual Scroll
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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_
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với AutoSizeVirtualScrollStrategy và ItemSizeAverager của nó, sau đó xem xét các API prepare() và layout() được đề xuất của Pretext cũng như sự khác biệt giữa các mục có nhiều văn bản và các layout phức tạp. Xác định phạm vi tích hợp, hành vi fallback và các bước xác thực cần thiết để chứng minh việc định kích thước chính xác mà không gây ra hồi quy.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend, performance
- Loại issue
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 35/100