搜尋結果頁優化

Cristic發表於2017-05-21

業務場景

在App裡面,輸入一個關鍵詞,得到一個搜尋結果,這是一個很常見的一個功能場景。對於前端而言,有很多事情可以嘗試和實踐。

優化方案

1. 首屏服務端渲染

   第一頁可以使用服務端渲染,減少頁面的請求量,可快速渲染
方案一:node+ejs
  適用的場景:頁面的複雜度低,不存在大量的元件或者模組間資訊的同步。
方案二:node+vue+vuex

適用的場景:頁面的複雜程度高,含有大量的元件和元件間的資訊流通或者同步。使用node+vue+vuex,方便團隊成員間的協作開發和後期維護。

2. 預先載入資料:接下來幾屏資料
    業務場景:搜尋出來的結果,滑動時,顯示更多的結果

方案一:請求第一螢幕的資料時,同時也會預請求第二螢幕的據,以此類推。滑動頁面的時候,就不會存在卡頓的情況
方案二:讓客戶端提前預取資料,預取的時機可以根據自己的業務場景判斷

3. 共享資料:
    業務場景:搜尋結果頁面,點選每一個Item,可以進入詳情頁面。

方案:一級頁面和二級頁面可以進,行共享資料

4. 客戶端提前預取通用庫
      前端一般都會使用一些通用庫,一般情況都不會改變,比如說zepto.js,可以讓客戶端提前預取快取
5. 服務端推送包

服務端推送相關的資訊包

後記
 嘗試使用http2.0

相關文章