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

2,224 阅读3分钟

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

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

图片优化

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

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

1. 按需加载

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

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

2. 加载合适的图片

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

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

资源预加载

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

数据预加载

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

img

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

减少 bundle size

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

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