Common Big Data Scenarios and Front-End Techniques for Rendering Large Data Sets

Common big‑data scenarios such as full‑screen bullet comments and server‑side responses with thousands of items can cause front‑end page jank when rendered directly.

The root causes are frequent DOM reflows caused by excessive element creation and the sheer number of DOM nodes that the browser must paint.

To mitigate these issues, the article proposes several techniques:

Dynamic element creation with document.createElement and appendChild , noting the performance impact of repeated appends.

String‑concatenation rendering to reduce DOM insertions, with a discussion of its maintenance drawbacks.

Using DocumentFragment to batch DOM operations, thereby avoiding reflows until the fragment is attached to the document.

Implementing virtual scrolling (virtual list) that only renders elements visible in the viewport, destroying off‑screen nodes to keep the DOM lightweight.

Code snippet 1 demonstrates basic element creation and appending:

/** 
 * 代码片段一
 * 每个标签就进行一次creatElement和appendChild
 * 不足：多次appendChild会造成页面重排，影响性能
 */
const node = document.createElement('div');
node.className = 'giftinfo';
let msg = data.msg;

// avatar
let avatar = document.createElement('img');
avatar.className = 'avatar';
avatar.setAttribute('src', msg.avatar || userDefaultImg);
node.appendChild(avatar);

// name
let name = document.createElement("span");
name.className = 'name';
name.innerText = msg.nickname || '未知';
node.appendChild(name);

// gift image
let giftimg = document.createElement('img');
giftimg.className = 'img';
giftimg.setAttribute('src', getGiftLists[msg.content].url);
node.appendChild(giftimg);

Code snippet 2 shows a string‑based approach:

/** 
 * 代码片段二
 * 使用字符串拼接，减少appendChild插入
 * 不足：如果每个列表展示很复杂，这样拼接字符串容易出错，维护成本高
 */
const li = document.createElement("li");
li.className = user_id === item.from_uid ? 'own_chat' : '' + item.type === 'gift' ? 'gift-item' : '';
let imghtml = `<img src="${item.from_useravatar || userDefaultImg}" class="avatar">`;
let namehtml = `<span class="name">${item.from_username}</span>`;
let texthtml = ``;
if (item.type === "gift") {
  let giftname = `<span>送了一个<span class="giftinfo-type">${item.content.value}</span></span>`;
  let giftimg = `<img class="img" src="${item.content.url}" :alt="${item.content}">`;
  texthtml = `<div class="giftinfo">${giftname}${giftimg}</di>`;
} else {
  texthtml = `<span v-else class="text">${item.content}</span>`;
}
let infotop = `<div class="infotop">${namehtml}</div>`;
let iteminfo = `<div class="item-info">${infotop}${texthtml}</div>`;
li.innerHTML = `${imghtml}${iteminfo}`;
node.appendChild(li);

Code snippet 3 integrates DocumentFragment and batch rendering with requestAnimationFrame to further reduce reflows:

function getlistToHtmlStr(list = []) {
  if (this.$props.commentClose) return;
  if (list.length == 0) return "";
  const total = list.length;
  let limit = everyAddMax; // e.g., 200 items per batch
  let totalPage = total > limit ? Math.ceil(total / limit) : 1;
  const render = (page) => {
    if (page >= totalPage) {
      if (this.hasMaxList) this.removeList(total);
      return;
    }
    requestAnimationFrame(() => {
      const fragment = document.createDocumentFragment();
      const fornum = page * limit + limit;
      for (let i = page * limit; i < fornum; i++) {
        const item = list[i];
        if (item.type !== 'gift') {
          const li = document.createElement("li");
          // ... reuse code from snippet 2 ...
          li.innerHTML = `${imghtml}${iteminfo}`;
          fragment.appendChild(li);
        }
      }
      this.scrollBody.appendChild(fragment);
      render(page + 1);
    }, 0);
  };
  render(0);
}

The virtual list principle is explained: only the visible portion of data is rendered, while off‑screen elements are destroyed, keeping the DOM size small and preventing page freezes.

Popular virtual‑list libraries such as vue-virtual-scroller for Vue and react-virtualized for React are referenced, along with their key components and configuration options (e.g., rowHeight , estimatedRowSize ).

References to the original articles are provided at the end.