1、鬼道（徐凯）高级前端开发专家手机淘宝 H5 和 Weex 容器的构建实践 2015，手机淘宝 H5和Weex容器团队 2013，天猫 Web前端架构 天猫Pad客户端 2011，百度 广告/统计 Native/H5 SDK个人简介HTTP-DNSSPDY渲染预加载触发页面加载进度HTTP-DNSSPDY预加载渲染交互下载时2015交互时2014渲染时2016HTTP-DNSSPDY渲染 Hybrid API平台化Weex预加载 H5 容器 Weex 容器目 录contentH5 容器-预加载本地文件命中？加载远程资源Y资源请求加载本地资源N预加载本地文件命中？加载远程资源Y资源请求加载本地资源

2、N流程?)?mP?:?t?R?(A?W?)?(?(h?Rp?(?L?ekD?c?C?R)?A?lk?A?lk?m?N?a?jN?sU)?)?h?Rh?R?AZ?ekP?IC?ekigAZ?ekP?c?ekC?ekC?R?(?)应用范围集团预加载接入AE2口碑2客户体验2聚划算3城市生活3OS4数字娱乐4阿里音乐5安全部516885蚂蚁6阿里通信6阿里云8智能生活10菜鸟11搜索13阿里影业13B2B14航旅21天猫23淘宝1351342资源加载时间极致性能Bad case15年初2015.11.10-11.11 到达率到达率86%98%在线到达率H5 容器-网络优化iOS阿里网络库HTTP-D

3、NSSPDYAndroidUC异步网络接口URLProtocolServer网络拦截1.域名收敛2.埋点优化前端优化Weex移动开发痛点Native开发痛点平台、设备差异自由部署能力开发集成效率Web开发痛点加载性能流畅体验HybridWeb&Native混合编程WeexWeex(HTML/CSS/JS)=Native UIDSL（HTML/JS/CSS）iOS UIiOS RenderEngineAndroid UIH5 UIAndroid RenderEngineH5 RenderEngineVirtual DOMWeex(HTML/CSS/JS)=Native UIDSLJS Frame

4、workWeex FileiOS RenderEngineH5 RenderEngineJSCore/V8transformerJS BundledeployServerJSJS-Native BridgecallNativeAndroid RenderEngineServerClientcallJs DSL JS-Bundle Virtual DOMBuild TreeApply StyleCreate ViewCSS LayoutAttach EventUpdate FrameNative/H5 ViewRenderEngineRenderEngineJavascript Engine J

5、avascript Framework Transformed BundlesJavascript Native Framework Native View/Container System FrameworkNativecallNativecallJS16: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.94

6、4 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

7、: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:

8、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 callNativ

9、e 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,ar

10、gs: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 对应于页面上的标签,负责把DOM元素渲染为对应的Native View.Weex Componen

11、t 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 菜鸟大促线产品线组件库业务业务模块JSFM(Vue 2.0)Rx（D2）Weex DSLAndroid RenderEngineWeex CoreiOS RenderEngineH5 RenderEngineToolchainJS Fram

12、ework千牛 AliHybridAPI Hilo聚划算业务业务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和API2016.04 会场框架Weex化、Open Source(private)3.发展中 2

13、016.05 Syntax扩展、性能、稳定性2016.06 Open Source(public)、DevTools、年中促大规模应用2016.08 Timer、Storage、fetch、Gesture多端一致-Android多端一致-iOS多端一致-H5轻量轻量语法：语法简单，一小时上手轻量SDK：Android：667KB+1.5MB(V8)iOS：787KBH5：86KB(gzip)高性能渲染分段快速渲染帧率（FPS）Scroll长列表：中高端机59+，低端机55+List长列表：中高端机55+，低端机50+内存无尽列表，原生内存复用CPU闲时：0%高峰：10%-30%Weex(Lis

14、t)RN(List)Weex(Scroller)RN(Scroller)Load1325ms1656ms1381ms1833msFPS55.4556.5559.0959.06Memory99.78M108.43M93.45M106.83MCPU(backend)0%6%0%7%CPU(max)26%34%25%36%in Nexus 5高性能秒开下载阶段：预加载执行阶段：Framework+JSBundle渲染阶段：分块渲染（tree/node）流畅异步Layout，让渲染脱离主线程Compositing节源JSCoreGC策略优化文本渲染性能优化NodeImageTextTextappend

15、=“node”ImageTextTextdivdivdivNodeappend=“node”ImageTextTextdivdivdivdivImageTextTextNodeappend=“node”ImageTextTextdivdivdivdivImageTextTextNodeappend=“node”TreeImageImageTextTextdivdivTextTextdivdivappend=“tree”append=“tree”ImageTextTextdivdivdivdivImageTextTextTreeappend=“tree”append=“tree”DevTools

16、DevToolsstethoponydebuggerNuclideReact devtoolsWeex devtoolsandroid(element,console,network,resources)ynnnyiOS(element,console,network,resources)ny4y2nymultiple devices/appnnnnyjs debuggernny3y1yvdom inspectornnnyyscreencast/select element/remote controlnnnnyhttp:/alibaba.github.io/weex/开源社区运作Discuss(Issue)Coding Code Review(PR)社区运作-需求社区运作-PR1.收获 1.大量边界条件，强化稳定性2.服务好开发者 1.并不容易，也不轻松2.代码、文档、工具、线上交流、线下活动开源