Skip to content

perf: improve raw-text performance#601

Merged
PupilTong merged 1 commit intolynx-family:mainfrom
PupilTong:p/hw/raw-text-use-Text
Apr 23, 2025
Merged

perf: improve raw-text performance#601
PupilTong merged 1 commit intolynx-family:mainfrom
PupilTong:p/hw/raw-text-use-Text

Conversation

@PupilTong
Copy link
Copy Markdown
Collaborator

@PupilTong PupilTong commented Apr 22, 2025

use new Text() to replace innerHTML

@PupilTong
perf: improve raw-text performance
0e3a37e 
use `new Text()` to replace innerHTML
@PupilTong PupilTong requested a review from Copilot April 22, 2025 07:35
@PupilTong PupilTong self-assigned this Apr 22, 2025
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 22, 2025

🦋 Changeset detected

Latest commit: 0e3a37e

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

Copilot AI reviewed Apr 22, 2025
View reviewed changes
Copy link
Copy Markdown
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 pull request updates performance test thresholds and improves raw-text performance by replacing innerHTML manipulation with a new Text node.

  • Updated Lighthouse performance thresholds in web-tests
  • Replaced innerHTML assignment with a new Text node in RawText to improve performance
  • Updated the changelog to reflect performance improvements

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
packages/web-platform/web-tests/tests/lighthouse.cases.js Adjusted performance threshold values for Lighthouse tests
packages/web-platform/web-elements/src/XText/RawText.ts Replaced innerHTML with new Text node and removed previous text node for better performance
.changeset/shaky-games-cough.md Recorded changelog entry for performance improvements
Comments suppressed due to low confidence (1)

packages/web-platform/web-tests/tests/lighthouse.cases.js:31

  • [nitpick] Review and verify that the updated performance thresholds align with current test expectations, and document the rationale if necessary.
'minScore': 0.87,

@codecov
Copy link
Copy Markdown

codecov bot commented Apr 22, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

@codecov
Copy link
Copy Markdown

codecov bot commented Apr 22, 2025

Bundle Report

Changes will increase total bundle size by 31 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
@lynx-js/web-explorer-web-array-push 316.01kB 31 bytes (0.01%) ⬆️

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 31 bytes 148.98kB 0.02%

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq bot commented Apr 22, 2025

CodSpeed Performance Report

Merging #601 will not alter performance

Comparing PupilTong:p/hw/raw-text-use-Text (0e3a37e) with main (1a61be6)

Summary

✅ 1 untouched benchmarks

@PupilTong PupilTong requested a review from Sherry-hue April 22, 2025 10:23
@PupilTong PupilTong added this pull request to the merge queue Apr 23, 2025
Merged via the queue into lynx-family:main with commit 9cc2b7e Apr 23, 2025
27 checks passed
@PupilTong PupilTong deleted the p/hw/raw-text-use-Text branch April 23, 2025 05:00
@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: improve raw-text performance (#601)
8fe9b6e 
use `new Text()` to replace innerHTML
colinaaa pushed a commit to colinaaa/lynx-stack that referenced this pull request Apr 24, 2025
@PupilTong @colinaaa
perf: improve raw-text performance (lynx-family#601)
9ce9574 
use `new Text()` to replace innerHTML
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