告别页面卡顿!用DocumentFragment打造高性能DOM操作

你是否曾经遇到过这样的场景:需要动态创建大量元素并添加到页面中,结果页面突然变得卡顿,甚至出现短暂的白屏?

为什么页面会卡顿?

当我们直接使用appendChild()方法一个个添加元素时,每个操作都会触发浏览器的重绘(repaint)和回流(reflow)。这个过程就像是你去超市购物,每拿一件商品就去收银台结一次账,而不是把所有商品拿齐后一次性结账。

回流 是浏览器重新计算元素位置和几何结构的过程,重绘则是将新外观绘制到屏幕上的过程。这两个操作都非常消耗性能。

解决方案:DocumentFragment

DocumentFragment就像一个"虚拟DOM容器",它允许我们在内存中构建DOM结构,然后一次性添加到实际DOM中。这样就只触发一次重绘和回流!

基本用法

ini 复制代码
// 创建DocumentFragment
const fragment = document.createDocumentFragment();

// 批量创建元素并添加到fragment
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `列表项 ${i}`;
  fragment.appendChild(li);
}

// 一次性添加到真实DOM
document.getElementById('myList').appendChild(fragment);

实战对比

传统方式(性能低下):

ini 复制代码
const ul = document.getElementById('myList');

// 每个操作都会触发重绘/回流
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `列表项 ${i}`;
  ul.appendChild(li); // 每次添加都触发重排
}

使用DocumentFragment(高性能):

ini 复制代码
const ul = document.getElementById('myList');
const fragment = document.createDocumentFragment();

// 在内存中构建,不会触发重排
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `列表项 ${i}`;
  fragment.appendChild(li);
}

// 一次性添加,只触发一次重排
ul.appendChild(fragment);

性能测试

我做了个简单测试,添加10000个列表项:

  • 直接添加:约1200ms,页面明显卡顿
  • 使用DocumentFragment:约80ms,页面流畅

性能提升超过10倍!

实际应用场景

  1. 无限滚动列表:加载大量数据时特别有用
  2. 动态表格:需要一次性添加多行数据
  3. 批量操作:需要对多个元素进行复杂操作后再添加到DOM
  4. 模板渲染:先构建完整结构再一次性插入

注意事项

  • DocumentFragment本身不会被渲染,只有其内容会被添加
  • 添加到真实DOM后,DocumentFragment会变为空
  • 现代浏览器已普遍支持,兼容性良好
相关推荐
Crystal3282 分钟前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476684 分钟前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin5 分钟前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风29 分钟前
小程序中获取元素节点
前端·小程序
PineappleCoder32 分钟前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost32 分钟前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求
焚 城1 小时前
EXCEL(带图)转html【uni版】
前端·html·excel
我家媳妇儿萌哒哒1 小时前
Vue2 elementUI年份区间选择组件
前端·javascript·elementui
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
该用户已不存在1 小时前
Golang 上传文件到 MinIO?别瞎折腾了,这 5 个库拿去用
前端·后端·go