加载性能优化
性能与体验是前端的核心竞争力，是最直观反应页面是否好用、易用的标准。用户花在页面上的时间不应该是在等待页面加载和响应，而是使用和顺畅浏览的时间，因此如何提升页面性能和体验，让页面更快的可交互、浏览滚动更顺畅，是需要你持续的研究、优化、推进的。在 Rax 不断应用发展以及成熟的过程中，沉淀总结了一系列的性能体验的措施和最佳实践，通过这些，可以帮助你大幅提高页面的各项性能。
图片优化
图片占据着网页的大部分空间，尤其对于电商业务，商品图片占据了页面 90% 以上的空间，因此，优化图片，减少图片体积，可以明显的减少带宽，提升页面的加载性能。
图片优化是技术和视觉博弈的结果，需要你在视觉还原和清晰度的可接受范围内，在保证用户视觉体验的前提下，尽可能的进行优化，减少图片带宽，以提升页面加载性能。
1. 按需加载
针对图片的按需加载，Rax 提供了图片组件供你选择使用。
- rax-picture 将配置
lazyload=true打开。该懒加载配置只适用于 Rax Web。 - rax-recyclerview 作为你的滚动容器，其本身会有懒加载机制，只渲染可见区域。
2. 加载合适的图片
所谓合适的图片，是根据不同的环境场景来选择最优的图片展示，比如屏幕分辨率和网络环境。
针对分辨率和网络环境，我们提供了自动化的组件 rax-picture，方便的根据不同分辨率设置不同尺寸的图片，同时识别网络环境，增加质量控制。而对于 Weex 来说，客户端底层图片库同样会自动帮你进行处理。
资源预加载
进入无线时代后，受限于网络环境，依然存在着很多困境和瓶颈，特别是弱网环境，比如 2G/3G 的低网速，会极大拖慢页面资源的加载，导致页面打开慢，甚至打不开，用户体验十分糟糕。因此资源缓存，减少网络请求，避免网络环境对页面的影响，目前看是行之有效的改进方案。
- 端内
手淘端内一般可以通过 ZCache 的方式进行预加载 - 端外
端外可以通过 service worker 来进行资源的预加载
数据预加载
数据预加载(Data Prefetch)是用来将页面中需要请求的数据提前，并且与页面渲染并行，大幅缩短用户看到页面效数据的等待时间，提高用户体验。大致思路如下：
利用路由容器以及 WebView 容器启动/初始化时间进行异步数据的获取，而等页面真正渲染需要数据的时候直接通过 jsbridge 拿到所需数据进行渲染，最终可以节省的时间 = 容器路由时间(找哪个容器渲染) + 容器启动时间 + 容器初始化时间 + 页面框架渲染时间
减少 bundle size
JS Bundle 的大小直接影响了 Android 下 js 执行时间，代码量每增加 1k，纯渲染时间增加 1-2ms，渲染性能和代码量 Android下是强相关的。可以通过 webpack bundle 分析工具，查看各资源的大小分布，也可以利用 webpack 的 tree shaking 抖动掉一些僵尸代码。也可以通过资源懒加载等手段延迟加载资源，让首屏能更快的展示出来。
性能优化是需要你持续关注，不过投入的事情，正是各种细小优化的量变积累，才有了最后的质变。