feat(hippy-vue): perf attribute & style update performance

Tencent · Jul 22, 2022 · e7272ef · e7272ef
1 parent b365a97
commit e7272ef
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/driver/js/packages/hippy-vue/src/renderer/element-node.js b/driver/js/packages/hippy-vue/src/renderer/element-node.js
@@ -366,6 +366,9 @@ class ElementNode extends ViewNode {
   setStyle(property, value, notToNative = false) {
     if (value === undefined) {
       delete this.style[property];
+      if (!notToNative) {
+        updateChild(this);
+      }
       return;
     }
     // Preprocess the style

diff --git a/driver/js/packages/hippy-vue/src/runtime/modules/attrs.js b/driver/js/packages/hippy-vue/src/runtime/modules/attrs.js
@@ -27,8 +27,7 @@ function updateAttrs(oldVNode, vNode) {
   if (!oldVNode.data.attrs && !vNode.data.attrs) {
     return;
   }
-  let cur;
-  let old;
+  const updatePayload = {};
   const { elm } = vNode;
   const oldAttrs = oldVNode.data.attrs || {};
   let attrs = vNode.data.attrs || {};
@@ -37,19 +36,22 @@ function updateAttrs(oldVNode, vNode) {
     attrs = extend({}, attrs);
     vNode.data.attrs = attrs;
   }
-  Object.keys(attrs).forEach((key) => {
-    cur = attrs[key];
-    old = oldAttrs[key];
-    if (old !== cur) {
-      elm.setAttribute(key, cur);
+  Object.keys(oldAttrs).forEach((key) => {
+    const newPropValue = attrs[key];
+    if (newPropValue === null || newPropValue === undefined) {
+      updatePayload[key] = undefined;
     }
   });
-  Object.keys(oldAttrs).forEach((key) => {
-    // eslint-disable-next-line eqeqeq
-    if (attrs[key] == null) {
-      elm.setAttribute(key);
+  Object.keys(attrs).forEach((key) => {
+    const oldPropValue = oldAttrs[key];
+    const newPropValue = attrs[key];
+    if (oldPropValue !== newPropValue) {
+      updatePayload[key] = newPropValue;
     }
   });
+  Object.keys(updatePayload).forEach((key) => {
+    elm.setAttribute(key, updatePayload[key]);
+  });
 }
 
 export default {

diff --git a/driver/js/packages/hippy-vue/src/runtime/modules/style.js b/driver/js/packages/hippy-vue/src/runtime/modules/style.js
@@ -22,6 +22,7 @@
 /* eslint-disable no-param-reassign */
 
 import { extend, cached, camelize } from 'shared/util';
+import { updateChild } from '../../renderer/native';
 
 const normalize = cached(camelize);
 
@@ -59,19 +60,19 @@ function updateStyle(oldVNode, vNode) {
   // Remove the removed styles at first
   Object.keys(oldStyle).forEach((name) => {
     if (style[name] === undefined) {
-      elm.setStyle(normalize(name), undefined);
+      elm.setStyle(normalize(name), undefined, true);
     }
   });
   // Then set the new styles.
   Object.keys(style).forEach((name) => {
     cur = style[name];
-    elm.setStyle(normalize(name), cur);
+    elm.setStyle(normalize(name), cur, true);
   });
+  updateChild(elm);
 }
 
 
 function createStyle(oldVNode, vNode) {
-  // console.log(`\t\t ===> createStyle(${oldVNode}, ${vNode})`)
   if (!vNode.data.staticStyle) {
     updateStyle(oldVNode, vNode);
     return;
@@ -80,7 +81,7 @@ function createStyle(oldVNode, vNode) {
   const { staticStyle } = vNode.data;
   Object.keys(staticStyle).forEach((name) => {
     if (staticStyle[name]) {
-      elm.setStyle(normalize(name), staticStyle[name]);
+      elm.setStyle(normalize(name), staticStyle[name], true);
     }
   });
   updateStyle(oldVNode, vNode);