Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#33,011 1 comentario 5 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Tranquilo
Stack tecnológico
angular, typescript
Área
frontend, performance

Línea de trabajo

Comienza con AutoSizeVirtualScrollStrategy y su ItemSizeAverager; después, revisa las API propuestas prepare() y layout() de Pretext y cómo difieren los elementos con mucho texto de los diseños complejos. Define el alcance de la integración, el comportamiento de fallback y la validación necesaria para demostrar un dimensionamiento preciso sin regresiones.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

area: cdk/scrolling feature P4
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

Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 11 h
PR fusionados (30 d)
106

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.