手机淘宝 H5 和 Weex 容器的构建实践（58页）.pdf

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