前一段時間出去面試了一波，有一個很常見但是也很值得深思的問題：在前端某次獲取的資料量非常大的情況下，如何優化使用者體驗？假設不僅資料量很大，還需要在前端進行一些計算，那麼該如何優化？
我猜大家都遇到過這種類似的問題吧……以下來分析一下我的個人看法
1. 資料量非常大
這種情況其實還可以細分資料量的數量區間，不同的數量區間有不同的解決辦法~
1. 分頁懶載入
這種應該是最直接粗暴的解法了，當資料量變少了的時候，資料下載時間自然會變小，畢竟大公司前端渲染的速度都是按照ms級別進行優化的~這樣肯定是一個行之有效的辦法，但是缺點是有一些場景確實沒辦法分頁取資料，這樣的話我們看下面的解決方案~
2. 服務端做快取
從後端響應的速度來看，大資料量的情況下，查資料庫的時間是需要消耗不少的，這個可以參考chrome開發者工具的network中的TTFB，這個時間越長，那麼證明服務端不給力，需要進行優化，在資料量大的情況下，資料庫查詢是要消耗掉大部分時間的，這個時候，最好是使用快取服務來提高查詢效率，這個主要就是redis或者memcache來做，記憶體資料庫，速度會非常快，重點是我們查詢的資料只要命中快取即可，這個方案缺點是第一次查詢會慢一些，之後的會很快，但是首次查詢其實可以由後端直接操作redis或memcache來直接設定資料~
3. web worker
這種辦法的簡單介紹是：Web Worker為Web內容在後臺執行緒中執行指令碼提供了一種簡單的方法。執行緒可以執行任務而不干擾使用者介面。此外，他們可以使用XMLHttpRequest執行 I/O (儘管responseXML和channel屬性總是為空)。一旦建立， 一個worker 可以將訊息傳送到建立它的JavaScript程式碼, 通過將訊息釋出到該程式碼指定的事件處理程式（反之亦然）。
這種方法可以不佔用使用者介面的顯示而去做一些其它的事情，這樣，相對來講，我們平時最常用的UI執行緒和JS執行執行緒就是空出來做一些其他的事情，這種請求資料的活可以交給web worker來做，具體做法這裡不加贅述，有興趣可以看看文件~
4. 前端快取
這種方式就是傳統的解決方式，例用強快取也好，協商快取也好，都可以達到某一段時間內使用快取資料的目的，這個方式有超級多的文章解釋，這裡我也就不多說了~只是提供一個解決思路而已
2. 前端做計算
其實從使用者體驗上來講，我不太建議前端做太過複雜、過多計算；我之前和一個（做後端的）朋友聊過，他也更建議把計算邏輯放在後端，另開一個執行緒去計算，這樣的話，服務端也不浪費，前端也不必做一些類似的事情，請求來的資料直接渲染肯定是最快的，使用者體驗也是比較好的，假設有條件限制，這部分工作只能放在前端來做，那麼我的建議就是還是使用web worker來做前端的多執行緒，把計算相關的部分放在web worker中完成。
個人經驗有限，所以可能整理出的東西也不盡完整，有問題還請大家多多指出~