DOM 性能优化

DOM 几何属性变化 → 重新计算布局 → 更新渲染树 → 重绘

DOM 样式变化（非几何）→ 跳过回流 → 直接重绘

回流 ──→ 必然触发重绘（因为位置变了需要重画）
重绘 ──→ 不一定触发回流（可能只改了颜色等）

┌─────────────┐   ┌─────────────┐   ┌─────────────┐
│     DOM     │   │    CSSOM    │   │  Render     │
│   解析 HTML  │ + │   解析 CSS  │ = │    Tree     │
└─────────────┘   └─────────────┘   └─────────────┘
                                            │
                                            ▼
┌─────────────┐   ┌─────────────┐   ┌─────────────┐
│   Display   │   │   Composite │   │    Layout   │
│    显示     │ ← │    合成     │ ← │   布局      │
└─────────────┘   └─────────────┘   └─────────────┘

┌─────────────────────────────────────┐
│           GPU 合成层                 │
│  ┌──────────┐  ┌──────────┐         │
│  │  Layer 1 │  │  Layer 2 │  ...    │
│  │ transform│  │  opacity │         │
│  └──────────┘  └──────────┘         │
└─────────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────┐
│           CPU 渲染层                 │
│  普通元素（会触发回流/重绘）          │
└─────────────────────────────────────┘

// 布局属性变化
element.style.width = '100px';
element.style.height = '100px';
element.style.margin = '10px';
element.style.padding = '10px';
element.style.display = 'none';

// DOM 结构变化
parent.appendChild(child);
parent.removeChild(child);

// 读取布局属性（强制同步布局）
const width = element.offsetWidth;
const height = element.offsetHeight;
const rect = element.getBoundingClientRect();
const style = getComputedStyle(element);

// 外观属性变化（不改变布局）
element.style.color = 'red';
element.style.backgroundColor = 'blue';
element.style.visibility = 'hidden';
element.style.textDecoration = 'underline';
element.style.boxShadow = '0 0 10px black';

// 推荐使用 transform 和 opacity 做动画
element.style.transform = 'translateX(100px)';
element.style.transform = 'scale(1.5)';
element.style.opacity = '0.5';

const el = document.getElementById("container")
el.style.width = "100px"    // 加入 flush 队列
el.style.height = "200px"   // 加入 flush 队列
el.style.border = "10px solid red"  // 加入 flush 队列
el.style.color = "red"      // 加入 flush 队列
// 浏览器在适当时机统一处理队列 → 实际只有 1 次回流 + 1 次重绘

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle()
getBoundingClientRect()

// ❌ 逐条修改样式（多次触发回流/重绘）
element.style.width = '100px';
element.style.height = '100px';
element.style.margin = '10px';
element.style.padding = '10px';

// ✅ 使用 class 一次性修改
element.classList.add('active');

// ✅ 使用 cssText
element.style.cssText = 'width: 100px; height: 100px; margin: 10px; padding: 10px;';

// ❌ 每次添加都触发回流
const list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = i;
  list.appendChild(item); // 100 次回流
}

// ✅ 使用 DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = i;
  fragment.appendChild(item); // 向 Fragment 添加，不触发回流
}
list.appendChild(fragment); // 仅触发一次回流

// ✅ 方案1：隐藏元素后修改
element.style.display = 'none';
// 进行大量 DOM 操作（不会触发回流/重绘）
element.style.width = '100px';
element.style.height = '200px';
element.style.border = '10px solid red';
element.style.color = 'red';
element.style.display = 'block'; // 仅触发 2 次回流（隐藏时1次+显示时1次）

// ✅ 方案2：克隆节点
const clone = element.cloneNode(true);
// 在克隆上操作
clone.appendChild(newChild);
clone.style.width = '200px';
// 替换原节点
element.parentNode.replaceChild(clone, element);

// ❌ 读写混合，强制同步布局
element.style.width = '100px';       // 写入
const width = element.offsetWidth;   // 读取（强制回流）
element.style.height = width + 'px'; // 写入

// ❌ 循环内读取敏感属性（每次循环都强制回流）
const el = document.getElementById("box")
for (let i = 0; i < 10; i++) {
  el.style.top = el.offsetTop + 10 + "px"   // 读取 offsetTop 触发回流
  el.style.left = el.offsetLeft + 10 + "px" // 读取 offsetLeft 触发回流
}

// ✅ 读写分离：先统一读取，再统一写入
const el = document.getElementById("box")
let top = el.offsetTop   // 一次性读取
let left = el.offsetLeft // 一次性读取

for (let i = 0; i < 10; i++) {
  top += 10
  left += 10
}

el.style.top = top + "px"    // 只写入一次
el.style.left = left + "px"  // 只写入一次

// ❌ 同步布局
function updateElements(elements) {
  elements.forEach(element => {
    const width = element.offsetWidth;
    element.style.height = width * 0.5 + 'px';
  });
}

// ✅ 使用 requestAnimationFrame 批量处理
function updateElements(elements) {
  // 批量读取
  const widths = elements.map(el => el.offsetWidth);

  // 在下一帧批量写入
  requestAnimationFrame(() => {
    elements.forEach((element, index) => {
      element.style.height = widths[index] * 0.5 + 'px';
    });
  });
}

/* ❌ 改变 left/top 会触发每一帧的回流 */
.moving-box {
  position: absolute;
  left: 0;
  transition: left 0.3s linear;
}

/* ✅ 使用 transform 只触发合成（GPU 加速），不触发回流 */
.moving-box {
  transform: translateX(0);
  transition: transform 0.3s linear;
}

┌─────────────┐     桥接接口      ┌─────────────┐
│   JS 引擎    │ ←────────────→ │   渲染引擎   │
│  (V8 等)    │   (过路费开销)  │ (Blink 等)  │
└─────────────┘                 └─────────────┘

// ❌ 循环中反复修改 DOM（10000 次回流/重绘）
const container = document.getElementById("container")
for (let i = 0; i < 10000; i++) {
  container.innerHTML += `<span>内容 ${i}</span>`
}

// ✅ 在 JS 中拼接完成，一次性写入 DOM
const container = document.getElementById("container")
let content = ""
for (let i = 0; i < 10000; i++) {
  content += `<span>内容 ${i}</span>`
}
container.innerHTML = content // 只触发一次 DOM 更新

// innerHTML：适合大量静态内容
// 优点：代码简洁，一次性插入
// 缺点：安全问题（XSS），事件绑定丢失
container.innerHTML = `
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
`;

// createElement：适合动态内容、需要事件绑定
// 优点：安全，可绑定事件
// 缺点：代码较多
const item = document.createElement('div');
item.className = 'item';
item.textContent = 'Item 1';
item.addEventListener('click', handleClick);
container.appendChild(item);

// 推荐：大量节点用 innerHTML 拼接；少量节点用 createElement 更结构化

状态变化 → 生成新虚拟 DOM 树 → Diff 对比 → 最小补丁集 → 批量更新真实 DOM

// ❌ 为每个元素绑定事件（内存占用大）
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

// ✅ 使用事件委托（只需一个事件监听器）
document.getElementById('list').addEventListener('click', (e) => {
  // 事件冒泡处理
  if (e.target.classList.contains('item')) {
    handleClick(e);
  }
});

// ✅ 更精确的委托（使用 closest）
document.getElementById('list').addEventListener('click', (e) => {
  const item = e.target.closest('.item');
  if (item) {
    const id = item.dataset.id;
    handleClick({ ...e, target: item, id });
  }
});

// ✅ 提高滚动性能
document.addEventListener('touchstart', handler, { passive: true });
document.addEventListener('touchmove', handler, { passive: true });
document.addEventListener('wheel', handler, { passive: true });

// passive: true 告诉浏览器不会调用 preventDefault()
// 允许浏览器在事件处理函数执行前就开始滚动

// ❌ 直接绑定高频事件
window.addEventListener('scroll', handleScroll);

// ✅ 使用节流
import { throttle } from './utils';
window.addEventListener('scroll', throttle(handleScroll, 100));

// ✅ 使用 requestAnimationFrame
let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      handleScroll();
      ticking = false;
    });
    ticking = true;
  }
});

// ❌ 每次循环都查询 DOM（10000 次"过路费"）
for (let i = 0; i < 10000; i++) {
  document.getElementById("container").innerHTML += "<span>内容</span>"
}

// ✅ 缓存 DOM 引用（只查一次）
const container = document.getElementById("container")
for (let i = 0; i < 10000; i++) {
  container.innerHTML += "<span>内容</span>"
}

// ❌ 低效选择器
document.querySelectorAll('div.container ul li a.link') // 层级太深
document.querySelector('[data-type="item"]')            // 属性选择器较慢

// ✅ 高效选择器
document.getElementById('itemId')   // 最快：O(1) 查找
document.getElementsByClassName('item') // 较快：基于类名索引
document.querySelector('#container .item') // 合理使用 ID 缩小范围

┌─────────────────────────────────────┐
│          可视区域                    │
│  ┌─────────────────────────────┐   │
│  │  Item 1                     │   │
│  │  Item 2                     │   │
│  │  Item 3                     │   │
│  │  Item 4                     │   │
│  └─────────────────────────────┘   │
│                                     │
│  上缓冲区                           │
│  下缓冲区                           │
└─────────────────────────────────────┘

实际渲染：10000 条数据 → 只渲染 ~20 条可见项

class VirtualList {
  constructor(container, options) {
    this.container = container;
    this.itemHeight = options.itemHeight;
    this.renderItem = options.renderItem;
    this.data = options.data;
    this.bufferSize = options.bufferSize || 5;

    this.visibleStart = 0;
    this.visibleEnd = 0;
    this.scrollTop = 0;

    this.init();
  }

  init() {
    // 计算可视区域可容纳的条目数
    this.viewHeight = this.container.clientHeight;
    this.visibleCount = Math.ceil(this.viewHeight / this.itemHeight);
    this.visibleEnd = this.visibleCount + this.bufferSize;

    // 占位元素撑起滚动高度
    this.phantom = document.createElement('div');
    this.phantom.style.height = `${this.data.length * this.itemHeight}px`;
    this.container.appendChild(this.phantom);

    // 内容层绝对定位，随滚动移动
    this.content = document.createElement('div');
    this.content.style.position = 'absolute';
    this.content.style.top = '0';
    this.content.style.width = '100%';
    this.container.appendChild(this.content);

    this.container.addEventListener('scroll', () => this.onScroll());
    this.render();
  }

  onScroll() {
    this.scrollTop = this.container.scrollTop;
    this.visibleStart = Math.floor(this.scrollTop / this.itemHeight) - this.bufferSize;
    this.visibleStart = Math.max(0, this.visibleStart);
    this.visibleEnd = this.visibleStart + this.visibleCount + this.bufferSize * 2;
    this.render();
  }

  render() {
    // 只渲染可视区域的条目
    const fragment = document.createDocumentFragment();
    for (let i = this.visibleStart; i < this.visibleEnd && i < this.data.length; i++) {
      fragment.appendChild(this.renderItem(this.data[i], i));
    }
    this.content.innerHTML = '';
    this.content.appendChild(fragment);
    this.content.style.transform = `translateY(${this.visibleStart * this.itemHeight}px)`;
  }
}

// 使用示例
const list = new VirtualList(document.getElementById('list'), {
  itemHeight: 40,
  data: new Array(10000).fill(null).map((_, i) => ({ text: `Item ${i}` })),
  renderItem: (item) => {
    const div = document.createElement('div');
    div.className = 'list-item';
    div.textContent = item.text;
    return div;
  }
});

// ✅ 使用 IntersectionObserver（推荐）
const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '50px 0px', // 提前 50px 开始加载
  threshold: 0.01
});

images.forEach(img => imageObserver.observe(img));

// ✅ 原生懒加载（HTML5）
// <img src="image.jpg" loading="lazy" alt="描述">

// React 懒加载
import React, { Suspense, lazy } from 'react';

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

// Vue 懒加载
const LazyComponent = () => import('./HeavyComponent.vue');

export default {
  components: {
    LazyComponent
  }
};

// React Router
const routes = [
  {
    path: '/dashboard',
    component: React.lazy(() => import('./pages/Dashboard'))
  },
  {
    path: '/settings',
    component: React.lazy(() => import('./pages/Settings'))
  }
];

// Vue Router
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
];

/* ❌ 触发回流 */
.box {
  position: absolute;
  animation: move 1s;
}

@keyframes move {
  to {
    left: 100px;
    top: 100px;
  }
}

/* ✅ 仅触发合成 */
.box {
  animation: move 1s;
}

@keyframes move {
  to {
    transform: translate(100px, 100px);
  }
}

/* 提示浏览器即将发生的变化 */
.animated-element {
  will-change: transform, opacity;
}

/* 动画结束后移除 */
.animated-element:not(.animating) {
  will-change: auto;
}

.gpu-accelerated {
  /* 触发 GPU 加速 */
  transform: translateZ(0);
  /* 或者 */
  will-change: transform;
  /* 或者 */
  backface-visibility: hidden;
}

// Chrome DevTools Performance 面板
// 可以看到 Layout、Paint、Composite 的详细信息

// 使用 Performance API 监控
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'layout-shift') {
      console.log('布局偏移:', entry.value);
    }
  }
});

observer.observe({ type: 'layout-shift', buffered: true });

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('长任务:', {
      duration: entry.duration,
      name: entry.name,
      startTime: entry.startTime
    });
  }
});

observer.observe({ type: 'longtask', buffered: true });

// 1. DOM 节点数量
const nodeCount = document.getElementsByTagName('*').length;
console.log('DOM 节点数:', nodeCount);
// 建议: < 1500 个节点

// 2. DOM 深度
function getDepth(element, depth = 0) {
  if (!element.children.length) return depth;
  return Math.max(...Array.from(element.children).map(child => getDepth(child, depth + 1)));
}
console.log('DOM 深度:', getDepth(document.body));
// 建议: < 15 层

// 3. 布局偏移
let clsScore = 0;
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      clsScore += entry.value;
    }
  }
}).observe({ type: 'layout-shift' });
// CLS 应该 < 0.1

// innerHTML：适合大量静态内容
// 优点：代码简洁，一次性插入
// 缺点：安全问题（XSS），事件绑定丢失
container.innerHTML = `
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
`;

// createElement：适合动态内容、需要事件绑定
// 优点：安全，可绑定事件
// 缺点：代码较多
const item = document.createElement('div');
item.className = 'item';
item.textContent = 'Item 1';
item.addEventListener('click', handleClick);
container.appendChild(item);

// 推荐：静态内容用 innerHTML，动态内容用 createElement

// 场景1：批量插入多个元素
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const div = document.createElement('div');
  div.textContent = item.text;
  fragment.appendChild(div);
});
container.appendChild(fragment);

// 场景2：移动多个元素
const fragment = document.createDocumentFragment();
Array.from(oldContainer.children).forEach(child => {
  fragment.appendChild(child);
});
newContainer.appendChild(fragment);

// 注意：DocumentFragment 插入后会自动清空

// 1. 虚拟滚动（适用于固定行高）
// 2. 分页加载
// 3. 冻结列（使用 position: sticky）

// 分页示例
function renderTable(data, page, pageSize) {
  const start = page * pageSize;
  const end = start + pageSize;
  const pageData = data.slice(start, end);

  // 只渲染当前页数据
  const html = pageData.map(row => `<tr>...</tr>`).join('');
  tbody.innerHTML = html;
}