搜索結果頁優化

業務場景

在App裏面，輸入一個關鍵詞，獲得一個搜索結果，這是一個很常見的一個功能場景。對於前端而言，有不少事情能夠嘗試和實踐。

優化方案

1. 首屏服務端渲染

第一頁能夠使用服務端渲染，減小頁面的請求量，可快速渲染

方案一：node+ejs

適用的場景：頁面的複雜度低，不存在大量的組件或者模塊間信息的同步。

方案二：node+vue+vuex

適用的場景：頁面的複雜程度高，含有大量的組件和組件間的信息流通或者同步。使用node+vue+vuex，方便團隊成員間的協做開發和後期維護。

2. 預先加載數據：接下來幾屏數據

業務場景：搜索出來的結果，滑動時，顯示更多的結果

方案一：請求第一屏幕的數據時，同時也會預請求第二屏幕的據，以此類推。滑動頁面的時候，就不會存在卡頓的狀況
方案二：讓客戶端提早預取數據，預取的時機能夠根據本身的業務場景判斷

3. 共享數據：

業務場景：搜索結果頁面，點擊每個Item，能夠進入詳情頁面。

方案：一級頁面和二級頁面能夠進，行共享數據

4. 客戶端提早預取通用庫

前端通常都會使用一些通用庫，通常狀況都不會改變，好比說zepto.js，能夠讓客戶端提早預取緩存

5. 服務端推送包

服務端推送相關的信息包

後記

嘗試使用http2.0