頁面性能優化

前言

頁面打開越快，給予用戶的體驗越好。
有權威的C端app數據規定： 頁面打開的速率標準爲2s, 由於當頁面打開超過2s之後，用戶的流失率將會呈現指數級的流失。

實踐

日前筆者正在將一個PC的數據列表頁重構中，簡單介紹下該頁面的結構：
頁面由 3 大部分構成，
第一部分爲數據顯示，只負責顯示數據，和綁定用戶的跳轉事件。
第二部分爲篩選器，負責頁面的數據篩選控制。
第三部分爲數據的列表展現，基本也只是顯示數據，有tab切換、綁定用戶的更改數據、跳轉事件。

改造前面臨問題（基本把能犯的問題都犯了）

• 第一部分：
  1）該部分數據由兩個接口的數據共同拼湊而成，該部分UI ready 的時間點是 兩部分數據都ready 之後。
  因此該部分暴露給用戶的時間點 = max(ajax1, ajax2)
  2）ajax2 的數據還被第三部分所使用，在切換tab 的時候，由於第三部分依賴於ajax2, 所以又請求了一遍，並再次渲染，
  浪費了http 開銷，同時拖緩了第三部分的切換速率，還進行了毫無必要的DOM渲染。

• 第二部分：
  暫未優化

2.第三部分因爲有比較多的數據，於是ajax數據請求的時間很是的長。
1）每次切換tab，都會發送請求。
2）該部分UI也是由兩個開銷較大的 ajax 的共同構成，大大增長了該部分的渲染速度。
而且ajax2 還依賴於 ajax1 的數據，因此二者是同步。
ajax2在數據很是大的時候，還有很大的概率會因爲超時而發生錯誤。此時這一頁面重要的部分就顯示不出來了，
對於用戶來講是個很是痛苦的體驗。
3) 同時更改某一條數據中某一項，頁面發生刷新整個頁面操做（很是殘暴的前端更新機制）

改造後

• 第一部分
  1）將UI 按照 ajax 請求來劃分，劃分爲兩部分，任一 ajax 完成，UI均可以實現部分的加載
  此時該部分暴露給用戶的時間點 = min(ajax1, ajax2)
  2）緩存ajax2的數據，保證頁面對於這個接口只請求一次。

• 第三部分
  1）按照tab緩存數據，確保每一個tab的請求只會發送一次。
  2）將ajax一、ajax2的數據對應的UI部分拆分，ajax2的數據對於頁面來講不構成主要的影響，由於當ajax1的數據返回的時候，
  這部分的數據就能夠先顯示出來，減小用戶的等待時間。同時若是ajax2的接口發生錯誤，也不會影響用戶的操做。
  3）將ajax1 這個很是大的接口，拆分紅 三個數據接口：主要數據接口、次要數據一、次要數據2。（這個步驟須要後端配合）
  當主要數據接口返回時，便可給到用戶反饋。
  4）將全部的數據緩存在頁面中，更改某個數據的時候，只要更改爲功，則更新緩存數據，避免發送請求。

總結

目前筆者用到的頁面優化的方法總結起來：
1）模塊化：將UI儘可能拆解的比較細小，可使用戶儘早地看到頁面的一些信息，而非一直在loading , 同時細小的局部對於接口的容錯性也能夠更好地保證。
2）異步接口、優先顯示：頁面的開銷每每來自HTTP 請求，對於一個UI有不少接口共同組成的，能夠優先顯示重要的信息，大大減小頁面的等待時間。
3）緩存數據：前端保存一份完整的數據，同時維護、更新這份數據，對於用戶在頁面上操做是十分友好的一件事情。

問題

1）緩存數據：須要注意的是前端緩存數據的能力相對有限，對於一些實時的數據沒法作到實時更新，同時緩存數據比較容易出錯，後期維護成本會大大增長。