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