告别页面卡顿!用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会变为空
  • 现代浏览器已普遍支持,兼容性良好
相关推荐
哟哟耶耶1 小时前
Starting again-02
开发语言·前端·javascript
Apifox.1 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku2 小时前
Typescript return type
前端·javascript·typescript
叁佰万2 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆2 小时前
js异步任务你都知道了吗?
前端·面试
光影少年2 小时前
react生态
前端·react.js·前端框架
golang学习记3 小时前
从0死磕全栈之Next.js 中的错误处理机制详解(App Router)
前端
力Mer3 小时前
console.log()控制台异步打印与对象展开后不一致问题
前端·javascript
WillaWang3 小时前
Liquid:在assign定义变量时使用allow_false
前端
2401_831501733 小时前
Python学习之Day05学习(定制数据对象,面向对象)
前端·python·学习