詳解前端如何對(duì)超大量數(shù)據(jù)進(jìn)行渲染

更新時(shí)間：2024年12月10日 15:47:38 作者：前端飼養(yǎng)員

這篇文章主要為大家詳細(xì)介紹了前端如何對(duì)超大量數(shù)據(jù)進(jìn)行渲染,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前端性能優(yōu)化的方向

分批渲染DOM：避免一次性渲染大量DOM，可以減少瀏覽器的性能壓力。
集中進(jìn)行DOM操作：將多次DOM操作集中在一起進(jìn)行，減少不必要的渲染。
移除可視區(qū)域以外的DOM：對(duì)于不在可視區(qū)域的DOM元素，可以將其從DOM樹(shù)中移除，以減少內(nèi)存占用和渲染負(fù)擔(dān)。

實(shí)現(xiàn)大量數(shù)據(jù)渲染的方法

1. 使用定時(shí)器

方法概述：通過(guò)setInterval定時(shí)器分批插入DOM元素，每次處理一定數(shù)量的節(jié)點(diǎn)。

代碼示例：

export default (element, data) => {
  const fragment = document.createDocumentFragment();
  let timer = setInterval(() => {
    for (let i = 0; i < 20; i++) {
      const item = data.shift();
      if (!item) {
        clearInterval(timer);
        break;
      }
      const div = document.createElement('div');
      div.innerText = item.string;
      div.setAttribute('class', 'item');
      div.style.backgroundColor = item.color;
      fragment.appendChild(div);
    }
    element.appendChild(fragment);
  }, 100);
};

2. 用requestAnimationFrame代替定時(shí)器

方法概述：使用requestAnimationFrame來(lái)代替setInterval，它會(huì)在瀏覽器下一次重繪之前執(zhí)行回調(diào)函數(shù)，從而更加精確地控制DOM操作的時(shí)機(jī)。

代碼示例：

export default (element, data) => {
  requestAnimationFrame(() => step(element, data));
};
const step = (element, data) => {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 20; i++) {
    const item = data.shift();
    if (!item) {
      break;
    }
    const div = document.createElement('div');
    div.innerText = item.string;
    div.setAttribute('class', 'item');
    div.style.backgroundColor = item.color;
    fragment.appendChild(div);
  }
  element.appendChild(fragment);
  data.length && requestAnimationFrame(() => step(element, data));
};

3. 使用虛擬滾動(dòng)

方法概述：虛擬滾動(dòng)技術(shù)通過(guò)只渲染可視區(qū)域的數(shù)據(jù)來(lái)提高列表的渲染性能，并根據(jù)頁(yè)面滾動(dòng)動(dòng)態(tài)添加或刪除DOM節(jié)點(diǎn)。

實(shí)現(xiàn)過(guò)程：

設(shè)置父節(jié)點(diǎn)的position為relative，子節(jié)點(diǎn)的position為absolute，并通過(guò)transform屬性設(shè)置子節(jié)點(diǎn)的位置。
使用boundary數(shù)組記錄渲染區(qū)域的上下邊界。
使用startIndex和endIndex來(lái)確定需要渲染的數(shù)據(jù)范圍。
定義step變量表示每次批量添加或刪除的DOM數(shù)量，以及threshold閾值來(lái)觸發(fā)DOM的添加或刪除。

代碼示例：

export default (element, data) => {
  const boundary = [0, 0];
  let startIndex = 0;
  let endIndex = 0;
  const step = 10;
  const threshold = 200;
  const init = () => {
    element.style.position = 'relative';
    drop();
    initScroll(element);
  };
  const drop = () => {
    // ...代碼邏輯同上...
  };
  const rise = () => {
    // ...代碼邏輯同上...
  };
  const createElement = (item, mode) => {
    // ...代碼邏輯同上...
  };
  const initScroll = (element) => {
    // ...代碼邏輯同上...
  };
};

虛擬滾動(dòng)的scroll事件處理

方法概述：通過(guò)監(jiān)聽(tīng)滾動(dòng)事件并結(jié)合閾值（threshold）來(lái)決定是否添加或刪除DOM節(jié)點(diǎn)，以及是否觸發(fā)數(shù)據(jù)的添加或刪除。

代碼示例：

export const scroll = (element, func) => {
  let top = 0;
  return _.throttle(() => {
    const { scrollTop, scrollHeight } = element;
    if (scrollTop > top) {
      top = scrollTop;
      func({ mode: Mode.append, scrollTop, scrollBottom: scrollHeight - scrollTop - element.clientHeight });
    } else if (scrollTop < top) {
      top = scrollTop;
      func({ mode: Mode.before, scrollTop, scrollBottom: scrollHeight - scrollTop - element.clientHeight });
    }
  }, 100);
};

到此這篇關(guān)于詳解前端如何對(duì)超大量數(shù)據(jù)進(jìn)行渲染的文章就介紹到這了,更多相關(guān)前端數(shù)據(jù)渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: