fix: Improve performance on lower end devices

GoogleChromeLabs · Oct 19, 2022 · 48dfef8 · 48dfef8
1 parent 179b236
commit 48dfef8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/engine.ts b/src/engine.ts
@@ -425,12 +425,15 @@ export function initializePolyfill(updateCallback: () => void) {
 
       instance = {
         connect() {
-          for (const child of node.childNodes) {
+          for (
+            let child = node.firstChild;
+            child != null;
+            child = child.nextSibling
+          ) {
             // Ensure all children are created and connected first.
             getOrCreateInstance(child);
           }
           innerController.connected();
-          scheduleUpdate();
         },
 
         disconnect() {
@@ -445,7 +448,11 @@ export function initializePolyfill(updateCallback: () => void) {
             inlineStyles.removeProperty(CUSTOM_UNIT_VARIABLE_CQW);
             inlineStyles.removeProperty(CUSTOM_UNIT_VARIABLE_CQH);
           }
-          for (const child of node.childNodes) {
+          for (
+            let child = node.firstChild;
+            child != null;
+            child = child.nextSibling
+          ) {
             const instance = getInstance(child);
             instance?.disconnect();
           }
@@ -515,7 +522,11 @@ export function initializePolyfill(updateCallback: () => void) {
             innerController.updated();
           }
 
-          for (const child of node.childNodes) {
+          for (
+            let child = node.firstChild;
+            child != null;
+            child = child.nextSibling
+          ) {
             getOrCreateInstance(child).update(currentState);
           }
         },
@@ -526,7 +537,11 @@ export function initializePolyfill(updateCallback: () => void) {
 
         mutate() {
           cacheKey = Symbol();
-          for (const child of node.childNodes) {
+          for (
+            let child = node.firstChild;
+            child != null;
+            child = child.nextSibling
+          ) {
             getOrCreateInstance(child).mutate();
           }
         },
@@ -541,6 +556,7 @@ export function initializePolyfill(updateCallback: () => void) {
 
   documentElement.prepend(globalStyleElement, dummyElement);
   getOrCreateInstance(documentElement);
+  scheduleUpdate();
 }
 
 class NodeController<T extends Node> {

diff --git a/tests/wpt.ts b/tests/wpt.ts
@@ -207,6 +207,7 @@ function createLocalServer(): Promise<Local> {
     server.start(
       {
         key: process.env.BROWSERSTACK_ACCESS_KEY,
+        verbose: true,
       },
       err => {
         if (err) {