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