DocumentFragment

EventTarget (事件目标基类)
    │
    └── Node (节点基类)
            │
            ├── DocumentFragment (文档片段 - 本文档重点)
            │       ├─ 独立于文档树
            │       ├─ 轻量级容器
            │       └─ 批量操作优化器
            │
            ├── Document (文档节点)
            ├── Element (元素节点)
            ├── Text (文本节点)
            └── ... 其他节点类型

DocumentFragment 继承链：
├─ Node 接口
│  ├─ nodeType = 11 (DOCUMENT_FRAGMENT_NODE)
│  ├─ nodeName = "#document-fragment"
│  └─ 基础节点操作方法
│
└─ ParentNode 接口
   ├─ children 属性
   ├─ firstElementChild 属性
   ├─ lastElementChild 属性
   ├─ childElementCount 属性
   ├─ querySelector() 方法
   ├─ querySelectorAll() 方法
   └─ append() 方法

// 创建 DocumentFragment
const fragment = document.createDocumentFragment()

const fragment = document.createDocumentFragment()

// 添加节点
fragment.appendChild(document.createElement('div'))
fragment.append('文本', document.createElement('span'))

// 插入到文档
container.appendChild(fragment)

// HTML 模板
// <template id="card-template">
//   <div class="card">
//     <h2 class="name"></h2>
//     <p class="email"></p>
//   </div>
// </template>

const template = document.querySelector('#card-template')
const fragment = template.content.cloneNode(true)

// 填充数据
fragment.querySelector('.name').textContent = '张三'
fragment.querySelector('.email').textContent = 'zhangsan@example.com'

// 插入文档
document.body.appendChild(fragment)

const range = document.createRange()
range.selectNodeContents(sourceElement)

// 提取内容到 fragment（会从原位置移除）
const fragment = range.extractContents()

// 或者复制内容到 fragment（不影响原位置）
const clonedFragment = range.cloneContents()

// 跨文档导入（如 iframe）
const iframe = document.querySelector('iframe')
const importedFragment = document.importNode(
  iframe.contentDocument.createDocumentFragment(),
  true
)

const fragment = document.createDocumentFragment()

// 方式一：使用 nodeType 常量（推荐）
if (fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
  console.log('这是文档片段')
}

// 方式二：使用 nodeType 数值
if (fragment.nodeType === 11) {
  console.log('这是文档片段')
}

// 方式三：使用 instanceof
if (fragment instanceof DocumentFragment) {
  console.log('这是文档片段')
}

// 方式四：使用 nodeName
if (fragment.nodeName === '#document-fragment') {
  console.log('这是文档片段')
}

const fragment = document.createDocumentFragment()

// 添加子节点
fragment.appendChild(document.createElement('div'))
fragment.appendChild(document.createElement('span'))
fragment.append('文本内容')

console.log(fragment.nodeType)           // 11
console.log(fragment.nodeName)           // "#document-fragment"
console.log(fragment.parentNode)         // null
console.log(fragment.childNodes.length)  // 3
console.log(fragment.children.length)    // 2 (只有元素节点)
console.log(fragment.childElementCount)  // 2
console.log(fragment.textContent)        // "文本内容"

// 获取第一个子节点
console.log(fragment.firstChild)         // <div>
console.log(fragment.firstElementChild)  // <div>

const fragment = document.createDocumentFragment()

// 方式一：appendChild（返回被添加的节点）
const div = document.createElement('div')
const returned = fragment.appendChild(div)
console.log(returned === div)  // true

// 方式二：append（可添加多个节点，无返回值）
fragment.append(
  document.createElement('span'),
  '文本内容',
  document.createElement('p')
)

// appendChild 只能添加节点，append 可以添加字符串（自动转为文本节点）

// HTML 模板
const template = document.querySelector('#card-template')
const fragment = template.content.cloneNode(true)

// 查询单个元素
const name = fragment.querySelector('.name')
console.log(name)  // <h2 class="name">

// 查询所有元素
const allInputs = fragment.querySelectorAll('input')
console.log(allInputs.length)  // 输入框数量

// 复杂选择器
const firstRequired = fragment.querySelector('input[required]')

const original = document.createDocumentFragment()
original.appendChild(document.createElement('div'))

// 浅克隆：只克隆片段本身（空片段）
const shallowClone = original.cloneNode()
console.log(shallowClone.childNodes.length)  // 0

// 深克隆：克隆片段及其所有子节点（推荐）
const deepClone = original.cloneNode(true)
console.log(deepClone.childNodes.length)  // 1

const fragment = document.createDocumentFragment()

// 创建复杂结构
const ul = document.createElement('ul')
for (let i = 0; i < 5; i++) {
  const li = document.createElement('li')
  li.textContent = `项目 ${i + 1}`
  li.setAttribute('data-index', i)
  ul.appendChild(li)
}
fragment.appendChild(ul)

// 查询操作
const firstLi = fragment.querySelector('li')
const allLis = fragment.querySelectorAll('li')
const thirdLi = fragment.querySelector('li[data-index="2"]')

console.log(firstLi.textContent)     // "项目 1"
console.log(allLis.length)           // 5
console.log(thirdLi.textContent)     // "项目 3"

// 插入操作
const newLi = document.createElement('li')
newLi.textContent = '新项目'
fragment.querySelector('ul').insertBefore(newLi, firstLi)

// 克隆操作
const clonedFragment = fragment.cloneNode(true)
console.log(clonedFragment.querySelector('li').textContent)  // "新项目"

创建 → 填充节点 → 插入文档 → 自动清空
  ↓        ↓          ↓          ↓
内存中   离屏操作   一次性提交   片段为空

// 创建片段并添加节点
const fragment = document.createDocumentFragment()
const div = document.createElement('div')
div.textContent = 'Hello'
fragment.appendChild(div)

console.log(fragment.childNodes.length)  // 1
console.log(div.parentNode)              // DocumentFragment

// 插入到文档
const container = document.querySelector('#container')
container.appendChild(fragment)

console.log(fragment.childNodes.length)  // 0 (片段已空)
console.log(div.parentNode)              // container (节点已迁移)

// ❌ 低效方式：每次插入都触发重排
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div')
  container.appendChild(div)  // 触发 1000 次重排
}

// ✅ 高效方式：只触发 1 次重排
const fragment = document.createDocumentFragment()
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div')
  fragment.appendChild(div)  // 不触发重排
}
container.appendChild(fragment)  // 只触发 1 次重排

// 基础版本：批量渲染列表
function renderList(items) {
  const fragment = document.createDocumentFragment()

  items.forEach((item, index) => {
    const li = document.createElement("li")
    li.textContent = item
    li.dataset.index = index
    li.className = 'list-item'
    fragment.appendChild(li)
  })

  document.querySelector("#list").appendChild(fragment)
}

// 配合事件委托，避免为每个 li 单独绑定
document.querySelector("#list").addEventListener('click', (e) => {
  const li = e.target.closest('.list-item')
  if (li) {
    console.log('点击项目:', li.dataset.index, li.textContent)
  }
})

// 节点排序
function sortList(list) {
  const fragment = document.createDocumentFragment()

  // 1. 将所有节点移到 fragment（离线操作，不触发重排）
  while (list.firstChild) {
    fragment.appendChild(list.firstChild)
  }

  // 2. 在 fragment 中对子节点排序
  const sorted = Array.from(fragment.children).sort((a, b) =>
    a.textContent.localeCompare(b.textContent)
  )

  // 3. 将排序结果重新放回 fragment
  fragment.replaceChildren(...sorted)

  // 4. 一次性插入文档
  list.appendChild(fragment)
}

// HTML 模板定义
/*
<template id="user-card-template">
  <div class="user-card">
    <img class="avatar" src="" alt="">
    <div class="info">
      <h3 class="name"></h3>
      <p class="email"></p>
      <span class="role"></span>
    </div>
  </div>
</template>
*/

// 基于模板克隆渲染单个用户卡片
function renderUserCard(user) {
  const template = document.querySelector('#user-card-template')
  const fragment = template.content.cloneNode(true)
  fragment.querySelector('.avatar').src = user.avatar
  fragment.querySelector('.name').textContent = user.name
  fragment.querySelector('.email').textContent = user.email
  fragment.querySelector('.role').textContent = user.role
  return fragment
}

// 批量渲染用户列表
function renderUsers(users) {
  const fragment = document.createDocumentFragment()
  users.forEach(user => {
    fragment.appendChild(renderUserCard(user))
  })
  document.querySelector('#user-container').appendChild(fragment)
}

// 分批渲染
async function renderInBatches(items, batchSize = 100) {
  const container = document.querySelector('#container')

  for (let i = 0; i < items.length; i += batchSize) {
    const fragment = document.createDocumentFragment()
    const batch = items.slice(i, i + batchSize)

    batch.forEach(item => {
      const div = document.createElement('div')
      div.textContent = item.title
      fragment.appendChild(div)
    })

    // 每批一次性插入，只触发一次回流
    container.appendChild(fragment)

    // 让出主线程，避免长时间阻塞（用微任务排队）
    await new Promise((resolve) => setTimeout(resolve, 0))
  }
}

// 移动节点到新位置
function restructureDOM() {
  const fragment = document.createDocumentFragment()

  // 提取所有需要移动的节点（离线操作）
  const section1 = document.querySelector('#section1')
  const section2 = document.querySelector('#section2')
  fragment.appendChild(section1)
  fragment.appendChild(section2)

  // 在 fragment 中调整顺序
  fragment.appendChild(fragment.querySelector('.first'))

  // 一次性插入到目标容器
  document.querySelector('#main').appendChild(fragment)
}

function setupDragAndDrop(list) {
  let draggedItem = null

  list.addEventListener('dragstart', (e) => {
    draggedItem = e.target
  })

  list.addEventListener('dragover', (e) => {
    e.preventDefault()
  })

  list.addEventListener('drop', (e) => {
    e.preventDefault()
    if (!draggedItem) return

    // 找到拖放目标位置的兄弟节点
    const afterElement = getDragAfterElement(list, e.clientY)
    const fragment = document.createDocumentFragment()

    // 离线重排：先把所有项移入 fragment
    const items = Array.from(list.children)
    items.forEach(item => fragment.appendChild(item))

    if (afterElement == null) {
      fragment.appendChild(draggedItem)
    } else {
      fragment.insertBefore(draggedItem, afterElement)
    }

    // 一次性插回，减少回流
    list.appendChild(fragment)
  })
}

// 辅助：根据鼠标位置返回应该插入到的目标节点
function getDragAfterElement(container, y) {
  const draggable = [...container.querySelectorAll('.drag-item:not(.dragging)')]
  return draggable.reduce((closest, child) => {
    const box = child.getBoundingClientRect()
    const offset = y - box.top - box.height / 2
    if (offset < 0 && offset > closest.offset) {
      return { offset, element: child }
    }
    return closest
  }, { offset: Number.NEGATIVE_INFINITY }).element
}

const total = 10000

// 测试 1：使用 DocumentFragment
console.time("DocumentFragment")
{
  const fragment = document.createDocumentFragment()
  for (let i = 0; i < total; i++) {
    const div = document.createElement("div")
    div.textContent = `item-${i}`
    fragment.appendChild(div)
  }
  container.appendChild(fragment)
}
console.timeEnd("DocumentFragment")  // ~15ms

// 测试 2：使用 innerHTML 字符串拼接
console.time("innerHTML")
{
  let html = ""
  for (let i = 0; i < total; i++) {
    html += `<div>item-${i}</div>`
  }
  container.innerHTML = html
}
console.timeEnd("innerHTML")  // ~30ms

// 对于超大数据集，分批处理避免阻塞
async function renderLargeDataset(items) {
  const batchSize = 100
  const container = document.querySelector('#container')

  for (let i = 0; i < items.length; i += batchSize) {
    const fragment = document.createDocumentFragment()
    const batch = items.slice(i, i + batchSize)

    batch.forEach(item => {
      const div = document.createElement('div')
      div.textContent = item
      fragment.appendChild(div)
    })

    container.appendChild(fragment)

    // 让出主线程，保持响应
    if (i + batchSize < items.length) {
      await new Promise(resolve => requestAnimationFrame(resolve))
    }
  }
}

// 只渲染可见区域的节点
class VirtualList {
  constructor(container, options = {}) {
    this.container = container
    this.itemHeight = options.itemHeight || 50
    this.items = []
    this.visibleStart = 0
    this.visibleEnd = 0

    this.init()
  }

  init() {
    // 设置容器高度
    this.container.style.position = 'relative'
    this.container.addEventListener('scroll', () => this.onScroll())
    this.render()
  }

  setItems(items) {
    this.items = items
    this.container.style.height = this.items.length * this.itemHeight + 'px'
    this.render()
  }

  onScroll() {
    const scrollTop = this.container.scrollTop
    this.visibleStart = Math.floor(scrollTop / this.itemHeight)
    this.render()
  }

  render() {
    const viewportHeight = this.container.clientHeight
    this.visibleEnd = Math.min(
      this.visibleStart + Math.ceil(viewportHeight / this.itemHeight),
      this.items.length
    )

    // 构建可见区域的 fragment，一次性插入
    const fragment = document.createDocumentFragment()
    for (let i = this.visibleStart; i < this.visibleEnd; i++) {
      const div = document.createElement('div')
      div.textContent = this.items[i]
      div.style.height = this.itemHeight + 'px'
      div.style.position = 'absolute'
      div.style.top = i * this.itemHeight + 'px'
      div.style.width = '100%'
      fragment.appendChild(div)
    }

    // 替换可见区域
    this.container.innerHTML = ''
    this.container.appendChild(fragment)
  }
}

// 使用 Intersection Observer 实现懒加载
function setupLazyLoad(container, fetchCallback) {
  const sentinel = document.createElement('div')
  sentinel.className = 'sentinel'
  container.appendChild(sentinel)

  let isLoading = false

  // 加载并插入一批数据
  async function loadMore() {
    if (isLoading) return
    isLoading = true

    const items = await fetchCallback()
    const fragment = document.createDocumentFragment()
    items.forEach(item => {
      const div = document.createElement('div')
      div.textContent = item
      fragment.appendChild(div)
    })

    // 在 sentinel 之前批量插入，只触发一次回流
    container.insertBefore(fragment, sentinel)
    isLoading = false
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadMore()
      }
    })
  })

  observer.observe(sentinel)
}

// ❌ 低效：每次都查询
function renderInefficient(data) {
  const fragment = document.createDocumentFragment()

  data.forEach(item => {
    const template = document.querySelector('#item-template')  // 重复查询
    const clone = template.content.cloneNode(true)
    clone.querySelector('.title').textContent = item.title
    fragment.appendChild(clone)
  })

  container.appendChild(fragment)
}

// ✅ 高效：提前缓存模板
function renderEfficient(data) {
  const template = document.querySelector('#item-template')  // 只查询一次
  const fragment = document.createDocumentFragment()

  data.forEach(item => {
    const clone = template.content.cloneNode(true)
    clone.querySelector('.title').textContent = item.title
    fragment.appendChild(clone)
  })

  container.appendChild(fragment)
}

// 性能监控工具
class PerformanceMonitor {
  constructor() {
    this.metrics = {}
  }

  start(name) {
    this.metrics[name] = performance.now()
  }

  end(name) {
    if (this.metrics[name]) {
      const duration = performance.now() - this.metrics[name]
      delete this.metrics[name]
      return duration
    }
    return null
  }
}

const monitor = new PerformanceMonitor()

monitor.start('render')
renderLargeDataset(items)
const duration = monitor.end('render')
console.log(`渲染耗时: ${duration}ms`)

const fragment = document.createDocumentFragment()
const div = document.createElement('div')
div.textContent = 'Hello'
fragment.appendChild(div)

console.log(fragment.childNodes.length)  // 1

container.appendChild(fragment)

console.log(fragment.childNodes.length)  // 0 ⚠️ 片段已空

// 方案一：重新填充
for (let i = 0; i < 3; i++) {
  const fragment = document.createDocumentFragment()
  fragment.appendChild(createElement())
  container.appendChild(fragment)
}

// 方案二：克隆后插入
const fragment = document.createDocumentFragment()
// ... 填充节点

const clone = fragment.cloneNode(true)
container1.appendChild(fragment)
container2.appendChild(clone)

const fragment = document.createDocumentFragment()
fragment.appendChild(document.createElement('div'))
fragment.appendChild(document.createElement('span'))

console.log(fragment.children.length)  // 2

fragment.textContent = '文本内容'

console.log(fragment.children.length)  // 0 ⚠️ 子节点被清空
console.log(fragment.childNodes.length)  // 1 (只有文本节点)

const fragment = document.createDocumentFragment()
// ... 填充节点

const backup = fragment.cloneNode(true)  // 保护原始结构
fragment.textContent = '文本内容'

const fragment = document.createDocumentFragment()
const div = document.createElement('div')
div.style.width = '100px'
div.style.height = '50px'
fragment.appendChild(div)

console.log(div.offsetWidth)   // 0 ⚠️ 离屏节点无尺寸
console.log(div.clientHeight)  // 0 ⚠️ 无法测量

// 方案一：临时插入测量
const fragment = document.createDocumentFragment()
const div = document.createElement('div')
div.style.width = '100px'
div.style.height = '50px'
div.style.position = 'absolute'
div.style.visibility = 'hidden'
fragment.appendChild(div)

document.body.appendChild(fragment)
console.log(div.offsetWidth)   // 100 ✓
console.log(div.clientHeight)  // 50 ✓
document.body.removeChild(div)

// 方案二：使用虚拟渲染策略
function measureVirtualNode(html) {
  const container = document.createElement('div')
  container.style.position = 'absolute'
  container.style.visibility = 'hidden'
  container.innerHTML = html
  document.body.appendChild(container)

  const rect = container.getBoundingClientRect()
  document.body.removeChild(container)

  return rect
}

const fragment = document.createDocumentFragment()

// ❌ 错误：片段无法接收事件
fragment.addEventListener('click', () => {
  console.log('不会触发')
})

// ✅ 正确：在最终容器上使用事件委托
const container = document.querySelector('#container')
container.addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    console.log('项目被点击:', e.target)
  }
})

container.appendChild(fragment)

const fragment = document.createDocumentFragment()
const div = document.createElement('div')
div.id = 'myDiv'
fragment.appendChild(div)

// 可以使用，但不推荐
const found = fragment.getElementById('myDiv')  // ⚠️ 不推荐

// 推荐使用 querySelector
const better = fragment.querySelector('#myDiv')  // ✓ 推荐

// IE 不支持的方法
// - append()
// - prepend()
// - querySelector() (IE9+ 支持)
// - querySelectorAll() (IE9+ 支持)

// 兼容性解决方案
if (!DocumentFragment.prototype.append) {
  DocumentFragment.prototype.append = function(...nodes) {
    nodes.forEach(node => {
      this.appendChild(
        typeof node === 'string' ? document.createTextNode(node) : node
      )
    })
  }
}

// 为 IE 和旧浏览器提供 polyfill
if (!DocumentFragment.prototype.append) {
  DocumentFragment.prototype.append = function(...nodes) {
    nodes.forEach(node => {
      this.appendChild(
        typeof node === 'string' ? document.createTextNode(node) : node
      )
    })
  }
}

if (!DocumentFragment.prototype.prepend) {
  DocumentFragment.prototype.prepend = function(...nodes) {
    const firstChild = this.firstChild
    nodes.reverse().forEach(node => {
      const child = typeof node === 'string' ? document.createTextNode(node) : node
      this.insertBefore(child, firstChild)
    })
  }
}

// template 元素 polyfill（简化版）
if (!('content' in document.createElement('template'))) {
  Object.defineProperty(HTMLTemplateElement.prototype, 'content', {
    get() {
      const fragment = document.createDocumentFragment()
      while (this.firstChild) {
        fragment.appendChild(this.firstChild)
      }
      return fragment
    }
  })
}

// DocumentFragment：安全、灵活
const fragment = document.createDocumentFragment()
const button = document.createElement('button')
button.textContent = '点击'
button.addEventListener('click', () => alert('点击'))
fragment.appendChild(button)

// innerHTML：简单、但有风险
const html = '<button onclick="alert(1)">点击</button>'
container.innerHTML = html  // ⚠️ 有 XSS 风险

// 场景一：批量插入大量节点
function renderList(items) {
  const fragment = document.createDocumentFragment()
  items.forEach(item => {
    fragment.appendChild(createItem(item))
  })
  container.appendChild(fragment)
}

// 场景二：需要保留事件监听器
const fragment = document.createDocumentFragment()
const button = document.createElement('button')
button.addEventListener('click', handler)
fragment.appendChild(button)

// 场景三：DOM 结构重组
const fragment = document.createDocumentFragment()
while (container.firstChild) {
  fragment.appendChild(container.firstChild)
}
// ... 处理节点
newContainer.appendChild(fragment)

// 不推荐使用的场景：
// 1. 只插入单个节点（性能提升不明显）
// 2. 简单的 HTML 字符串（innerHTML 更快）
// 3. 频繁的小批量更新

// ❌ 错误：片段无法接收事件
const fragment = document.createDocumentFragment()
fragment.addEventListener('click', handler)  // 无效

// ✅ 正确：在子节点或最终容器上监听
const fragment = document.createDocumentFragment()

// 方式一：在子节点上监听
const div = document.createElement('div')
div.addEventListener('click', handler)
fragment.appendChild(div)

// 方式二：在容器上使用事件委托
container.addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handler(e)
  }
})

// 使用 template 和 slot
class UserCard extends HTMLElement {
  constructor() {
    super()

    // 创建 Shadow DOM
    const shadow = this.attachShadow({ mode: 'open' })

    // 从模板创建片段
    const template = document.querySelector('#user-card-template')
    const fragment = template.content.cloneNode(true)

    // 填充数据
    fragment.querySelector('.name').textContent = this.getAttribute('name')
    fragment.querySelector('.email').textContent = this.getAttribute('email')

    shadow.appendChild(fragment)
  }
}

customElements.define('user-card', UserCard)

// 框架内部会使用 DocumentFragment
// React 示例（简化版）
function renderReactElement(element) {
  const fragment = document.createDocumentFragment()
  // ... 创建 DOM 节点
  fragment.appendChild(domNode)
  return fragment
}

// Vue 示例
function createFragment(vnodes) {
  const fragment = document.createDocumentFragment()
  vnodes.forEach(vnode => {
    fragment.appendChild(createElement(vnode))
  })
  return fragment
}

// 安装 jsdom
// npm install jsdom

const { JSDOM } = require('jsdom')
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>')
const { document } = dom.window

// 现在可以使用 DocumentFragment
const fragment = document.createDocumentFragment()
const div = document.createElement('div')
div.textContent = 'Hello Node.js'
fragment.appendChild(div)

console.log(fragment.childNodes.length)  // 1
console.log(fragment.textContent)        // "Hello Node.js"

// 内存占用测试
const fragment = document.createDocumentFragment()
console.log(sizeof(fragment))  // 约 32 bytes（基础开销）

// 添加 10000 个节点
for (let i = 0; i < 10000; i++) {
  fragment.appendChild(document.createElement('div'))
}
console.log(sizeof(fragment))  // 约 800KB

// 插入后片段变空，释放引用
container.appendChild(fragment)
console.log(sizeof(fragment))  // 约 32 bytes（回到基础开销）

<!-- HTML 结构省略，仅展示关键 JS 逻辑 -->

需要批量操作 DOM
    │
    ├─ 是否需要保留事件监听器？
    │   ├─ 是 → 使用 DocumentFragment
    │   └─ 否 → 继续判断
    │
    ├─ 是否有现成的 HTML 字符串？
    │   ├─ 是 → 使用 innerHTML（注意 XSS）
    │   └─ 否 → 使用 DocumentFragment
    │
    ├─ 数据量是否超过 1000？
    │   ├─ 是 → 分批渲染 + 虚拟滚动
    │   └─ 否 → 一次性 DocumentFragment
    │
    └─ 是否需要测量布局？
        ├─ 是 → 临时插入 → 测量 → 移除
        └─ 否 → 直接使用