面试题：JavaScript操作DOM的专家级难度问题

策略 - DocumentFragment（文档片段）：
- 原理：DocumentFragment 是一个轻量级的 DOM 容器，它存在于内存中，并不在 DOM 树里。对 DocumentFragment 进行 DOM 操作时，不会引起页面的重排和重绘。当对 DocumentFragment 的操作完成后，将其插入到 DOM 树中，这时只会引发一次重排和重绘。
- 代码示例：

// 创建一个 DocumentFragment
const fragment = document.createDocumentFragment();
// 创建多个 DOM 元素
const li1 = document.createElement('li');
li1.textContent = 'Item 1';
const li2 = document.createElement('li');
li2.textContent = 'Item 2';
// 将元素添加到 DocumentFragment
fragment.appendChild(li1);
fragment.appendChild(li2);
// 将 DocumentFragment 添加到 DOM 树
const ul = document.querySelector('ul');
ul.appendChild(fragment);

实际案例 - 复杂前端页面场景应用：
- 场景：假设我们有一个电商产品列表页面，需要根据用户的筛选操作实时更新产品列表。列表中每个产品项都包含图片、名称、价格等多种信息，是一个比较复杂的 DOM 结构。
- 实现步骤：
  - 筛选逻辑：当用户进行筛选操作（例如筛选不同价格区间的产品），JavaScript 获取筛选条件，根据条件从数据层获取符合条件的产品数据。
  - 使用 DocumentFragment 更新 DOM：

// 获取产品列表容器
const productList = document.getElementById('product - list');
// 创建 DocumentFragment
const fragment = document.createDocumentFragment();
// 假设 filteredProducts 是筛选后的数据
const filteredProducts = getFilteredProducts();
filteredProducts.forEach(product => {
    // 创建产品项 DOM 结构
    const productItem = document.createElement('div');
    productItem.classList.add('product - item');
    const img = document.createElement('img');
    img.src = product.imageUrl;
    const name = document.createElement('h3');
    name.textContent = product.name;
    const price = document.createElement('p');
    price.textContent = `Price: $${product.price}`;
    // 将子元素添加到产品项
    productItem.appendChild(img);
    productItem.appendChild(name);
    productItem.appendChild(price);
    // 将产品项添加到 DocumentFragment
    fragment.appendChild(productItem);
});
// 清空原产品列表
productList.innerHTML = '';
// 将 DocumentFragment 添加到产品列表
productList.appendChild(fragment);

通过这种方式，在复杂的前端页面场景中，我们只在最后将 DocumentFragment 插入 DOM 树，避免了在更新每个产品项时频繁的重排和重绘，从而提高了性能。

星途面试题库

面试题：JavaScript操作DOM的专家级难度问题

知识考点

面试题答案