feat(vue): add style diff perf (#3553)

* feat(dom): add dom style diff * feat(vue): add vue style diff
Tencent · Oct 19, 2023 · 4e61294 · 4e61294
1 parent d9576d4
commit 4e61294
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 20 deletions.
diff --git a/dom/include/dom/diff_utils.h b/dom/include/dom/diff_utils.h
@@ -53,7 +53,7 @@ class DiffUtils {
    *   k: 11,
    * }
    */
-  static DiffValue DiffProps(const DomValueMap& old_props_map, const DomValueMap& new_props_map);
+  static DiffValue DiffProps(const DomValueMap& old_props_map, const DomValueMap& new_props_map, bool skip_style_diff);
 };
 }  // namespace dom
 }  // namespace hippy
diff --git a/dom/include/dom/dom_node.h b/dom/include/dom/dom_node.h
@@ -55,6 +55,14 @@ enum RelativeType {
   kBack = 1,
 };
 
+struct DiffInfo {
+  bool skip_style_diff;
+  DiffInfo(bool skip_style_diff) : skip_style_diff(skip_style_diff) {}
+
+ private:
+  friend std::ostream& operator<<(std::ostream& os, const DiffInfo& diff_info);
+};
+
 struct RefInfo {
   uint32_t ref_id;
   int32_t relative_to_ref = RelativeType::kDefault;
@@ -67,7 +75,8 @@ struct RefInfo {
 struct DomInfo {
   std::shared_ptr<DomNode> dom_node;
   std::shared_ptr<RefInfo> ref_info;
-  DomInfo(std::shared_ptr<DomNode> node, std::shared_ptr<RefInfo> ref) : dom_node(node), ref_info(ref) {}
+  std::shared_ptr<DiffInfo> diff_info;
+  DomInfo(std::shared_ptr<DomNode> node, std::shared_ptr<RefInfo> ref, std::shared_ptr<DiffInfo> diff) : dom_node(node), ref_info(ref), diff_info(diff) {}
 
  private:
   friend std::ostream& operator<<(std::ostream& os, const DomInfo& dom_info);

diff --git a/dom/src/dom/diff_utils.cc b/dom/src/dom/diff_utils.cc
@@ -69,9 +69,13 @@ static bool ShouldUpdateProperty(const std::string& key, const DomValueMap& old_
   return false;
 }
 
-DiffValue DiffUtils::DiffProps(const DomValueMap& old_props_map, const DomValueMap& new_props_map) {
+DiffValue DiffUtils::DiffProps(const DomValueMap& old_props_map, const DomValueMap& new_props_map, bool skip_style_diff) {
   std::shared_ptr<DomValueMap> update_props = std::make_shared<DomValueMap>();
   std::shared_ptr<std::vector<std::string>> delete_props = std::make_shared<std::vector<std::string>>();
+  if (skip_style_diff) {
+    // 跳过 style diff 计算
+    return std::make_tuple(update_props, delete_props);
+  }
 
   // delete props
   // Example:

diff --git a/dom/src/dom/dom_manager.cc b/dom/src/dom/dom_manager.cc
@@ -262,7 +262,7 @@ bool DomManager::SetSnapShot(const std::shared_ptr<RootNode>& root_node, const b
     if (dom_node->GetPid() == orig_root_id) {
       dom_node->SetPid(root_node->GetId());
     }
-    nodes.push_back(std::make_shared<DomInfo>(dom_node, nullptr));
+    nodes.push_back(std::make_shared<DomInfo>(dom_node, nullptr, nullptr));
   }
 
   CreateDomNodes(root_node, std::move(nodes));

diff --git a/dom/src/dom/dom_manager_unittests.cc b/dom/src/dom/dom_manager_unittests.cc
@@ -110,7 +110,8 @@ std::vector<std::shared_ptr<hippy::DomInfo>> ParserJson(const std::string& json_
       ref = std::make_shared<hippy::dom::RefInfo>(id, ref_id);
     }
 
-    std::shared_ptr<hippy::dom::DomInfo> dom_info = std::make_shared<hippy::dom::DomInfo>(dom_node, ref);
+    auto diff_info = std::make_shared<hippy::dom::DiffInfo>(false);
+    std::shared_ptr<hippy::dom::DomInfo> dom_info = std::make_shared<hippy::dom::DomInfo>(dom_node, ref, diff_info);
     nodes.push_back(dom_info);
   }
   return nodes;

diff --git a/dom/src/dom/dom_node.cc b/dom/src/dom/dom_node.cc
@@ -494,8 +494,8 @@ void DomNode::UpdateDiff(const std::unordered_map<std::string,
                                                   std::shared_ptr<HippyValue>>& update_style,
                          const std::unordered_map<std::string,
                                                   std::shared_ptr<HippyValue>>& update_dom_ext) {
-  auto style_diff_value = DiffUtils::DiffProps(*this->GetStyleMap(), update_style);
-  auto ext_diff_value = DiffUtils::DiffProps(*this->GetExtStyle(), update_dom_ext);
+  auto style_diff_value = DiffUtils::DiffProps(*this->GetStyleMap(), update_style, false);
+  auto ext_diff_value = DiffUtils::DiffProps(*this->GetExtStyle(), update_dom_ext, false);
   auto style_update = std::get<0>(style_diff_value);
   auto ext_update = std::get<0>(ext_diff_value);
   std::shared_ptr<DomValueMap> diff_value = std::make_shared<DomValueMap>();

diff --git a/dom/src/dom/root_node.cc b/dom/src/dom/root_node.cc
@@ -146,9 +146,13 @@ void RootNode::UpdateDomNodes(std::vector<std::shared_ptr<DomInfo>>&& nodes) {
     if (dom_node == nullptr) {
       continue;
     }
+    auto skip_style_diff = false;
+    if (node_info->diff_info != nullptr) {
+      skip_style_diff = node_info->diff_info->skip_style_diff;
+    }
     // diff props
-    auto style_diff_value = DiffUtils::DiffProps(*dom_node->GetStyleMap(), *node_info->dom_node->GetStyleMap());
-    auto ext_diff_value = DiffUtils::DiffProps(*dom_node->GetExtStyle(), *node_info->dom_node->GetExtStyle());
+    auto style_diff_value = DiffUtils::DiffProps(*dom_node->GetStyleMap(), *node_info->dom_node->GetStyleMap(), skip_style_diff);
+    auto ext_diff_value = DiffUtils::DiffProps(*dom_node->GetExtStyle(), *node_info->dom_node->GetExtStyle(), false);
     auto style_update = std::get<0>(style_diff_value);
     auto ext_update = std::get<0>(ext_diff_value);
     std::shared_ptr<DomValueMap> diff_value = std::make_shared<DomValueMap>();
@@ -210,7 +214,7 @@ void RootNode::MoveDomNodes(std::vector<std::shared_ptr<DomInfo>>&& nodes) {
       continue;
     }
     nodes_to_move.push_back(node);
-    parent_node->AddChildByRefInfo(std::make_shared<DomInfo>(node, node_info->ref_info));
+    parent_node->AddChildByRefInfo(std::make_shared<DomInfo>(node, node_info->ref_info, nullptr));
   }
   for (const auto& node : nodes_to_move) {
     node->SetRenderInfo({node->GetId(), node->GetPid(), node->GetSelfIndex()});

diff --git a/driver/js/packages/hippy-vue/src/renderer/element-node.js b/driver/js/packages/hippy-vue/src/renderer/element-node.js
@@ -405,7 +405,7 @@ class ElementNode extends ViewNode {
       if (typeof this.filterAttribute === 'function') {
         this.filterAttribute(this.attributes);
       }
-      !options.notToNative && updateChild(this);
+      !options.notToNative && updateChild(this, options.notUpdateStyle);
     } catch (err) {
       // Throw error in development mode
       if (isDev()) {

diff --git a/driver/js/packages/hippy-vue/src/renderer/native/index.js b/driver/js/packages/hippy-vue/src/renderer/native/index.js
@@ -422,6 +422,24 @@ function getEventNode(targetNode) {
   return eventNode;
 }
 
+/**
+ * getEventNode - translate to native node.
+ * @param targetNode
+ */
+function getNativeNode(rootViewId, targetNode, refInfo = {}, style) {
+  const nativeNode = {
+    id: targetNode.nodeId,
+    pId: (targetNode.parentNode && targetNode.parentNode.nodeId) || rootViewId,
+    name: targetNode.meta.component.name,
+    props: {
+      ...getNativeProps(targetNode),
+      style,
+    },
+    tagName: targetNode.tagName,
+  };
+  return [nativeNode, refInfo, { skipStyleDiff: true }];
+}
+
 /**
  * Render Element to native
  */
@@ -638,19 +656,26 @@ function updateEvent(parentNode) {
   endBatch(app);
 }
 
-function updateChild(parentNode) {
+function updateChild(parentNode, notUpdateStyle = false) {
   if (!parentNode.isMounted) {
     return;
   }
   const app = getApp();
   const { $options: { rootViewId } } = app;
-  const  [nativeNode, eventNode, printedNode] = renderToNative(rootViewId, parentNode);
+  let nativeNode;
+  let eventNode;
+  let printedNode;
+  if (notUpdateStyle) {
+    nativeNode = getNativeNode(rootViewId, parentNode, refInfo);
+  } else {
+    [nativeNode, eventNode, printedNode] = renderToNative(rootViewId, parentNode);
+  }
   if (nativeNode) {
     batchNodes.push({
       type: NODE_OPERATION_TYPES.updateNode,
-      nodes: [nativeNode],
-      eventNodes: [eventNode],
-      printedNodes: isDev() ? [printedNode] : [],
+      nodes: nativeNode ? [nativeNode] : [],
+      eventNodes: eventNode ? [eventNode] : [],
+      printedNodes: isDev() && printedNode ? [printedNode] : [],
     });
     endBatch(app);
   }

diff --git a/driver/js/src/modules/scene_builder_module.cc b/driver/js/src/modules/scene_builder_module.cc
@@ -60,6 +60,7 @@ constexpr char kNodePropertyProps[] = "props";
 constexpr char kNodePropertyStyle[] = "style";
 constexpr char kNodePropertyRefId[] = "refId";
 constexpr char kNodePropertyRelativeToRef[] = "relativeToRef";
+constexpr char KNodePropertySkipStyleDiff[] = "skipStyleDiff";
 constexpr char kEventCapture[] = "capture";
 
 const int32_t kInvalidValue = -1;
@@ -323,6 +324,7 @@ std::tuple<bool, std::string, std::shared_ptr<DomInfo>> CreateDomInfo(
   std::shared_ptr<DomInfo> dom_info = nullptr;
   std::shared_ptr<DomNode> dom_node = nullptr;
   std::shared_ptr<RefInfo> ref_info = nullptr;
+  std::shared_ptr<DiffInfo> diff_info = nullptr;
   uint32_t len = context->GetArrayLength(node);
   if (len > 0) {
     auto dom_node_tuple =
@@ -331,17 +333,26 @@ std::tuple<bool, std::string, std::shared_ptr<DomInfo>> CreateDomInfo(
       return std::make_tuple(false, "get dom node info error.", dom_info);
     }
     dom_node = std::get<2>(dom_node_tuple);
-    if (len == 2) {
+    if (len > 1) {
       auto ref_info_tuple =
           CreateRefInfo(context, context->CopyArrayElement(node, 1), scope);
       if (std::get<0>(ref_info_tuple)) {
         ref_info = std::get<2>(ref_info_tuple);
       }
     }
+    if (len == 3) {
+      auto diff = context->CopyArrayElement(node, 2);
+      std::shared_ptr<CtxValue> style_diff  = context->GetProperty(diff, KNodePropertySkipStyleDiff);
+      if (style_diff) {
+          bool skip_style_diff;
+          context->GetValueBoolean(style_diff, &skip_style_diff);
+          diff_info = std::make_shared<hippy::dom::DiffInfo>(skip_style_diff);
+      }
+    }
   } else {
     return std::make_tuple(false, "dom info length error.", dom_info);
   }
-  dom_info = std::make_shared<DomInfo>(dom_node, ref_info);
+  dom_info = std::make_shared<DomInfo>(dom_node, ref_info, diff_info);
   return std::make_tuple(true, "", dom_info);
 }
 
@@ -497,7 +508,8 @@ std::shared_ptr<ClassTemplate<SceneBuilder>> RegisterSceneBuilder(const std::wea
                   std::get<2>(id_tuple),
                   std::get<2>(pid_tuple),
                   scope->GetRootNode()),
-              std::get<2>(ref_info_tuple)));
+              std::get<2>(ref_info_tuple),
+              nullptr));
         }
       }
     }
@@ -547,7 +559,7 @@ std::shared_ptr<ClassTemplate<SceneBuilder>> RegisterSceneBuilder(const std::wea
                 std::get<2>(id_tuple),
                 std::get<2>(pid_tuple),
                 scope->GetRootNode()),
-            nullptr));
+            nullptr, nullptr));
       }
     }
     SceneBuilder::Delete(scope->GetDomManager(), scope->GetRootNode(), std::move(dom_infos));