崔红保-‍跨平台框架的性能优化实践.pdf

1、跨平台框架的性能优化实践主讲人：崔红保演讲嘉宾介绍崔红保DCloud CTO uni-app 跨端框架负责人 跨平台开发老兵 深耕开发者服务领域，在跨平台、前端 UI、小程序性能优化等方面经验丰富。负责的 uni-app 跨端框架，拥有十几亿的月活终端。CONTENT目录2023K+01关于跨平台框架跨平台框架的性能坑点UTS：纯原生跨平台框架020304未来展望：云端一体Part 01关于跨平台框架 什么是跨平台 跨平台框架如何选型What we talk about when we talk about cross-platform什么是跨平台为何要使用跨平台框架？业内有哪些主流跨平台框架

2、？跨平台框架如何选型？跨端框架功能扩展性性能DSL生态开发体验工程化错误提示、souremap、热重载持续集成、自动化测试、工具链用户群体、学习门槛、生态复用，案例：qt mobile兼容终端类型，能力覆盖面平台特有能力的支持度自定义跨端扩展运行体验，接近原生的丝滑？长列表、手势拖动跨平台框架小结功能性能开发体验DSL生态工程化扩展性React native一般原生渲染基于JS开发一般支持一般weex一般原生渲染基于JS开发弱支持一般uni-app支持小程序和PC宽屏，内置扫码、地图、支付、分享等常用功能Web+原生双渲染引擎基于JS开发配套IDE完善支持条件编译Taro支持小程序原生渲染基于

3、JS开发一般支持环境变量判断Flutter一般自绘UI基于dart开发弱支持一般Part 02跨平台框架的性能坑点 通用架构 web渲染 原生渲染跨平台框架为何常被诟病？功能性能（渲染、阻塞.）跨平台原生基于web渲染的Hybrid App通用架构Native层，提供各种原生能力JS Core/V8JS BridgetwebviewWeb Components视图层框架AppPagePage逻辑层框架逻辑层视图层Native层纯web渲染有诸多问题 切页白屏：打开新页面、选项卡切换 手势操作：地图、视频、下拉刷新 键盘：定制按钮引入原生组件，增强体验Native层，提供各种原生能力JS Cor

4、e/V8JS BridgetwebviewWeb ComponentsNative Components视图层框架AppPagePage逻辑层框架常见原生增强示例 tabs/navigationbar：避免页面白屏，提升新窗口进入时的用户体验 Video：全屏后的滑动控制（声音、进度、亮度等）map：更流畅的双指缩放 input：定制右下角按钮（发送、下一个）原生导航条混合渲染引发新问题 原生永远在最高层，无法通过z-index设置不同元素的层级 页面滚动，通讯阻塞，组件抖动 原生字体和web字体不统一混合渲染改进：组件补丁 cover-view：可覆盖在原生组件之上的文本视图 cover-i

5、mage：可覆盖在原生组件之上的图片视图混合渲染改进：同层渲染同层渲染：原生组件和web组件层级一致同层渲染的实现方案1.wkwebview预先在需要插入原生控件（如video）的位置，插入一个具有overflow:scroll属性的DIV标签2.native层查找对应的 WKChildScrollView 组件3.将原生控件（如video）挂载到该 WKChildScrollView 节点上作为其子 ViewiOS平台：借助WKChildScrollView和DOM节点的映射关系同层渲染的实现方案webviewHTMLPluginElementWebPluginRenderLayerNati

6、ve原生组件SurfaceTextureAndroid平台：借助chromium的WebPlugin机制创建原生组件生成embed节点原生渲染仅解决了渲染问题，通讯阻塞问题依旧JS 逻辑Native UIBridgetouch12render34swipeaction拖动流程（以weex为例）BindingX原理 将”交互行为以表达式的方式描述，并提前预置到Native 交互触发时，Native 根据其内置的 表达式解析引擎 去执行表达式，并根据表达式执行的结果驱动视图变换通讯阻塞是业界普遍存在的一个问题通讯阻塞是个通用问题解决方案支持功能微信小程序WX