Detailed explanation of how the front-end renders a large amount of data

The direction of front-end performance optimization

• Batch rendering of DOM: Avoid rendering of large amounts of DOM at one time, which can reduce the performance pressure of the browser.
• Concentrated DOM operation: Concentrate multiple DOM operations together to reduce unnecessary rendering.
• Remove DOMs outside the visual area: For DOM elements that are not in the visual area, they can be removed from the DOM tree to reduce memory footprint and rendering burden.

Methods to implement large amounts of data rendering

1. Use the timer

Method Overview:passsetIntervalThe timer inserts DOM elements in batches, processing a certain number of nodes at a time.

Code Example：

export default (element, data) => {
  const fragment = ();
  let timer = setInterval(() => {
    for (let i = 0; i < 20; i++) {
      const item = ();
      if (!item) {
        clearInterval(timer);
        break;
      }
      const div = ('div');
       = ;
      ('class', 'item');
       = ;
      (div);
    }
    (fragment);
  }, 100);
};

2. Use requestAnimationFrame instead of timer

Method Overview:userequestAnimationFrameLet's replacesetInterval, it executes a callback function before the browser's next repaint, thereby more precisely controlling the timing of DOM operations.

Code Example：

export default (element, data) => {
  requestAnimationFrame(() => step(element, data));
};
const step = (element, data) => {
  const fragment = ();
  for (let i = 0; i < 20; i++) {
    const item = ();
    if (!item) {
      break;
    }
    const div = ('div');
     = ;
    ('class', 'item');
     = ;
    (div);
  }
  (fragment);
   && requestAnimationFrame(() => step(element, data));
};

3. Use virtual scrolling

Method Overview: Virtual scrolling technology improves the rendering performance of the list by rendering only the data in the visual area, and dynamically adds or deletes DOM nodes according to the page scrolling.

Implementation process：

• Set the parent node'spositionforrelative, child nodespositionforabsolute, and passtransformProperties set the location of the child node.
• useboundaryThe array records the upper and lower boundaries of the rendered area.
• usestartIndexandendIndexto determine the range of data to be rendered.
• definitionstepVariables represent the number of DOMs added or deleted in batches, andthresholdThreshold to trigger the addition or removal of DOM.

Code Example：

export default (element, data) => {
  const boundary = [0, 0];
  let startIndex = 0;
  let endIndex = 0;
  const step = 10;
  const threshold = 200;
  const init = () => {
     = 'relative';
    drop();
    initScroll(element);
  };
  const drop = () => {
    // ...Code logic is the same as above...  };
  const rise = () => {
    // ...Code logic is the same as above...  };
  const createElement = (item, mode) => {
    // ...Code logic is the same as above...  };
  const initScroll = (element) => {
    // ...Code logic is the same as above...  };
};

Virtual scrolling scroll event processing

Method Overview: by listening to scroll events and combining thresholds (threshold) to decide whether to add or delete DOM nodes, and whether to trigger the addition or removal of data.

Code Example：

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

This is the end of this article about how to render a large amount of data in the front-end. For more related front-end data rendering content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!