Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭
#33,011 1 条评论 5 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
35/100
Issue 类型
功能
描述清晰度
需要澄清
活跃度
冷清
技术栈
angular, typescript

调研方向

从 AutoSizeVirtualScrollStrategy 及其 ItemSizeAverager 开始,然后审查 Pretext 提议的 prepare() 和 layout() API,以及文本内容较多的项目与复杂布局之间的差异。定义集成范围、回退行为以及证明准确尺寸计算且不引入回归所需的验证工作。

由索引模型根据 Issue 内容生成。

描述

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

主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 1 小时
30 天内合并 PR
84

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/components 的其他 Issue

查看 angular/components 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。