淘系前端性能优化 —— 加载性能

本文摘自 Rax 官网 rax.js.org

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

图片优化

图片占据着网页的大部分空间，尤为对于电商业务，商品图片占据了页面 90% 以上的空间，所以，优化图片，减小图片体积，能够明显的减小带宽，提高页面的加载性能。

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

1. 按需加载

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

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

2. 加载合适的图片

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

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

资源预加载

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

数据预加载

数据预加载(Data Prefetch)是用来将页面中须要请求的数据提早，而且与页面渲染并行，大幅缩短用户看到页面效数据的等待时间，提升用户体验。大体思路以下：

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

减小 bundle size

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

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