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

Size: px

Start display at page:

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

再叔江
7 years ago
Views:

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

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

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

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

5 目录 content H5 容器 Weex 容器

6 H5 容器 - 预加载

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

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

9 ) 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 ( ( ( (

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

12 资源加载时间

13 极致性能

14 Bad case

15 15 年初

16 到达率到达率

17 在线到达率 86% 98%

18 H5 容器 - 网络优化

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

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

21 Weex

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

23 Weex ( HTML/CSS/JS ) = Native UI

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

25 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

26 DSL JS-Bundle

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

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

29 16:21: D/weex : calljs >>>> instanceid:1 tasks:[{"data":"1","type":2},{"data":"[{\"args\":[\"_root\", 16:21: D/weex : callnative >>>> instanceid:1, tasks:[{"module":"dom","method":"updatefinish","args 16:21: D/weex : calljs >>>> instanceid:1function:destroyinstance tasks:[{"data":"1","type":2}] 16:21: D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"createbody","args": 16:21: D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"createfinish","args 16:21: D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[{\"args\":[\"_root\", 16:21: D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21: D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[{\"args\":[\... 16:21: D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21: D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[... 16:21: D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21: D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[{\"args\":[\"157\",\" 16:21: D/weex : callnative >>>> instanceid:2, tasks:[{"module":"event","method":"openurl","args":[ 16:21: D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21: D/weex : calljs >>>> instanceid:2 tasks:[{"data":"2","type":2},{"data":"[{\"args\":[\"_root\", 16:21: D/weex : callnative >>>> instanceid:2, tasks:[{"module":"dom","method":"updatefinish","args 16:21: D/weex : callnative >>>> instanceid:3, tasks:[{"module":"dom","method":"createbody","args": 16:21: D/weex : callnative >>>> instanceid:3, tasks:[{"module":"dom","method":"createfinish","args 16:21: D/weex : calljs >>>> instanceid:3 tasks:[{"data":"3","type":2},{"data":"[{\"args\":[\"_root\", 16:21: D/weex : callnative >>>> instanceid:3, tasks:[{"module":"dom","method":"updatefinish","args

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

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

32 Weex Module

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

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

35 业务

36 业务

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

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

39 多端一致 - Android

40 多端一致 - ios

41 多端一致 - H5

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

43 高性能渲染分段快速渲染帧率 (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 Memory 99.78M M 93.45M M CPU (backend) CPU (max) in Nexus 5 0% 6% 0% 7% 26% 34% 25% 36%

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

45 Node append= node Text Image Text

46 Node append= node div div div Image Text Text

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

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

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

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

51 DevTools

52 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

53 开源

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

55 社区运作 - 需求

56 社区运作 - PR

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

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

Hippy-VueConf

Hippy-VueConf 前终端统一方案 Hippy-Vue 设计和实现腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍传统移动端开发模式, 无法满足业务精细化运营需求, 急需寻找一种高性能跨平台动态发布的开发解决方案 Web 开发效率高 Native 开发效率低前终端一体化开发效率高支持多平台无法跨平台支持双平台可动态发布发布复杂可动态发布体验差体验好