Skip to content

perf: late evaluate document.font.ready#604

Merged
PupilTong merged 2 commits intolynx-family:mainfrom
PupilTong:p/hw/late-document-fonts-ready
Apr 23, 2025
Merged

perf: late evaluate document.font.ready#604
PupilTong merged 2 commits intolynx-family:mainfrom
PupilTong:p/hw/late-document-fonts-ready

Conversation

@PupilTong
Copy link
Collaborator

@PupilTong PupilTong commented Apr 22, 2025

No description provided.

@PupilTong PupilTong requested a review from Copilot April 22, 2025 10:24
@changeset-bot
Copy link

changeset-bot bot commented Apr 22, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 530e466

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@lynx-js/web-elements Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@PupilTong PupilTong self-assigned this Apr 22, 2025
Copilot AI reviewed Apr 22, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces performance improvements related to document.font.ready evaluation while updating associated tests and Lighthouse configurations.

  • Added new performance test pages and updated raw-text-large test
  • Adjusted Lighthouse settings and CI throttling parameters
  • Refactored XTextTruncation to use async/await for delayed font readiness evaluation

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/web-platform/web-tests/tests/web-elements/performance/x-text-with-font.html New HTML test page for x-text with font specifications
packages/web-platform/web-tests/tests/web-elements/performance/raw-text-large.html Removed an unused element creation in test setup
packages/web-platform/web-tests/tests/lighthouse.cases.js Added performance assertions for the new test page
packages/web-platform/web-tests/lighthouserc.js Updated CPU slowdown multiplier based on environment
packages/web-platform/web-elements/src/XText/XTextTruncation.ts Refactored truncation logic for async font readiness evaluation
.changeset/loose-moments-itch.md Added changeset noting the performance improvement
Comments suppressed due to low confidence (2)

packages/web-platform/web-elements/src/XText/XTextTruncation.ts:125

  • [nitpick] Resetting the scheduled flag inside a nested queueMicrotask after awaiting the layout update may delay the flag reset longer than intended. Consider merging the reset into the async block if immediate flag clearing is desired.
this.#scheduledTextLayout = false;

packages/web-platform/web-elements/src/XText/XTextTruncation.ts:137

  • The explicit await on document.fonts.ready changes the timing of subsequent attribute handling. Please verify that calling this.#handleAttributeChange() immediately after waiting for fonts.ready does not introduce unintended side effects.
await document.fonts.ready;

@PupilTong PupilTong requested a review from Sherry-hue April 22, 2025 10:28
@codecov
Copy link

codecov bot commented Apr 22, 2025

Bundle Report

Changes will decrease total bundle size by 11 bytes (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
@lynx-js/web-explorer-web-array-push 315.97kB -11 bytes (-0.0%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: @lynx-js/web-explorer-web-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
static/js/index.js -11 bytes 148.94kB -0.01%

@codecov
Copy link

codecov bot commented Apr 22, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

@codspeed-hq
Copy link

codspeed-hq bot commented Apr 22, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #604 will not alter performance

Comparing PupilTong:p/hw/late-document-fonts-ready (530e466) with main (1a61be6)

Summary

✅ 1 untouched benchmarks

@PupilTong PupilTong force-pushed the p/hw/late-document-fonts-ready branch from 46cd68f to 22e75a0 Compare April 22, 2025 11:49
@PupilTong PupilTong moved this to In Progress in Lynx for Web Apr 22, 2025
@PupilTong PupilTong force-pushed the p/hw/late-document-fonts-ready branch from 22e75a0 to 530e466 Compare April 22, 2025 14:27
@PupilTong PupilTong added this pull request to the merge queue Apr 23, 2025
Merged via the queue into lynx-family:main with commit 45d55b7 Apr 23, 2025
26 checks passed
@PupilTong PupilTong deleted the p/hw/late-document-fonts-ready branch April 23, 2025 05:00
@github-project-automation github-project-automation bot moved this from In Progress to Done in Lynx for Web Apr 23, 2025
@github-actions github-actions bot mentioned this pull request Apr 23, 2025
Merged
colinaaa pushed a commit that referenced this pull request Apr 24, 2025
@PupilTong @colinaaa
perf: late evaluate document.font.ready (#604)
6fc3cf3
colinaaa pushed a commit to colinaaa/lynx-stack that referenced this pull request Apr 24, 2025
@PupilTong @colinaaa
perf: late evaluate document.font.ready (lynx-family#604)
10fa7c4
colinaaa pushed a commit that referenced this pull request Apr 27, 2025
@github-actions
chore: Release 2025-04-27 12:05:46 (#597)
cd04273 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @lynx-js/react@0.107.0

### Minor Changes

- Some of the timing keys are renamed to match the naming convention of
the Lynx Engine.
([#438](#438))

    -   `update_set_state_trigger` -> `updateSetStateTrigger`
    -   `update_diff_vdom_start` -> `updateDiffVdomStart`
    -   `update_diff_vdom_end` -> `updateDiffVdomEnd`
    -   `diff_vdom_start` -> `diffVdomStart`
    -   `diff_vdom_end` -> `diffVdomEnd`
    -   `pack_changes_start` -> `packChangesStart`
    -   `pack_changes_end` -> `packChangesEnd`
    -   `parse_changes_start` -> `parseChangesStart`
    -   `parse_changes_end` -> `parseChangesEnd`
    -   `patch_changes_start` -> `patchChangesStart`
    -   `patch_changes_end` -> `patchChangesEnd`
    -   `hydrate_parse_snapshot_start` -> `hydrateParseSnapshotStart`
    -   `hydrate_parse_snapshot_end` -> `hydrateParseSnapshotEnd`
    -   `mts_render_start` -> `mtsRenderStart`
    -   `mts_render_end` -> `mtsRenderEnd`

### Patch Changes

- Add testing library for ReactLynx
([#74](#74))

- Refactor: Improved naming for list operation related types. Renamed
`UpdateAction` interface to `ListOperations`.
([#592](#592))

- Support using `"jsx": "react-jsx"` along with `"jsxImportSource":
"@lynx-js/react"` in `tsconfig.json`.
([#545](#545))

    ```json
    {
      "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "@lynx-js/react"
      }
    }
    ```

This configuration enhances TypeScript definitions for standard JSX
elements,
providing type errors for unsupported elements like `<div>` or
`<button>`.

- fix: JSX elements with dynamic `key={expr}` now wrapped in `wrapper`
element to prevent merging.
([#547](#547))

## @lynx-js/web-elements@0.7.0

### Minor Changes

-   fix: ([#629](#629))

    -   typo of `initial-scroll-offset` in scroll-view.
- scroll-view's `initial-scroll-index` is changed to
`initial-scroll-to-index`.

### Patch Changes

- fix: x-image border-radius setting has no effect.
([#638](#638))

- perf: late evaluate document.font.ready
([#604](#604))

- perf: improve raw-text performance
([#601](#601))

- fix: the scroll-x field of scroll-view needs to be handled correctly.
([#635](#635))

Before this, scroll-x of '' would result in no scrolling along x-axis.

- feat: x-list supports `need-visible-item-info`, now you can get
visible cells info in `scroll`、`scrolltoupper`、`scrolltolower` event.
([#595](#595))

## @lynx-js/web-mainthread-apis@0.13.0

### Minor Changes

- fix: mts lynx will no longer provide requireModule, requireModuleAsync
methods, which is aligned with Native.
([#537](#537))

### Patch Changes

- refactor: isolate SystemInfo
([#628](#628))

    Never assign `SystemInfo` on worker's self object.

- feat: support thread strategy `all-on-ui`
([#625](#625))

    ```html
    <lynx-view thread-strategy="all-on-ui"></lynx-view>
    ```

    This will make the lynx's main-thread run on the UA's main thread.

Note that the `all-on-ui` does not support the HMR & chunk splitting
yet.

- fix(web): `:root` not work on web platform
([#607](#607))

Note: To solve this issue, you need to upgrade your
`react-rsbuild-plugin`

- refactor: move mainthread impl into mainthread-api packages
([#622](#622))

- fix(web): css selector not work for selectors with combinator and
pseudo-class on WEB
([#608](#608))

    like `.parent > :not([hidden]) ~ :not([hidden])`

you will need to upgrade your `react-rsbuild-plugin` to fix this issue

- Updated dependencies
\[[`4ee0465`](4ee0465),
[`5a3d9af`](5a3d9af),
[`5269cab`](5269cab)]:
    -   @lynx-js/web-constants@0.13.0

## @lynx-js/rspeedy@0.9.3

### Patch Changes

- Bump Rsbuild v1.3.11 with Rspack v1.3.6.
([#594](#594))

## create-rspeedy@0.9.3

### Patch Changes

- Add testing library for ReactLynx
([#74](#74))

- Use `"jsx": "react-jsx"` with `"jsxImportSource": "@lynx-js/react"`.
([#545](#545))

## @lynx-js/qrcode-rsbuild-plugin@0.3.6

### Patch Changes

- Fix the issue where QR code fails to print after initial compilation
errors are fixed.
([#610](#610))

## @lynx-js/react-rsbuild-plugin@0.9.8

### Patch Changes

- Support @lynx-js/react v0.107.0
([#438](#438))

- fix(web): `:root` not work on web platform
([#607](#607))

Note: To solve this issue, you need to upgrade your
`react-rsbuild-plugin`

- Refactor: Replace built-in `background-only` implementation with npm
package ([#602](#602))

    Previously we maintained custom files:

    -   `empty.ts` for background thread
    -   `error.ts` for main thread validation

    Now adopting the standard `background-only` npm package

- fix(web): css selector not work for selectors with combinator and
pseudo-class on WEB
([#608](#608))

    like `.parent > :not([hidden]) ~ :not([hidden])`

you will need to upgrade your `react-rsbuild-plugin` to fix this issue

- Updated dependencies
\[[`6a5fc80`](6a5fc80),
[`06bb78a`](06bb78a),
[`f3afaf6`](f3afaf6),
[`bf9c685`](bf9c685),
[`5269cab`](5269cab)]:
    -   @lynx-js/react-webpack-plugin@0.6.12
    -   @lynx-js/web-webpack-plugin@0.6.6
    -   @lynx-js/template-webpack-plugin@0.6.10
    -   @lynx-js/react-alias-rsbuild-plugin@0.9.8
    -   @lynx-js/react-refresh-webpack-plugin@0.3.2
    -   @lynx-js/css-extract-webpack-plugin@0.5.3

## @lynx-js/react-alias-rsbuild-plugin@0.9.8

### Patch Changes

- Refactor: Replace built-in `background-only` implementation with npm
package ([#602](#602))

    Previously we maintained custom files:

    -   `empty.ts` for background thread
    -   `error.ts` for main thread validation

    Now adopting the standard `background-only` npm package

## @lynx-js/test-environment@0.0.1

### Patch Changes

- Add testing library for ReactLynx
([#74](#74))

## @lynx-js/offscreen-document@0.0.1

### Patch Changes

- feat: support parentNode
([#625](#625))

## @lynx-js/web-constants@0.13.0

### Patch Changes

- refactor: isolate SystemInfo
([#628](#628))

    Never assign `SystemInfo` on worker's self object.

- refactor: move mainthread impl into mainthread-api packages
([#622](#622))

- fix(web): css selector not work for selectors with combinator and
pseudo-class on WEB
([#608](#608))

    like `.parent > :not([hidden]) ~ :not([hidden])`

you will need to upgrade your `react-rsbuild-plugin` to fix this issue

-   Updated dependencies \[]:
    -   @lynx-js/web-worker-rpc@0.13.0

## @lynx-js/web-core@0.13.0

### Patch Changes

- refactor: isolate SystemInfo
([#628](#628))

    Never assign `SystemInfo` on worker's self object.

- feat: support thread strategy `all-on-ui`
([#625](#625))

    ```html
    <lynx-view thread-strategy="all-on-ui"></lynx-view>
    ```

    This will make the lynx's main-thread run on the UA's main thread.

Note that the `all-on-ui` does not support the HMR & chunk splitting
yet.

- fix(web): css selector not work for selectors with combinator and
pseudo-class on WEB
([#608](#608))

    like `.parent > :not([hidden]) ~ :not([hidden])`

you will need to upgrade your `react-rsbuild-plugin` to fix this issue

- Updated dependencies
\[[`4ee0465`](4ee0465),
[`74b5bd1`](74b5bd1),
[`06bb78a`](06bb78a),
[`5a3d9af`](5a3d9af),
[`5269cab`](5269cab),
[`74b5bd1`](74b5bd1),
[`2b069f8`](2b069f8)]:
    -   @lynx-js/web-mainthread-apis@0.13.0
    -   @lynx-js/web-worker-runtime@0.13.0
    -   @lynx-js/web-constants@0.13.0
    -   @lynx-js/offscreen-document@0.0.1
    -   @lynx-js/web-worker-rpc@0.13.0

## @lynx-js/web-explorer@0.0.6

### Patch Changes

- fix: allow lynxjs.org to access native modules
([#599](#599))

## @lynx-js/web-worker-runtime@0.13.0

### Patch Changes

- refactor: isolate SystemInfo
([#628](#628))

    Never assign `SystemInfo` on worker's self object.

- feat: support thread strategy `all-on-ui`
([#625](#625))

    ```html
    <lynx-view thread-strategy="all-on-ui"></lynx-view>
    ```

    This will make the lynx's main-thread run on the UA's main thread.

Note that the `all-on-ui` does not support the HMR & chunk splitting
yet.

- refactor: move mainthread impl into mainthread-api packages
([#622](#622))

- Updated dependencies
\[[`4ee0465`](4ee0465),
[`74b5bd1`](74b5bd1),
[`06bb78a`](06bb78a),
[`5a3d9af`](5a3d9af),
[`5269cab`](5269cab),
[`74b5bd1`](74b5bd1),
[`2b069f8`](2b069f8)]:
    -   @lynx-js/web-mainthread-apis@0.13.0
    -   @lynx-js/web-constants@0.13.0
    -   @lynx-js/offscreen-document@0.0.1
    -   @lynx-js/web-worker-rpc@0.13.0

## @lynx-js/react-webpack-plugin@0.6.12

### Patch Changes

- Support @lynx-js/react v0.107.0
([#438](#438))

## @lynx-js/template-webpack-plugin@0.6.10

### Patch Changes

- Fix CSS import order when `enableCSSSelector` is false.
([#609](#609))

When the `enableCSSSelector` option is set to false, style rule priority
is inversely related to `@import` order(Lynx CSS engine has the
incorrect behavior). Reversing the import order to maintain correct
priority is required. For example:

    ```css
    @import "0.css";
    @import "1.css";
    ```

    will convert to:

    ```css
    @import "1.css";
    @import "0.css";
    ```

## @lynx-js/web-webpack-plugin@0.6.6

### Patch Changes

- fix(web): `:root` not work on web platform
([#607](#607))

Note: To solve this issue, you need to upgrade your
`react-rsbuild-plugin`

- fix(web): css selector not work for selectors with combinator and
pseudo-class on WEB
([#608](#608))

    like `.parent > :not([hidden]) ~ :not([hidden])`

you will need to upgrade your `react-rsbuild-plugin` to fix this issue

## upgrade-rspeedy@0.9.3



## @lynx-js/web-worker-rpc@0.13.0

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@Sherry-hue Sherry-hue Sherry-hue approved these changes

Assignees

@PupilTong PupilTong

Labels

platform:Web

Projects

Lynx for Web
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@PupilTong @Sherry-hue