Taro 适配鸿蒙的框架原理和性能优化-宣泽彬.pdf

1、Taro 适配鸿蒙的框架原理和性能优化京东零售/宣泽彬Taro 是什么Taro是一个开放式跨端跨框架解决方案Taro 解决的问题业务响应不及时研发成本增加代码维护困难多框架支持性能优化插件化Taro 解决的问题Taro 解决的问题支持更多的开发范式&UI 框架Taro 解决的问题支持更多的前端生态工具链&上层框架目录背景介绍鸿蒙适配思路鸿蒙适配原理性能优化成果展示总结背景介绍为什么要适配鸿蒙为什么要适配鸿蒙 头部互联网厂商纷纷进场 鸿蒙NEXT不再支持apk安装包 鸿蒙方向岗位的增加入门学习并适配鸿蒙APP应用逐渐成为一种趋势代价从零入门门槛高旧项目迁移至新平台成本大需要学习新的语言和API原

2、有的项目需要进行重新开发使用 Taro 的优势1.旧项目的快速迁移3.原有Web生态工具的复用2.Web范式的新项目开发鸿蒙适配思路ArkTS&ArkUI鸿蒙 ArkTS 和小程序的相似之处1.都支持JavaScript/TypeScript的语法2.都可以用template（小程序）或者component（ArkTS）去表达和渲染复杂的UI结构结论：和小程序类似的，在鸿蒙系统上模拟浏览器环境，跑通Web端代码，渲染ArkUI页面内容鸿蒙适配原理适配原理 节点渲染 样式解析 工程化串联节点渲染设计思路.DOMElementNode.BOM.documentwindowArkUIMock节点渲染

3、模拟 DOM API节点渲染模拟 BOM APIwindowdocumentnavigatorrollup/plugin-injectBundle注入history节点渲染自定义前端框架渲染器节点渲染DOM 树递归渲染 ArkUI 组件节点渲染ArkUI 组件绑定样式和事件1.绑定事件2.绑定样式节点渲染整体流程ArkUI 渲染层渲染层React/Vue前端框架层前端框架层BOMDOM树的数据结构ETS PageDOMAPI1.调用Taro 虚拟虚拟 DOMTaro 运行时运行时2.渲染DOM树3.传递DOM树ArkUIComponentArkUIComponentArkUIComponent

4、ArkUIComponentArkUIComponent4.渲染Vite 编译系统编译系统样式解析为什么要做样式解析鸿蒙应用Taro项目W3C规范声明式属性设置不一致样式解析 CSS样式 伪元素 嵌套样式 fixed布局解析原理样式解析CSS 样式鸿蒙样式对象CSS代码块样式解析CSS 样式JSX节点鸿蒙样式对象作为参数传入Reconciler样式合并和应用运行时样式合并函数渲染ArkUIComponent样式解析伪元素选择器实现携有伪元素选择器的CSS代码块鸿蒙样式对象样式解析伪元素选择器实现运行时样式合并函数鸿蒙样式对象作为参数传入JSX节点Reconciler样式合并和应用伪元素样式对象

5、作为样式属性一起合入渲染ArkUIComponent存在伪元素伪元素styleSheets渲染伪元素对应的ArkUIComponent样式解析样式嵌套解析存在嵌套样式的CSS代码块鸿蒙样式对象combine函数样式解析样式嵌套解析JSX节点JSX节点combine函数样式解析样式嵌套解析1.收集子元素2.收集所有子孙元素以冒泡的形式样式解析样式嵌套解析ABCDEABCDEBCBDE子代:所有子孙:CDE子代:所有子孙:子代:所有子孙:DE生成关系表样式解析样式嵌套解析ABCDEBCBDE子代:所有子孙:CDE子代:所有子孙:子代:所有子孙:DE样式选择器:.A.E样式解析样式嵌套解析ABCDB

6、CBDE子代:所有子孙:CDE子代:所有子孙:子代:所有子孙:DE样式选择器:.A.CE样式解析样式嵌套解析ABCDBCBDE子代:所有子孙:CDE子代:所有子孙:子代:所有子孙:DE样式选择器:.A.C.EEcombine函数样式解析样式嵌套解析运行时样式合并函数鸿蒙样式对象作为参数传入JSX节点Reconciler样式合并和应用伪元素对象作为样式属性一起合入渲染ArkUIComponent是否存在伪元素伪元素styleSheets渲染伪元素对应的ArkUIComponent全局范围样式解析与 Web 端的对比节点树样式树合并问题：1.实现难度较大2.