淘系前端性能優化 —— 加載性能

本文摘自 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 抖動掉一些殭屍代碼。也能夠經過資源懶加載等手段延遲加載資源，讓首屏能更快的展現出來。

性能優化是須要你持續關注，不過投入的事情，正是各類細小優化的量變積累，纔有了最後的質變。