多端一体化框架 Hippy 的开放与未来.pptx

1、多端一体化框架HIPPY的开放与未来1. 跨平台技术的源起与发展2. 跨平台技术的现状与不足3. Hippy 架构与核心解决方案4. Hippy 未来规划与开源目录跨平台技术的源起WebNative伴随品间的在保障升研发能够快最快速IOS等开发效率高开发效率低支持双平台可动态发布体验差无法跨平台版本发布周期长体验好能力弱能力强跨平台技术需要解决的核心问题研发效率动态化一套代码多端运行支持动态更新快速迭代新功性能体验多端一致性提供接近原生的性能体验多端UI设计上整体风格统一跨平台技术划分原生渲染Web技术小程序WeexCordovaReact Native现有跨平台技术存在的一些不足l 在很多应

2、用场景性能体验和原生比还有差距l 原有H5业务接入门槛和迁移成本都较高l 增加新能力需要双端开发，框架扩展成本高，一致性差传统跨平台技术架构Javascript SideReact & JS EngineBridge+原生渲染BridgeModulesRenderDomUINativeSideBridge通信模式存在的问题JSONJSONJS thread Bridge Nl JS和Native，他们彼此之间不能真正相互感知，不能共享l Bridge通信是异步的，不能保证数据100%及时到达另一l 每次传输数据都是一次新的复制，大数据传输非常慢，频原生渲染机制存在的问题JavaScriptC+

3、Native生成虚拟Dom数据链路长，传输数据效率低，首屏显示与动画性能相对于原生还有差距JNIJNI创建node节点，生成UI树同一视图控件双端都要开发一次，且一致性较差计算node节点排版信息JNI用系统机制绘制UI什么是Hippy是我们发框架套界面高性能React.jsLibraryUserCodeJavaScriptVue.jsLibrary运营平台同时H提供的性能动AndroidPlatformIOSPlatformWEBPlatformHippy 架构设计ComponentJavaScript Side前端SDK，包括视图组件和基础功能，通信组件ReactVueCommon Bas

4、eSourceC+ SideCoreSDK,由5个子系统组成，包括VM，渲染，功能组件等核心能力VM N-APIRender Microtask ModulesNative SideBridge终端SDK(OC&JAVA)，包括Bridge通信和功能组件ModulesPlatform系统平台层，包括android和IOS两个平台AndroidIOSCore SDK核心解决方案l C+ Side共享一套代码原Native SDK部分modules与UI Component移植到C+ SDK, 各实现，很大程度降低开发维护成本l 引入Binding模式引入全新 模式！ 完全抛弃了编解码，直接通过

5、C+l 自渲染机制UI控件的所有解析，排版，渲染逻辑都在Render子系统完成，简消除了多余数据转换Binding模式与Bridge模式对比JS APIcallNativecallbacksetTimeoutcallNativeencodecallJSV8 baseC+setTimdecodedecodeencodeNativesetTimeoutBinding模式模块的注入与回调C+JSInternalBinding = GetBinding()/InternalBinding是js和native/交互的桥梁/getInternalBinding是native code(function(g

6、etInterfn = evaluate(bootstrap.js)/把native function作为参数传进去得到由组成的/ key, value native模块callFunction(fn(InternalBinding)timer = getInt/绑定模块名称和函数名称的匿名函数fn, name(info)/SetTimeout也是native codetimer.SetTimeostd:mem_fn(fn)(*module, info);)Render子系统的组成UI控件UIListView UITextViewCore-RenderUIImageView.UI Compon

7、entDomLayerClipRectOpacityTransform.flexboxRender EngineRenderEngineCompositorSkiaPlatformGPU Raster Raster CacheSurfaceViewUIViewAndroidIOS自绘控件的线程模型与渲染流程虚拟DomDom TreeLayoutJS threadPaintUI TreeLayer TreeUI threadGPUthreadPushSurfaceViewGUPRaster0 1 2TextureSwapBufferLayerPaintPop两个线程并行处理, GPU光栅化与CP

8、U生成绘制指令彼此独立，能最大发挥渲染使用生产者消费者模式, 在消费者端增加了缓存队列,依据系统的性能来动态更改动的情况，进行掉帧补偿。自绘控件的分层策略ListView参考webkit内核的分层策略：l Transform属性ScrollViewl Opacity属性l List View item（为了ListView的滚动性能）List ItemViewList ItemViewPl节点被强制设置为需要独立层Image TextView ViewImage TextView View每个List Item生成一个独立的层，Item下面的图Microtask与N-API子系统由于 VM 线

9、程的安全限制，导致任务子系统通过将异步任务分为事件循环、优先级队列等机制对度，有效提高了任务并发时的效MicrotaskTask DelayedTask IdleTaskevent_loopVMN-API 子系统封装不同 JavaScript VM 接口差异，支持V8和JSC以及其它JS引擎，对外提供统一的接口调用方式N-APIV8 JavaScriptCore .Source子系统A.jsB.js.a_key = 0 x41 a_value = . b_key = 0 x42 b_value = . source.ccjs2c将 SDK 中的 JavaScript 代码文件转为 C+ 代形成

10、一个整体，有效减少初始化时 I/O 次数，并解决安Context管理与启动加速如何达到多业务同时运行而互不影响，Context (Sandbox)引入上下文概又有着较低的资源消耗与较高的启动速度？上下文，而每这样既保证了RunTime离了各个业务Isolate AIsolate BContextCode Cache将编译后的字接加载缓存，性能Context A Context B公司内(外)超过20款应用接入，日均QQ浏览器天天快报全民K歌企鹅号QQ音乐应用宝自选股极光快投VOOV直播大丰证云视听极WIFI管心悦俱乐部王者营地马克思主义2020年Hippy将继续前行打造完善的生态与社区更极致的性能体验开源协同