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