From 0e3a37e6b8cdb8cf20c3914e228386c3bbccb72b Mon Sep 17 00:00:00 2001
From: pupiltong <12288479+PupilTong@users.noreply.github.com>
Date: Tue, 22 Apr 2025 15:34:40 +0800
Subject: [PATCH] perf: improve raw-text performance

use `new Text()` to replace innerHTML
---
 .changeset/shaky-games-cough.md                           | 5 +++++
 packages/web-platform/web-elements/src/XText/RawText.ts   | 7 ++++---
 packages/web-platform/web-tests/tests/lighthouse.cases.js | 4 ++--
 3 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/shaky-games-cough.md

diff --git a/.changeset/shaky-games-cough.md b/.changeset/shaky-games-cough.md
new file mode 100644
index 0000000000..37090781ab
--- /dev/null
+++ b/.changeset/shaky-games-cough.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+perf: improve raw-text performance
diff --git a/packages/web-platform/web-elements/src/XText/RawText.ts b/packages/web-platform/web-elements/src/XText/RawText.ts
index f2dd5f618e..dcd95e758d 100644
--- a/packages/web-platform/web-elements/src/XText/RawText.ts
+++ b/packages/web-platform/web-elements/src/XText/RawText.ts
@@ -11,16 +11,17 @@ import {
 export class RawTextAttributes {
   static observedAttributes = ['text'];
   readonly #dom: HTMLElement;
+  #text?: Text;
 
   constructor(currentElement: HTMLElement) {
     this.#dom = currentElement;
   }
   @registerAttributeHandler('text', true)
   #handleText(newVal: string | null) {
+    this.#text?.remove();
     if (newVal) {
-      this.#dom.innerHTML = newVal;
-    } else {
-      this.#dom.innerHTML = '';
+      this.#text = new Text(newVal);
+      this.#dom.append(this.#text);
     }
   }
 }
diff --git a/packages/web-platform/web-tests/tests/lighthouse.cases.js b/packages/web-platform/web-tests/tests/lighthouse.cases.js
index 4d35759f93..06eaafed15 100644
--- a/packages/web-platform/web-tests/tests/lighthouse.cases.js
+++ b/packages/web-platform/web-tests/tests/lighthouse.cases.js
@@ -28,7 +28,7 @@ export default [
       'categories:performance': [
         'error',
         {
-          'minScore': 0.81,
+          'minScore': 0.87,
         },
       ],
       'first-contentful-paint': [
@@ -40,7 +40,7 @@ export default [
       'total-blocking-time': [
         'error',
         {
-          'maxNumericValue': 750,
+          'maxNumericValue': 500,
         },
       ],
     },