05.（最终版）手机淘宝 H5 和 Weex 容器的构建实践-云栖-2016-鬼道.key

手机淘宝 H5 和 Weex 容器的构建实践鬼道 ( 徐凯 ) 高级前端开发专家

个人简介 2015, 手机淘宝 H5 和 Weex 容器器团队 2013, 天猫 Web 前端架构天猫 Pad 客户端 2011, 百度广告 / 统计 Native/H5 SDK

触发页面加载进度预加载 HTTP-DNS SPDY 渲染交互

交互时 2014 下载时 2015 渲染时 2016 Hybrid API 预加载渲染平台化 HTTP-DNS Weex SPDY

目录 content H5 容器 Weex 容器

H5 容器 - 预加载

预加载资源请求本地文件命中? N Y 加载本地资源加载远程资源

流程资源请求本地文件命中? N Y 加载本地资源加载远程资源

) mp : AZ ekp su) t L ekd IC ekig ) AZ ekp h R h R N a C ek C R R C R jn ( ) c ek h Rp c A W ) ) A lk A lk m ( ( ( (

应用范围集团预加载接入客户体验聚划算口碑碑 AE 数字娱乐城市生活 OS 安全部阿里里音乐 4332 2 1688 5 4 蚂蚁 5 5 阿里里通信 6 阿里里云 6 8 智能生活 10 菜鸟 11 搜索 13 阿里里影业 13 B2B 14 航旅 21 天猫 23 淘宝 135

1 3 2 4

资源加载时间

极致性能

Bad case

15 年初

到达率 2015.11.10-11.11 到达率

在线到达率 86% 98%

H5 容器 - 网络优化

网络拦截 ios Android URLProtocol UC 异步网络接口阿里里网络库 HTTP-DNS SPDY Server

前端优化 1. 域名收敛 2. 埋点优化

Weex

移动开发痛点 Native 开发痛点平台设备差异自由部署能力力开发集成效率 Web 开发痛点加载性能流畅体验 Hybrid Web&Native 混合编程 Weex

Weex ( HTML/CSS/JS ) = Native UI

Weex ( HTML/CSS/JS ) = Native UI DSL (HTML/JS/CSS) Virtual DOM ios RenderEngine Android RenderEngine H5 RenderEngine ios UI Android UI H5 UI

Server Weex DSLFile transformer JS Bundle deploy Server JS JSCore / V8 JS-Native Bridge JS Framework calljs callnative ios RenderEngine Android RenderEngine H5 RenderEngine Client

DSL JS-Bundle

RenderEngine Virtual DOM RenderEngine Build Tree Apply Style Create View Update Frame CSS Layout Attach Event Native/H5 View

Javascript callnative Native Javascript Engine Javascript Framework Transformed Bundles calljs Native Framework Native View/Container System Framework

16:21:18.980 D/weex : calljs >>>> instanceid:1 tasks:[{"data":"1","type":2},{"data":"[{\"args\":[\"_root\", 16:21:18.981 D/weex : callnative >>>> instanceid:1, tasks:[{"module":"dom","method":"updatefinish","args 16:21:19.944 D/weex : calljs >>>> instanceid:1function:destroyinstance tasks:[{"data":"1","type":2}] 16:21:26.525 D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"createbody","args": 16:21:26.886 D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"createfinish","args 16:21:26.897 D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[{\"args\":[\"_root\", 16:21:26.897 D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21:32.104 D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[{\"args\":[\... 16:21:32.105 D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21:32.113 D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[... 16:21:32.113 D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21:32.124 D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[{\"args\":[\"157\",\" 16:21:32.125 D/weex : callnative >>>> instanceid:2, tasks:[{"module":"event","method":"openurl","args":[ 16:21:32.126 D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21:32.141 D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[{\"args\":[\"_root\", 16:21:32.142 D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21:32.361 D/weex : callnative >>>> instanceid:3, tasks:[{"module":"dom","method":"createbody","args": 16:21:32.533 D/weex : callnative >>>> instanceid:3, tasks:[{"module":"dom","method":"createfinish","args 16:21:32.538 D/weex : calljs >>>> instanceid:3 tasks:[{"data":"3","type":2},{"data":"[{\"args\":[\"_root\", 16:21:32.539 D/weex : callnative >>>> instanceid:3, tasks:[{"module":"dom","method":"updatefinish","args

Weex Component 对应于页面上的标签, 负责把 DOM 元素渲染为对应的 Native View.

[ div, text, a, image,video, list(cell,header), scroller, slider(indicator), input, switch, web, tabbar,embed... ]

Weex Module

[ modal, storage, clipboard, globalevent, Timer, stream ]

Weex 大图业务手淘手猫 UC 菜鸟千牛聚划算大促线产品线业务模块发布系统组件库 AliHybridAPI Hilo Weex DSL JS Framework JSFM (Vue 2.0) Rx(D2) Weex Core Android RenderEngine ios RenderEngine H5 RenderEngine Toolchain

业务

价值 1. 新版更更新速度更更新率到 60%:Android 耗费 2 周 ios 1 周 Weex/H5 1 分钟 2. 开发效率 Android/iOS/H5 三端开发 -> Weex, 节约 50%+ 人力力 3. 体验提升相比 H5,Android 和 ios 流畅性显著提升 Android 低端机帧率提升 37%+(40->55FPS)

技术演进 1. 原型 2015 双十一 / 双十二 2. 雏形 2016.01 首个独立SDK 版本布局和样式补全 2016.03 更更多 UI 和 API 2016.04 会场框架 Weex 化 Open Source (private) 3. 发展中 2016.05 Syntax 扩展性能稳定性 2016.06 Open Source (public) DevTools 年年中促大规模应用 2016.08 Timer Storage fetch Gesture

多端一致 - Android

多端一致 - ios

多端一致 - H5

轻量轻量量语法 : 语法简单, 一小时上手轻量量 SDK: Android:667KB + 1.5MB (V8) ios:787kb H5 :86KB (gzip)

高性能渲染分段快速渲染帧率 (FPS) Scroll 长列列表 : 中高端机 59+, 低端机 55+ Weex (List) RN (List) Weex (Scroller) RN (Scroller) 内存 CPU List 长列列表 : 中高端机 55+, 低端机 50+ 无尽列列表, 原生内存复用闲时 :0% 高峰 :10% - 30% Load 1325ms 1656ms 1381ms 1833ms FPS 55.45 56.55 59.09 59.06 Memory 99.78M 108.43M 93.45M 106.83M CPU (backend) CPU (max) in Nexus 5 0% 6% 0% 7% 26% 34% 25% 36%

高性能秒开下载阶段 : 预加载执行行阶段 :Framework + JSBundle 渲染阶段 : 分块渲染 (tree/node) 流畅异步 Layout, 让渲染脱离主线程 Compositing 节源 JSCore GC 策略略优化文本渲染性能优化

Node append= node Text Image Text

Node append= node div div div Image Text Text

Node append= node Image div Text Text Image Text Text div div div

Node append= node Image Text Text div div div div Image Text Text

Tree append= tree Text div Image Text div Image Text div Text div } append = tree

Tree append= tree Text Image Text div Image div div div Text } append = tree Text

DevTools

DevTools stetho ponydeb ugger Nuclide React devtools Weex devtools android(element, console, network, resources) y n n n y ios(element, console, network, resources) n y*4 y*2 n y multiple devices/app n n n n y js debugger n n y*3 y*1 y vdom inspector n n n y y screencast /select element/remote control n n n n y

开源 http://alibaba.github.io/weex/

社区运作 Discuss (Issue) Coding Code Review (PR)

社区运作 - 需求

社区运作 - PR

开源 1. 收获 1. 大量量边界条件, 强化稳定性 2. 服务好开发者 1. 并不不容易易, 也不不轻松 2. 代码文档工具线上交流线下活动

获取演讲资料和更多阿里移动技术动态手机淘宝技术团队微公众号阿里百川微公众号