perf: cache Intl formatters instead of constructing per render#364
Open
mattcosta7 wants to merge 4 commits into
Open
perf: cache Intl formatters instead of constructing per render#364mattcosta7 wants to merge 4 commits into
mattcosta7 wants to merge 4 commits into
Conversation
mattcosta7
force-pushed
the
perf/cache-intl-formatters
branch
from
4a0a9b0 to
a39a74d
Compare
Constructing Intl.*Format is expensive (often more than format() itself), yet update() built fresh DateTimeFormat/RelativeTimeFormat/Locale instances on every tick, and the DurationFormat ponyfill built a NumberFormat per unit plus a ListFormat per format. On pages with many <relative-time> elements this dominates tick cost. Add a shared src/intl-cache.ts memoizing DateTimeFormat, RelativeTimeFormat, NumberFormat, and Locale by locale+options, and route every formatter path through it: all formatters in relative-time-element.ts, NumberFormat/ListFormat in duration-format-ponyfill.ts, and DurationFormat instances in duration.ts. The 12h-cycle probe is memoized once. Formatters are immutable/stateless so sharing across elements is safe.
The #lang, timeZone, and hourCycle getters each walk ancestors via closest(), and were read by multiple formatters per tick. Resolve them a single time at the top of update() and thread them into the formatting helpers, avoiding repeated DOM traversal per render.
- Return 'default' locale without constructing Intl.Locale('') each tick
- Key Duration formatter cache by recognized options (no JSON.stringify/toJSON)
- Bound all Intl caches with an LRU and evict least-recently-used entries
- Invalidate cached formatters and memoized hour-cycle on languagechange
mattcosta7
force-pushed
the
perf/cache-intl-formatters
branch
from
838c4d4 to
f66d5a2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Constructing an
Intl.*Formatis expensive — frequently more costly than the subsequent.format()call. Yetupdate()builds fresh formatters on every tick, and a page can render hundreds of<relative-time>elements, so this dominates per-tick cost.Per render today, an element could construct:
Intl.DateTimeFormatfor the title, and again for datetime /#isToday/#isCurrentYear/ absolute-time pathsIntl.RelativeTimeFormatfor relative/micro/absolute formattingIntl.Localeon every#langaccess (and#langis read once per formatter)NumberFormatper unit (up to 8) plus aListFormatperformat()DurationFormatpertoLocaleStringChanges
src/intl-cache.tsmemoizingDateTimeFormat,RelativeTimeFormat,NumberFormat, andLocalebylocale+JSON.stringify(options). Instances are shared across all elements. Formatters are immutable/stateless, so sharing is safe; the set of distinct (locale, options) combos on a page is small and bounded, so a plainMapneeds no eviction.DateTimeFormat/RelativeTimeFormatsites +Intl.Localeinrelative-time-element.ts,NumberFormat/ListFormatinduration-format-ponyfill.ts, andDurationFormatinduration.ts.isBrowser12hCycle).#lang/timeZone/hourCycleonce perupdate()(each is aclosest()DOM walk read by several formatters per tick) and thread them into the formatting helpers.Tests
Added
test/intl-cache.tsasserting instance reuse for identical locale+options, distinct instances for differing options/locales, and thatundefinedoption values key the same as absent ones. Full suite passes in Chromium.Notes
perf/skip-noop-render-writesbranch, so its diff shows only the formatter changes. Merge perf: skip redundant render-root and title writes on no-op ticks #363 first, then this fast-forwards with no conflict.undefinedoption values (e.g. an absenttimeZone) are dropped byJSON.stringify, matching the behavior of passing them explicitly — verified by test.