使用虛擬滾動僅渲染可見的物品和一個小的緩沖區(qū)，大大降低了DOM節(jié)點(diǎn)，并通過諸如React-Window或Vue-Virtual-Scroller等庫改善了性能。 2。避免使用USECALLBACK，USEMEMO和REACT.Memo防止不必要的重新訂閱并優(yōu)化組件邏輯，避免使用內(nèi)聯(lián)功能和呈現(xiàn)昂貴的渲染操作。 3.通過保持樹淺，使用包含：布局和變形：變換，并避免昂貴的樣式（如可滾動元素上的盒子遮陽）來優(yōu)化DOM結(jié)構(gòu)和CSS。 4。使用React 18，RequestIdleCallback或增量渲染中的usedeferredValue等技術(shù)進(jìn)行動態(tài)數(shù)據(jù)的訪問或油門更新，以防止在頻繁更新期間壓倒瀏覽器。有效渲染大列表的關(guān)鍵是最大程度地減少不必要的渲染，并僅關(guān)注用戶可以看到的內(nèi)容，從而確保60fps滾動即使有成千上萬的項目。

如果天真地完成，DOM中的大量清單可以將功能強(qiáng)大的設(shè)備帶到膝蓋上。當(dāng)您處理數(shù)百或數(shù)千個項目時，由于過多的DOM節(jié)點(diǎn)，內(nèi)存使用量和布局thrashing而迅速降低性能。關(guān)鍵不是要渲染一切，而是僅渲染必要的內(nèi)容。這是有效做到的方法。

1。使用虛擬滾動（窗口）

虛擬滾動或窗口僅使當(dāng)前在視口中可見的項目（加上一個小型緩沖區(qū)），而不是一次。當(dāng)用戶滾動時，列表動態(tài)更新了哪些項目的渲染。

它的工作原理：

• 計算容器高度和項目高度。
• 確定可見區(qū)域中適合多少個項目。
• 僅渲染這些項目，并在用戶滾動時更新它們。
• 使用transform或top定位移動可見窗口。

好處：

• 大大減少了DOM節(jié)點(diǎn)（例如，1000個項目→10–20渲染）。
• 改善內(nèi)存使用情況和滾動性能。

有幫助的庫：

• 反應(yīng)： react-window ， react-virtualized
• VUE ： vue-virtual-scroller
• 香草JS ： Intersection Observer手動定位

用react-window示例：

從“ react-window'導(dǎo)入{固定的sizelist as list};

const row =（{index，style}）=>（
  <div style = {style}>行{index} </div>
）；

const virtuallist =（）=>（
  <List Height = {600} itemCount = {1000} itementize = {35} width = {300}>
    {排}
  </list>
）；

2。避免在渲染中的內(nèi)聯(lián)功能和昂貴的操作

即使虛擬化，效率低下的邏輯也可以減慢速度。

常見的陷阱：

• JSX中的內(nèi)聯(lián)函數(shù)： (item) => handleDelete(item)在每個渲染上創(chuàng)建一個新功能。
• map()或組件主體內(nèi)的重量計算。

解決方案：

• 將活動處理程序移到render外或使用useCallback之外。
• 用useMemo記住昂貴的計算。
• 使用React.memo作為列表項目，以防止不必要的重新租賃。

 const listItem = react.memo（（（{item，onDelete}））=> {
  返回<div onclick = {（）=> ondelete（item.id）}> {item.name} </div>;
}）;

3。優(yōu)化DOM結(jié)構(gòu)和CSS

即使元素較少，DOM結(jié)構(gòu)或昂貴的樣式也會損害性能。

尖端：

• 保持圓頂樹淺 - 避免深嵌套包裝紙。
• 使用will-change: transform或contain: layout 。
• 避免在許多元素上避免box-shadow ， border-radius或filter - 在重新粉刷過程中它們是昂貴的。
• 確保滾動容器具有固定高度，以防止布局偏移。

 .list-container {
  身高：500px;
  溢出Y：自動；
  包含：布局；
}

4。動態(tài)數(shù)據(jù)的訪問或油門更新

如果您的列表經(jīng)常更新（例如，實時搜索或流數(shù)據(jù)），則渲染每個更改可能會使瀏覽器淹沒。

策略：

• 調(diào)試輸入過濾器- 等到鍵入停止后再重新渲染。
• 批處理更新- 使用requestIdleCallback或useDeferredValue （react 18）延遲非關(guān)鍵渲染。
• 增量渲染- 使用setTimeout或requestAnimationFrame隨著時間的推移過程和渲染數(shù)據(jù)塊。

用useDeferredValue示例：

從'react'導(dǎo)入{usedeferredvalue}；

函數(shù)搜索清單（{items}）{
  const [filter，setFilter] = usestate（''）;
  const deferredfilter = usedeferredValue（filter）;

  const FilterDiTems = usememo（（）=>
    items.filter（item => item.name.includes（deferredfilter）），
    [項目，延期偏置]
  ）；

  返回 （
    <>
      <輸入值= {filter} onChange = {e => setFilter（e.target.value）} />
      <Virtuallist項目= {filteredItems} />
    </>
  ）；
}

有效地渲染大量清單的歸結(jié)為更少，更聰明。虛擬滾動是最大的勝利，但必須與干凈的組件設(shè)計和優(yōu)化更新配對。結(jié)果？平滑60fps滾動，即使有成千上萬的物品。

基本上：不要渲染用戶看不到的東西。

以上是有效地渲染DOM中的大列表的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！