JavaScript DOM 与 BOM 深度指南

const box = document.getElementById('box');

// 设置单个样式属性（使用驼峰命名）
box.style.backgroundColor = '#3498db';
box.style.width = '200px';
box.style.height = '200px';
box.style.borderRadius = '8px';
box.style.transition = 'all 0.3s ease';

// CSS 属性名转换规则
// CSS 中带连字符的属性 → 驼峰命名
// background-color → backgroundColor
// font-size → fontSize
// border-top-left-radius → borderTopLeftRadius
// -webkit-transform → WebkitTransform（首字母大写）

// 设置 CSS 变量（CSS 自定义属性）
box.style.setProperty('--primary-color', '#e74c3c');
box.style.setProperty('--spacing', '16px');

// 获取行内样式值
console.log(box.style.backgroundColor);
console.log(box.style.width);

// 获取 CSS 变量的值（通过 getPropertyValue）
const value = box.style.getPropertyValue('--primary-color');

// 移除行内样式属性
box.style.removeProperty('background-color');
box.style.removeProperty('width');

// 批量设置样式
Object.assign(box.style, {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  padding: '20px',
  margin: '10px 0'
});

// 或者使用 cssText（一次性设置全部样式）
box.style.cssText = 'display: flex; align-items: center; gap: 12px;';
// ⚠️ cssText 会覆盖所有已有的行内样式

                    ┌──────────────────────┐
                    │       window         │
                    │    (捕获阶段开始)      │
                    └────────┬─────────────┘
                             │
                    ┌────────▼─────────────┐
                    │      document        │
                    └────────┬─────────────┘
                             │
                    ┌────────▼─────────────┐
                    │     <html>           │
                    └────────┬─────────────┘
                             │
                    ┌────────▼─────────────┐
                    │      <body>          │
                    └────────┬─────────────┘
                             │ 捕获阶段（capture phase）
                    ┌────────▼─────────────┐
                    │    <div id="outer">  │
                    └────────┬─────────────┘
                             │
                    ┌────────▼─────────────┐
                    │    <div id="inner">  │ ← 目标阶段（target phase）
                    └────────┬─────────────┘
                             │ 冒泡阶段（bubble phase）
                    ┌────────▼─────────────┐
                    │    <div id="outer">  │
                    └────────┬─────────────┘
                             │
                    ┌────────▼─────────────┐
                    │      <body>          │
                    └────────┬─────────────┘
                             │
                    ┌────────▼─────────────┐
                    │     document         │
                    └────────┬─────────────┘
                             │
                    ┌────────▼─────────────┐
                    │       window         │
                    │    (冒泡阶段结束)      │
                    └──────────────────────┘

const btn = document.getElementById('btn');
const handler = () => console.log('clicked');

// 选项对象详解
btn.addEventListener('click', handler, {
  capture: false,    // 是否在捕获阶段触发
  once: true,        // 仅触发一次后自动移除
  passive: true,     // 告诉浏览器不会调用 preventDefault（提升滚动性能）
  signal: abortController.signal  // 通过 AbortController 移除
});

// once 的妙用：一次性初始化
function init() {
  console.log('初始化，仅执行一次');
  document.addEventListener('DOMContentLoaded', init, { once: true });
}

// passive 的典型场景：滚动事件优化
// 不添加 passive 时，浏览器必须等待 JS 执行完才知道有没有 preventDefault
// 加了 passive: true，浏览器可立即滚动，无需等待
document.addEventListener('touchmove', (e) => {
  // 处理触摸移动，但不调用 preventDefault
}, { passive: true });

// 使用 AbortController 移除事件
const controller = new AbortController();
const { signal } = controller;

document.addEventListener('click', handler1, { signal });
document.addEventListener('scroll', handler2, { signal });

// 一次性移除所有关联事件
controller.abort();

element.addEventListener('click', (event) => {
  // 事件对象的基本属性
  console.log(event.type);              // "click"
  console.log(event.target);            // 实际触发事件的元素
  console.log(event.currentTarget);     // 绑定监听器的元素（this 通常指向它）
  console.log(event.eventPhase);        // 1=捕获, 2=目标, 3=冒泡
  console.log(event.bubbles);           // 是否可冒泡
  console.log(event.cancelable);        // 是否可取消默认行为
  console.log(event.defaultPrevented);  // 是否调用了 preventDefault
  console.log(event.timestamp);         // 事件创建的时间戳

  // target vs currentTarget 的区别
  // 假设: <div id="outer"><button id="btn">点击</button></div>
  // outer 上绑定了 click 事件，点击按钮时：
  // event.target        → <button id="btn">
  // event.currentTarget → <div id="outer">（绑定事件的那个元素）

  // 阻止默认行为（如链接跳转、表单提交）
  event.preventDefault();

  // 阻止事件冒泡（停止向上传播）
  event.stopPropagation();

  // 阻止事件传播 + 阻止同元素上的其他监听器
  event.stopImmediatePropagation();
  // 区别：stopPropagation 只阻止传播到父元素，
  // stopImmediatePropagation 还阻止自身元素上后续绑定的监听器
});

// 示例：stopImmediatePropagation 的效果
el.addEventListener('click', () => console.log('第一个'));
el.addEventListener('click', (e) => {
  e.stopImmediatePropagation(); // 阻止后续监听器
  console.log('第二个');
});
el.addEventListener('click', () => console.log('第三个')); // 不会执行

// ❌ 低效方式：每个 li 绑定一个监听器
document.querySelectorAll('.list-item').forEach(item => {
  item.addEventListener('click', () => {
    console.log(item.dataset.id);
  });
});

// ✅ 高效方式：事件委托，只绑一个监听器
document.getElementById('list').addEventListener('click', (e) => {
  // 查找实际点击的列表项
  const item = e.target.closest('.list-item');
  if (!item) return; // 点击的不是列表项，忽略

  console.log('点击了:', item.dataset.id);

  // 根据 data-* 属性分发处理
  const action = item.dataset.action;
  switch (action) {
    case 'edit':
      editItem(item.dataset.id);
      break;
    case 'delete':
      deleteItem(item.dataset.id);
      break;
  }
});

// 事件委托的优势：
// 1. 减少内存占用（一个监听器 vs N 个监听器）
// 2. 对新插入的元素自动生效（动态列表）

// 实战：可编辑表格的事件委托
document.querySelector('table').addEventListener('click', (e) => {
  const cell = e.target.closest('td');
  if (!cell) return;

  if (cell.classList.contains('editable')) {
    // 使单元格可编辑
    const input = document.createElement('input');
    input.value = cell.textContent.trim();
    cell.textContent = '';
    cell.appendChild(input);
    input.focus();

    input.addEventListener('blur', () => {
      cell.textContent = input.value;
    }, { once: true });
  }
});

// 1. 创建自定义事件（可附带数据）
const event = new CustomEvent('user-login', {
  detail: {
    userId: 123,
    username: '张三',
    timestamp: Date.now()
  },
  bubbles: true,      // 是否冒泡
  cancelable: true    // 是否可取消
});

// 2. 监听自定义事件
document.addEventListener('user-login', (e) => {
  console.log('用户登录:', e.detail);
  // { userId: 123, username: '张三', timestamp: ... }
});

// 3. 派发事件
document.dispatchEvent(event);

// 实战：组件通信使用自定义事件
class Toast {
  show(message, type = 'info') {
    const event = new CustomEvent('toast', {
      detail: { message, type, id: Date.now() },
      bubbles: true
    });
    document.dispatchEvent(event);
  }
}

// 在 UI 层监听
document.addEventListener('toast', (e) => {
  const { message, type, id } = e.detail;
  const toastEl = document.createElement('div');
  toastEl.className = `toast toast--${type}`;
  toastEl.textContent = message;
  toastEl.dataset.id = id;
  document.body.appendChild(toastEl);
  setTimeout(() => toastEl.remove(), 3000);
});

// 使用
const toast = new Toast();
toast.show('操作成功！', 'success');
toast.show('网络错误', 'error');

// 拖拽源元素事件
dragElement.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', dragElement.id);
  e.dataTransfer.effectAllowed = 'move';
});

dragElement.addEventListener('drag', () => console.log('拖拽中'));
dragElement.addEventListener('dragend', () => console.log('拖拽结束'));

// 放置目标元素事件
dropZone.addEventListener('dragenter', (e) => {
  e.preventDefault();
  dropZone.classList.add('drag-over');
});

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必须阻止才能允许放置
  e.dataTransfer.dropEffect = 'move';
});

dropZone.addEventListener('dragleave', () => {
  dropZone.classList.remove('drag-over');
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  dropZone.classList.remove('drag-over');
  const id = e.dataTransfer.getData('text/plain');
  const draggedEl = document.getElementById(id);
  dropZone.appendChild(draggedEl);
});

// 窗口尺寸
console.log(window.innerWidth);   // 视口宽度（含滚动条）
console.log(window.innerHeight);  // 视口高度（含滚动条）
console.log(window.outerWidth);   // 浏览器窗口总宽度
console.log(window.outerHeight);  // 浏览器窗口总高度

// 滚动位置
console.log(window.scrollX);      // 水平滚动偏移（scrollX === pageXOffset）
console.log(window.scrollY);      // 垂直滚动偏移（scrollY === pageYOffset）

// 滚动到指定位置（平滑滚动）
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

window.scrollBy({
  top: 200,        // 相对当前位置滚动
  behavior: 'smooth'
});

// 滚动到指定元素
element.scrollIntoView({
  behavior: 'smooth',
  block: 'center', // 'start', 'center', 'end', 'nearest'
  inline: 'nearest'
});

// 窗口操作
window.open('https://example.com', '_blank', 'width=800,height=600');
window.close(); // 仅能关闭通过 window.open 打开的窗口

// 定时器
const timeoutId = setTimeout(() => console.log('延迟执行'), 1000);
const intervalId = setInterval(() => console.log('定时执行'), 2000);

clearTimeout(timeoutId);
clearInterval(intervalId);

// requestAnimationFrame（在下次重绘前执行，约 60fps）
let animationId;
function animate() {
  element.style.transform = `translateX(${pos}px)`;
  pos += 2;
  if (pos < 500) {
    animationId = requestAnimationFrame(animate);
  }
}
animationId = requestAnimationFrame(animate);
cancelAnimationFrame(animationId);

// 浏览器信息
console.log(navigator.userAgent);
// "Mozilla/5.0 (Linux; ...) AppleWebKit/537.36 ..."
console.log(navigator.platform);   // "Linux x86_64", "Win32", "MacIntel"
console.log(navigator.language);   // "zh-CN"（浏览器语言）
console.log(navigator.languages);  // ["zh-CN", "en"]（用户偏好语言列表）

// 在线状态
console.log(navigator.onLine);     // true / false
window.addEventListener('online', () => console.log('网络已连接'));
window.addEventListener('offline', () => console.log('网络已断开'));

// 硬件信息
console.log(navigator.hardwareConcurrency); // CPU 逻辑核心数
console.log(navigator.deviceMemory);        // 设备内存（GB，约估值）

// 地理定位
navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log('纬度:', position.coords.latitude);
    console.log('经度:', position.coords.longitude);
    console.log('精度:', position.coords.accuracy);
  },
  (error) => {
    console.error('定位失败:', error.message);
  },
  { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);

// 持续监听位置
const watchId = navigator.geolocation.watchPosition(successCallback);
navigator.geolocation.clearWatch(watchId);

// 媒体设备（摄像头、麦克风）
async function getCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false
    });
    const video = document.querySelector('video');
    video.srcObject = stream;
  } catch (err) {
    console.error('访问摄像头失败:', err);
  }
}

// 枚举可用设备
async function listDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  devices.forEach(device => {
    console.log(`${device.kind}: ${device.label} (${device.deviceId})`);
  });
}

// 剪贴板 API（需要 HTTPS 或 localhost）
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

async function readFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('剪贴板内容:', text);
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
}

// URL 分解
// 假设当前 URL: https://example.com:8080/path/to/page?q=js&page=1#section

console.log(location.href);       // "https://example.com:8080/path/to/page?q=js&page=1#section"
console.log(location.protocol);   // "https:"
console.log(location.host);       // "example.com:8080"
console.log(location.hostname);   // "example.com"
console.log(location.port);       // "8080"
console.log(location.pathname);   // "/path/to/page"
console.log(location.search);     // "?q=js&page=1"
console.log(location.hash);       // "#section"
console.log(location.origin);     // "https://example.com:8080"

// URL 参数解析
function getQueryParams() {
  const params = new URLSearchParams(location.search);
  return Object.fromEntries(params.entries());
}
// { q: "js", page: "1" }

// 导航操作
location.reload();             // 重新加载当前页面
location.reload(true);         // 强制从服务器重新加载（跳过缓存）
location.replace('https://example.com');  // 替换当前历史记录，不可后退
location.assign('https://example.com');   // 加载新页面，可后退
location.href = 'https://example.com';    // 类似 assign

// hash 变更监听
window.addEventListener('hashchange', () => {
  console.log('Hash 变为:', location.hash);
  // 可以用于 SPA 路由
  handleRoute(location.hash);
});

// 使用 URL 构造函数解析 URL
function parseURL(url) {
  const u = new URL(url);
  console.log(u.hostname, u.pathname, u.searchParams.get('q'));
}

// localStorage — 持久化存储（不主动清除则永久保存）
// sessionStorage — 会话级存储（标签页关闭后清除）

// 公共 API（两者相同）
localStorage.setItem('key', 'value');
const val = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();  // 清除所有

// 只能存储字符串，对象需序列化
const user = { id: 1, name: '张三', roles: ['admin'] };
localStorage.setItem('user', JSON.stringify(user));

const saved = JSON.parse(localStorage.getItem('user'));
console.log(saved.name); // "张三"

// 存储数值时自动转字符串
localStorage.setItem('count', 0);
console.log(typeof localStorage.getItem('count')); // "string"

// storage 事件（同源其他标签页修改 storage 时触发）
window.addEventListener('storage', (e) => {
  console.log('键:', e.key);
  console.log('旧值:', e.oldValue);
  console.log('新值:', e.newValue);
  console.log('来源:', e.url);
  console.log('存储区域:', e.storageArea); // localStorage 对象
});

// 容量估算
function getStorageSize() {
  let total = 0;
  for (const key in localStorage) {
    if (localStorage.hasOwnProperty(key)) {
      total += key.length + localStorage.getItem(key).length;
    }
  }
  console.log(`已使用: ${(total / 1024).toFixed(2)} KB`);
}

// 封装带过期时间的存储
const storage = {
  set(key, value, ttl = 0) { // ttl 毫秒
    const data = { value, expiry: ttl ? Date.now() + ttl : 0 };
    localStorage.setItem(key, JSON.stringify(data));
  },
  get(key) {
    const raw = localStorage.getItem(key);
    if (!raw) return null;
    const data = JSON.parse(raw);
    if (data.expiry && Date.now() > data.expiry) {
      localStorage.removeItem(key);
      return null;
    }
    return data.value;
  }
};

// HTML: <img class="lazy" data-src="https://example.com/image.jpg" alt="描述">

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      // 将 data-src 设置到 src 触发加载
      img.src = img.dataset.src;

      // 加载完成后移除 data-src 和懒加载类
      img.addEventListener('load', () => {
        img.classList.remove('lazy');
        img.removeAttribute('data-src');
      });

      // 加载完成后停止观察
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '200px 0px', // 提前 200px 预加载
  threshold: 0.01
});

// 观察所有懒加载图片
document.querySelectorAll('img.lazy').forEach(img => {
  imageObserver.observe(img);
});

// 动态内容：新添加图片后重新观察
function addLazyImages(newImagesContainer) {
  newImagesContainer.querySelectorAll('img.lazy').forEach(img => {
    imageObserver.observe(img);
  });
}

class InfiniteScroll {
  constructor(container, loadMoreCallback, options = {}) {
    this.container = container;
    this.loadMore = loadMoreCallback;
    this.isLoading = false;

    // 创建哨兵元素
    this.sentinel = document.createElement('div');
    this.sentinel.className = 'scroll-sentinel';
    this.sentinel.style.height = '1px';
    this.container.appendChild(this.sentinel);

    // 配置 IntersectionObserver
    this.observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !this.isLoading) {
          this.load();
        }
      },
      {
        rootMargin: options.rootMargin || '100px',
        threshold: 0
      }
    );

    this.observer.observe(this.sentinel);
  }

  async load() {
    this.isLoading = true;
    this.showLoading();

    try {
      const items = await this.loadMore();
      if (items.length === 0) {
        this.noMoreData();
      } else {
        items.forEach(item => this.renderItem(item));
      }
    } catch (err) {
      this.showError(err);
    } finally {
      this.isLoading = false;
      this.hideLoading();
    }
  }

  renderItem(item) {
    const el = document.createElement('div');
    el.className = 'item';
    el.textContent = item.title;
    this.sentinel.before(el);
  }

  showLoading() {
    // 显示加载指示器
  }

  hideLoading() {
    // 隐藏加载指示器
  }

  noMoreData() {
    this.observer.unobserve(this.sentinel);
    // 显示"没有更多数据"
  }

  showError(err) {
    console.error('加载失败:', err);
  }

  destroy() {
    this.observer.disconnect();
    this.sentinel.remove();
  }
}

// 使用
const scroll = new InfiniteScroll(
  document.getElementById('feed'),
  async () => {
    const response = await fetch(`/api/items?page=${scroll.page++}`);
    return response.json();
  }
);

class ExposureTracker {
  constructor(options = {}) {
    this.exposureData = new Map();
    this.observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const el = entry.target;
            const data = this.exposureData.get(el);
            if (data) {
              this.reportExposure(el, data);
              this.exposureData.delete(el);
              this.observer.unobserve(el);
            }
          }
        });
      },
      {
        rootMargin: options.rootMargin || '0px',
        threshold: options.threshold || 0.5
      }
    );
  }

  track(element, data) {
    this.exposureData.set(element, data);
    this.observer.observe(element);
  }

  reportExposure(element, data) {
    // 上报曝光数据
    const payload = {
      elementId: element.id || element.dataset.trackId,
      data,
      timestamp: Date.now(),
      viewportSize: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      scrollPosition: {
        x: window.scrollX,
        y: window.scrollY
      }
    };

    // 发送到分析服务器（使用 sendBeacon 确保页面关闭时也能发送）
    navigator.sendBeacon('/api/exposure', JSON.stringify(payload));

    console.log('曝光上报:', payload);
  }

  destroy() {
    this.observer.disconnect();
    this.exposureData.clear();
  }
}

// 使用
const tracker = new ExposureTracker({ threshold: 0.5 });

document.querySelectorAll('[data-track]').forEach(el => {
  tracker.track(el, {
    type: el.dataset.track,
    id: el.dataset.id
  });
});

// 创建观察器
const observer = new MutationObserver((mutationsList, observer) => {
  mutationsList.forEach(mutation => {
    console.log('变更类型:', mutation.type);

    switch (mutation.type) {
      case 'childList':
        // 子节点增删
        console.log('新增节点:', mutation.addedNodes);
        console.log('移除节点:', mutation.removedNodes);
        break;
      case 'attributes':
        // 属性变化
        console.log('变化的属性:', mutation.attributeName);
        console.log('旧值:', mutation.oldValue);
        console.log('新值:', mutation.target.getAttribute(mutation.attributeName));
        break;
      case 'characterData':
        // 文本内容变化
        console.log('文本变化:', mutation.oldValue, '→', mutation.target.textContent);
        break;
    }
  });
});

// 配置观察选项
const config = {
  childList: true,        // 监听子节点增删
  attributes: true,       // 监听属性变化
  characterData: true,    // 监听文本变化
  subtree: true,          // 监听所有后代节点（不仅是直接子节点）
  attributeOldValue: true, // 记录属性旧值
  characterDataOldValue: true, // 记录文本旧值
  attributeFilter: ['class', 'style'] // 只监听指定的属性
};

// 开始观察
const targetNode = document.getElementById('container');
observer.observe(targetNode, config);

// 停止观察
observer.disconnect();

// 获取所有未处理的变更记录（不触发回调）
const records = observer.takeRecords();

// 1. 检测 DOM 元素是否被插入到页面
function waitForElement(selector, callback) {
  const existing = document.querySelector(selector);
  if (existing) {
    callback(existing);
    return;
  }

  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (node.nodeType === 1 && node.matches(selector)) {
          observer.disconnect();
          callback(node);
          return;
        }
        // 检查子节点
        const child = node.nodeType === 1 && node.querySelector(selector);
        if (child) {
          observer.disconnect();
          callback(child);
          return;
        }
      }
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  // 超时处理
  setTimeout(() => observer.disconnect(), 10000);
}

// 使用
waitForElement('#dynamic-content', (el) => {
  console.log('元素已渲染:', el);
});

// 2. 内容变化后的自动保存
function autoSaveWhenContentChanges(formElement, saveCallback, delay = 1000) {
  let saveTimer;

  const observer = new MutationObserver(() => {
    clearTimeout(saveTimer);
    saveTimer = setTimeout(() => {
      saveCallback(formElement);
    }, delay);
  });

  observer.observe(formElement, {
    childList: true,
    subtree: true,
    characterData: true
  });

  return () => observer.disconnect(); // 返回清理函数
}

const cleanup = autoSaveWhenContentChanges(
  document.getElementById('editor'),
  (form) => {
    console.log('自动保存...');
    localStorage.setItem('draft', form.innerHTML);
  }
);

// 3. 监视频繁动态插入并去重
function trackDynamicImages() {
  const processed = new WeakSet();

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          node.querySelectorAll('img').forEach(img => {
            if (!processed.has(img)) {
              processed.add(img);
              console.log('新图片加载:', img.src);
              img.addEventListener('error', () => {
                console.error('图片加载失败:', img.src);
              });
            }
          });
        }
      });
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
  return observer;
}

// 1. 根据容器宽度调整布局
class ResponsiveGrid {
  constructor(container) {
    this.container = container;
    this.resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        this.handleResize(entry);
      }
    });
    this.resizeObserver.observe(container);
  }

  handleResize(entry) {
    const { width } = entry.contentRect;

    // 根据容器宽度调整列数
    let columns;
    if (width < 400) {
      columns = 1;
    } else if (width < 800) {
      columns = 2;
    } else if (width < 1200) {
      columns = 3;
    } else {
      columns = 4;
    }

    this.container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
    this.container.dataset.columns = columns;
  }

  destroy() {
    this.resizeObserver.disconnect();
  }
}

// 使用
const grid = new ResponsiveGrid(document.querySelector('.grid-container'));

// 2. 自适应字号（让文本填满容器）
function autoFontSize(element, maxSize = 72, minSize = 12) {
  const observer = new ResizeObserver(() => {
    let fontSize = maxSize;
    element.style.fontSize = `${fontSize}px`;

    while (element.scrollWidth > element.clientWidth && fontSize > minSize) {
      fontSize -= 1;
      element.style.fontSize = `${fontSize}px`;
    }
  });

  observer.observe(element);
  return observer;
}

// 3. 文本域自动高度
function autoResizeTextarea(textarea) {
  const observer = new ResizeObserver(() => {
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
  });

  textarea.addEventListener('input', () => {
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
  });

  observer.observe(textarea);
  return observer;
}

// 4. 跟踪所有元素尺寸用于分析
function trackElementSizes(selector) {
  const data = new Map();

  const observer = new ResizeObserver((entries) => {
    entries.forEach(entry => {
      data.set(entry.target, {
        width: entry.contentRect.width,
        height: entry.contentRect.height,
        timestamp: Date.now()
      });
    });
  });

  document.querySelectorAll(selector).forEach(el => observer.observe(el));
  return { observer, data };
}

// ✅ 策略1：使用 DocumentFragment（已介绍）
// ✅ 策略2：使用 class 批量更新样式

// ❌ 低效：逐条修改样式（触发多次重排）
element.style.fontSize = '18px';
element.style.padding = '10px';
element.style.margin = '5px';
element.style.border = '1px solid #ccc';
element.style.color = '#333';

// ✅ 高效：使用 class 一次性应用
element.className = 'card card--active';

// OR: 使用 cssText
element.style.cssText = 'font-size: 18px; padding: 10px; color: #333;';

// OR: 使用 classList 结合 toggle 的第二个参数
element.classList.toggle('active', true);

// ✅ 策略3：批量读取，批量写入（分离读写操作）
// ❌ 错误的读写交替（强制多次重排）
for (let i = 0; i < items.length; i++) {
  items[i].style.height = items[i].offsetWidth + 'px'; // 读 + 写
  // 每次循环都先读取 offsetWidth（触发重排），再写 height
}

// ✅ 正确的做法：先批量读取，再批量写入
const widths = [];
for (let i = 0; i < items.length; i++) {
  widths.push(items[i].offsetWidth); // 读取阶段（触发一次重排）
}
for (let i = 0; i < items.length; i++) {
  items[i].style.height = widths[i] + 'px'; // 写入阶段
}

// 方法1：display: none
function updateCard(cardSelector) {
  const card = document.querySelector(cardSelector);

  // 1. 从渲染树中移除
  card.style.display = 'none';

  // 2. 在内存中执行多次操作（不会触发重排）
  card.innerHTML = '<div class="header">...</div><div class="body">...</div>';
  card.classList.add('updated');
  card.style.padding = '20px';
  card.dataset.version = '2.0';

  // 3. 重新显示（触发一次重排）
  card.style.display = '';
}

// 方法2：克隆 + 替换
function updateCardV2(cardSelector) {
  const card = document.querySelector(cardSelector);

  // 1. 深克隆（复制当前样式和结构到内存中）
  const clone = card.cloneNode(true);

  // 2. 在克隆体上做所有操作
  clone.innerHTML = '<div class="header">...</div><div class="body">...</div>';
  clone.classList.add('updated');
  clone.style.padding = '20px';

  // 3. 替换原节点（仅触发一次重排）
  card.replaceWith(clone);
}

// 方法3：DocumentFragment（前面已介绍）

// 1. 基本动画循环
function startAnimation(element) {
  let position = 0;

  function animate(timestamp) {
    // timestamp 是 rAF 传入的高精度时间戳（毫秒）
    position += 2;

    element.style.transform = `translateX(${position}px)`;

    if (position < 500) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 2. 使用 rAF 批量处理 DOM 更新
const updateQueue = [];
let isScheduled = false;

function scheduleDOMUpdate(callback) {
  updateQueue.push(callback);

  if (!isScheduled) {
    isScheduled = true;

    requestAnimationFrame(() => {
      // 在一次 rAF 中批量执行所有更新
      const start = performance.now();

      while (updateQueue.length > 0) {
        const cb = updateQueue.shift();
        cb();
      }

      console.log(`批量更新耗时: ${performance.now() - start}ms`);
      isScheduled = false;
    });
  }
}

// 使用
scheduleDOMUpdate(() => {
  element1.classList.add('visible');
});
scheduleDOMUpdate(() => {
  element2.textContent = '更新文本';
});

// 3. rAF 防抖（代替 setTimeout 做视觉更新）
function onScroll() {
  // ❌ setTimeout 不可靠
  // setTimeout(updateUI, 16);

  // ✅ 使用 rAF，在重绘前只执行一次
  if (!rafId) {
    rafId = requestAnimationFrame(() => {
      updateUI();
      rafId = null;
    });
  }
}

window.addEventListener('scroll', onScroll, { passive: true });

// DOM 性能优化清单

// 1. 最小化 DOM 访问次数 —— 缓存引用
// ❌
for (let i = 0; i < 100; i++) {
  document.getElementById('list').appendChild(createItem());
}
// ✅
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  fragment.appendChild(createItem());
}
list.appendChild(fragment);

// 2. 避免强制同步布局
// ❌
function setWidth() {
  // forEach 写在读取后面
  const widths = elements.map(el => el.offsetWidth);
  elements.forEach((el, i) => {
    el.style.width = widths[i] * 2 + 'px';
  });
}

// 3. 使用 transform 和 opacity 做动画
// ❌ 修改 left/top 触发重排
element.style.left = '100px';
element.style.top = '200px';

// ✅ 使用 transform（仅触发合成，不触发重排重绘）
element.style.transform = 'translate(100px, 200px)';

// 4. 使用 will-change 提示浏览器优化
element.style.willChange = 'transform';
// 使用完后记得移除，避免过度占用 GPU 内存
element.addEventListener('transitionend', () => {
  element.style.willChange = 'auto';
});

// 5. 事件委托减少监听器
// 6. 使用 IntersectionObserver 替代 scroll 事件
// 7. 使用 ResizeObserver 替代 window.resize
// 8. 使用 DocumentFragment 批量插入
// 9. 读写分离，批量操作
// 10. 使用虚拟 DOM 减少直接 DOM 操作（React/Vue 场景）