Weex架构简介和性能优化实战淘宝：(饮源)/weex目录•1、Weex框架简介•2、Weex性能优化实践•3、最佳实践Weex框架简介简明架构图DSL（HTML/JS/CSS）VirtualDOMiOSAndroidH5RenderEngineRenderEngineRenderEngineiOSUIAndroidUIH5UI简明架构图ServerDSL（HTML+CSS+JSWeexFileJSBundle）transformerdeployServerJSJSFrameworkJSCore/V8JS-NativeBridgecallJscallNativeiOSAndroidH5RenderEngineRenderEngineRenderEngineClientDSLJS-BundleJS&Native通信
协议
离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载
312NativeRender性能优化实践网络＋渲染：秒开问题与•1、JSbundle慢（压缩后60k，NetworkTime>800ms）•2、JS和Native通信效率低，拖慢加载时间•3、长页面VDom渲染时间慢，时间40%左右•4、JSTh过于繁忙（Json&反射调用）•5、JSTask无法抢占执行，导致新页面打开慢•6、复杂页面滚动帧率低的问题WeexTimeLine网络下载JS&Native通信渲染(>50%)(>25%)(<25%)Spdy优化并发增强反射&GC粒度控制源文件压缩图片策略http-cache即时中断opacity<100预加载（<）链路精简文字渲染<100（<）网络优化HTTP-DNS1.防止域名劫持2.更精准的调度，更快的建连3.额外的域名相关SPDY1.多路复用请求优化2.服务器推送技术3.SPDY压缩http头网络优化网络问题：•1、优化前状况：iOS280~450msAndroid700~900ms•2、业务JS文件过大，gzip压缩后（60～80k)•3、域名没有收敛•4、没有配置Spdy协议•5、没有httpCache，200请求线上性能数据对比：预加载JSbundle请求N本地文件命中？Y加载本地资源加载资源会场典型值iOSAndroid走网络400ms850ms预加载10ms35msWeex通信机制并发增强JSNativeJSNativecallNative:0callNative:0callNative:1callJS:0callNative:2callNative:1callNative:3callJS:1callNative:2callJS:ncallJS:2callNative:n+1callNative:n+2callNative:ncallJs:n压测页面加载性能：加载性能提升30%粒度JSNativeJSNativecallNative:node1callNative:NodeTree1callNative:node2callNative:NodeTree2callNative:node3callNative:NodeTree3callNative:nodencallNative:n+2append＝nodeappend＝tree压测页面加载性能：append＝tree方式比append＝node提升10%即时中断JSNativeJSNativeInstance1:callNative:0Instance1:callNative:0键返回Instance1:callNative:1BackInstance1:callNative:1DESTROY_CODEBack键Instance1:callNative:2Instance1:callNative:2DESTROY_INSTInstance2:callNative:1ANCEInstance1:callJS:nInstance2:callNative:1Instance2:callJS:n-2Instance3:callNative:2Instance2:callNative:n-1Instance2:callJS:nInstance2:callNative:n解决长页面快速进出，无法中断的问题链路精简JSFrameworkJNINativeRenderDom:addElementcall“addElement”Format”callNative”call“callNative”handle“callNative”Dom:addElement高频通信接口上浮，减少中间数据转化消耗，加载性能平均提升15%渲染优化渲染优化•帧率优化•图片加载策略（域名收敛、webp收敛、复用等）•反射&GC优化（AndroidDeviceMonitor）•List最佳实践（一个List一个10屏的Cell？）•opacity属性优化（大坑）•文字渲染优化（截断、性能）反射&GC优化JSJSThDomThUIThDom指令updateDomupdateStyleJSONCssLayoutupdateAttrsreflect调用…………优化效果：加载时间提升10%，帧率提升5帧List最佳实践Cell1Cell1Cell2:1Cell2:2Cell2:3Cell2（>20屏）Cell2:4……Cell2:nOpacity属性问题解决
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
：setLayerType(View.LAYER_TYPE_HARDWARE,null);优化效果：38帧－>55帧Text优化优化前(文字被截断)优化后(正常渲染)Text优化高频通口上浮，减少中间数据转化消耗，加载性能平均提升15%Measure和Draw使用了同一个对象，避免了额外的对象创建，预计提升10%左右最佳实践•1、dom数量多会严重影响性能，因此必须尽可能减少同时间产生过多的dom；•2、长列
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
建议使用list，每个Cell尽量拆分；•3、使用list+loadmore方式实现长列表分页加载；•4、实现tab切换功能的时候，注意list的个数；•5、点击跳转的场景建议使用a而不是透过onclick绑定的方式跳转。Q&AWeex地址：
浙公网安备 33021202002483