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

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

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

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

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

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

1. 使用定時器

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

代碼示例：

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代替定時器

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

代碼示例：

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. 使用虛擬滾動

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

實現(xiàn)過程：

設置父節(jié)點的position為relative，子節(jié)點的position為absolute，并通過transform屬性設置子節(jié)點的位置。
使用boundary數(shù)組記錄渲染區(qū)域的上下邊界。
使用startIndex和endIndex來確定需要渲染的數(shù)據(jù)范圍。
定義step變量表示每次批量添加或刪除的DOM數(shù)量，以及threshold閾值來觸發(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) => {
    // ...代碼邏輯同上...
  };
};

虛擬滾動的scroll事件處理

方法概述：通過監(jiān)聽滾動事件并結合閾值（threshold）來決定是否添加或刪除DOM節(jié)點，以及是否觸發(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);
};

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

您可能感興趣的文章: