b站面試官：如果後端給你 1w 條數據，你如何做展示？
theme: fancy
本文正在參加「金石計劃」
最近一位朋友參加阿b的面試，然後面試官問了她這個問題，我問她咋寫的，她一臉淡定的説：“虛擬列表。”
虛擬列表
What？？？
虛擬列表是個啥，我咋不知道😭
我就去查了一下，好傢伙：
虛擬列表其實是按需顯示的一種實現，即只對可見區域進行渲染，對非可見區域中的數據不渲染或部分渲染的技術，從而達到極高的渲染性能。
獲取數據本身其實並沒有那麼消耗性能，渲染的過程才消耗時間，所以我們可以把渲染這一部分抽離出來，這樣消耗的時間就減少了許多。
詳細的實現可以看一下這裏：”詳解虛擬列表“
懶加載
我看着虛擬列表想了半天，這玩意和懶加載有啥區別嗎？
我就默默去查了一下懶加載詳細定義和實現：
懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。用户滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。在某些情況下，它還可以幫助減少服務器負載。常適用圖片很多，頁面很長的電商網站場景中。
你仔細看看實現結構，懶加載的圖片是已經存在的 div，已經放到 HTML 的結構裏了。
我們再看看之前那個虛擬列表實現鏈接裏的效果：
虛擬列表裏面的渲染是動態的，當他不在視口可見，div 也不進行渲染了。
想詳細看看懶加載的可以戳這個鏈接：“懶加載詳解”
分頁
我能想到的方式自然還有組件庫自帶的分頁。
分片渲染
其實還有一個東西，叫分片渲染
分片渲染：簡單的説就是一個執行完再執行下一個，其思想是建立一個隊列，通過定時器來進行渲染，比如説一共有3次，先把這三個放入到數組中，當第一個執行完成後，並剔除執行完成的，在執行第二個，直到全部執行完畢，渲染隊列清空。
如果我們一次性把所有的數據都進行渲染顯然是會出現很大的問題，JS 的執行速度比 DOM 快得多，我們可以渲染一個 Item，讓他一開始的展示與否為 false，然後我們一個一個的渲染或者100個100個的渲染，這樣就解決了我們一次性渲染過多 的問題。
個人感覺有點像分頁（
想要詳細看的可以看看這篇文章：“分片渲染 & 虛擬列表”
那麼這就是本章的全部內容啦
點個贊再走吧～