Question

性能与体验是前端的核心竞争力，是最直观反应页面是否好用、易用的标准。用户花在页面上的时间不应该是在等待页面加载和响应，而是使用和顺畅浏览的时间，因此如何提升页面性能和体验，让页面更快的可交互、浏览滚动更顺畅，是需要你持续的研究、优化、推进的。在 Rax 不断应用发展以及成熟的过程中，沉淀总结了一系列的性能体验的措施和最佳实践，通过这些，可以帮助你大幅提高页面的各项性能。

图片优化

图片占据着网页的大部分空间，尤其对于电商业务，商品图片占据了页面 90% 以上的空间，因此，优化图片，减少图片体积，可以明显的减少带宽，提升页面的加载性能。

图片优化是技术和视觉博弈的结果，需要你在视觉还原和清晰度的可接受范围内，在保证用户视觉体验的前提下，尽可能的进行优化，减少图片带宽，以提升页面加载性能。

1. 按需加载

针对图片的按需加载，Rax 提供了图片组件供你选择使用。

• rax-picture 将配置 lazyload=true 打开。该懒加载配置只适用于 Rax Web。
• rax-recyclerview 作为你的滚动容器，其本身会有懒加载机制，只渲染可见区域。

2. 加载合适的图片

所谓合适的图片，是根据不同的环境场景来选择最优的图片展示，比如屏幕分辨率和网络环境。

针对分辨率和网络环境，我们提供了自动化的组件 rax-picture ，方便的根据不同分辨率设置不同尺寸的图片，同时识别网络环境，增加质量控制。而对于 Weex 来说，客户端底层图片库同样会自动帮你进行处理。

资源预加载

进入无线时代后，受限于网络环境，依然存在着很多困境和瓶颈，特别是弱网环境，比如 2G/3G 的低网速，会极大拖慢页面资源的加载，导致页面打开慢，甚至打不开，用户体验十分糟糕。因此资源缓存，减少网络请求，避免网络环境对页面的影响，目前看是行之有效的改进方案。

1. 端内
   手淘端内一般可以通过 ZCache 的方式进行预加载
2. 端外
   端外可以通过 service worker 来进行资源的预加载

数据预加载

数据预加载 (Data Prefetch) 是用来将页面中需要请求的数据提前，并且与页面渲染并行，大幅缩短用户看到页面效数据的等待时间，提高用户体验。

利用路由容器以及 WebView 容器启动/初始化时间进行异步数据的获取，而等页面真正渲染需要数据的时候直接通过 jsbridge 拿到所需数据进行渲染，最终可以节省的时间 = 容器路由时间（找哪个容器渲染) + 容器启动时间 + 容器初始化时间 + 页面框架渲染时间

减少 bundle size

JS Bundle 的大小直接影响了 Android 下 js 执行时间，代码量每增加 1k，纯渲染时间增加 1-2ms，渲染性能和代码量 Android 下是强相关的。可以通过 webpack bundle 分析工具，查看各资源的大小分布，也可以利用 webpack 的 tree shaking 抖动掉一些 僵尸 代码。也可以通过资源懒加载等手段延迟加载资源，让首屏能更快的展示出来。

性能优化是需要你持续关注，不过投入的事情，正是各种细小优化的量变积累，才有了最后的质变。