feat(cdk/scrolling): Integrate Pretext Library for Precise Text Measurement in Auto-Size Virtual Scroll
Les mainteneurs répondent en général sous 1 jour
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 5/5
- Temps estimé
- Plus d'une semaine
- Accessibilité débutants
- 35/100
- Type d'issue
- Fonctionnalité
- Clarté
- À clarifier
- Activité
- Calme
- Stack technique
- angular, typescript
- Domaine
- frontend, performance
Piste de recherche
Commencez par AutoSizeVirtualScrollStrategy et son ItemSizeAverager, puis examinez les API prepare() et layout() proposées de Pretext ainsi que les différences entre les éléments riches en texte et les mises en page complexes. Définissez le périmètre de l’intégration, le comportement de repli et la validation nécessaire pour démontrer un dimensionnement précis sans régressions.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
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:
- Reflow overhead: Must render elements first before measuring, triggering expensive layout reflows
- Inaccurate predictions: Averaging-based estimation can be imprecise for heterogeneous content, especially variable-height text items
- Performance bottlenecks: Frequent DOM measurements during scrolling impact performance
- 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
getBoundingClientRectandoffsetHeight - 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:
-
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
-
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
-
Performance optimization:
- Cache
PreparedTextobjects for reuse during resize events - Only re-run
layout()(the cheap 0.09ms operation) when container width changes
- Cache
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
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 7 h
- PR mergées (30 j)
- 92
Préparer son environnement
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de angular/components
-
area: material/datepicker P4
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
angular/components#33763 · 2 commentaires · 3 réactions ·
Les mainteneurs répondent en général sous 1 jour
-
area: material/table P4
Difficulté 1/5 Moins d'une heure Accessibilité débutants 88/100
angular/components#33709 · 1 commentaire ·
Les mainteneurs répondent en général sous 1 jour
-
area: material/table docs gemini-triaged P4
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
angular/components#33455 ·
Les mainteneurs répondent en général sous 1 jour
-
area: material/core gemini-triaged P3
Difficulté 1/5 Moins d'une heure Accessibilité débutants 78/100
angular/components#33059 · 2 commentaires ·
Les mainteneurs répondent en général sous 1 jour
-
area: material/dialog P2
Difficulté 2/5 1-3 heures Accessibilité débutants 64/100
angular/components#30536 · 3 réactions ·
Les mainteneurs répondent en général sous 1 jour
Toutes les issues de angular/components
Issues similaires
-
Difficulté 2/5 1-3 heures Accessibilité débutants 76/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 76/100
rohitg00/agentmemory#1428 ·
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 86/100
boxlite-ai/boxlite#1729 ·
Les mainteneurs répondent en général sous 1 jour
-
Detect Deno tasks from deno.jsonOuvertedetectors enhancement good first issue
Difficulté 2/5 1-3 heures Accessibilité débutants 86/100
SM260845/readme-gen#1 ·
-
Difficulté 2/5 1-3 heures Accessibilité débutants 88/100
angular/angularfire#3774 ·
Les mainteneurs répondent en général sous 2 jours