Weex架构简介和性能优化课件.pptx

1、Weex架构简介和性能优化技术创新，变革未来https:/ UIiOS RenderEngineAndroid UIH5 UIAndroid RenderEngineH5RenderEngineVirtual DOM简明架构图DSL（HTML+CSS+JS）JS FrameworkWeex FileiOS RenderEngineH5RenderEngineJSCore/V8JS BundletransformerdeployServerJSJS-Native BridgeAndroid RenderEngineServerClientcallJscallNative简明架构图DSLJS-Bu

2、ndleJS&Native 通信通信协议协议312Native Render性能优化实践网络渲染：秒开问题与挑战1、JS bundle下载慢（压缩后60k，NetworkTime800ms）2、JS和Native通信效率低，拖慢加载时间3、长页面VDom渲染时间慢，占首屏时间40%左右4、JSThread过于繁忙（Json解析&反射调用）5、JS Task无法抢占执行，导致新页面打开慢6、复杂页面滚动帧率低的问题Weex TimeLineJS&Native 通信(25%)网络下载(50%)渲染(25%)反射&GCSpdy 优化源文件压缩文字渲染并发增强（）图片策略粒度控制即时中断链路精简htt

3、p-cache1预00加（载20屏）Cell 1Cell 2:1Cell 2:2Cell 2:3Cell 2:4Cell 2:nOpacity 属性问题解决方案：setLayerType(View.LAYER_TYPE_HARDWARE,null);优化效果：38帧55帧Text优化优化前(文字被截断)优化后(正常渲染)Text优化Measure和Draw使用了同一个对象，避免了额外的对象创建，预计提升10%左右最佳实践1、dom 数量多会严重影响性能，因此必须尽可能减少同时间产 生过多的 dom；2、长列表建议使用list，每个Cell尽量拆分；3、使用list+loadmore 方式实现长列表分页加载；4、实现tab切换功能的时候，注意list标签的个数；5、点击跳转的场景建议使用a 标签而不是透过onclick 绑定的方式跳转。