DOM 操作与优化

// 一个简易的读写调度器：收集本帧内所有的测量(read)和变更(write)任务
class DomScheduler {
  constructor() {
    this.reads = [];
    this.writes = [];
    this.pending = false;
  }
  read(fn) {
    this.reads.push(fn);
    this._schedule();
  }
  write(fn) {
    this.writes.push(fn);
    this._schedule();
  }
  _schedule() {
    if (this.pending) return;
    this.pending = true;
    requestAnimationFrame(() => this._flush());
  }
  _flush() {
    const reads = this.reads;
    const writes = this.writes;
    this.reads = [];
    this.writes = [];
    this.pending = false;

    // 关键：先把所有的读操作跑完，此时 DOM 还未被写操作污染
    const readResults = reads.map(fn => fn());
    // 再把所有写操作跑完，浏览器会把这些写合并为一次布局
    writes.forEach((fn, i) => fn(readResults[i]));
  }
}

const scheduler = new DomScheduler();

// 使用示例：批量测量一组卡片高度，再统一设置到另一组元素上
const cards = document.querySelectorAll('.card');
const badges = document.querySelectorAll('.badge');

cards.forEach((card, i) => {
  scheduler.read(() => card.offsetHeight);
});
badges.forEach((badge, i) => {
  scheduler.write((height) => {
    badge.style.top = height + 'px';
  });
});

// ❌ 不好的做法：重复查询DOM
function updateElement() {
  document.getElementById('myElement').style.color = 'red';
  document.getElementById('myElement').style.fontSize = '16px';
  document.getElementById('myElement').style.backgroundColor = 'blue';
}

// ✅ 好的做法：缓存DOM引用
const element = document.getElementById('myElement');
function updateElementOptimized() {
  element.style.color = 'red';
  element.style.fontSize = '16px';
  element.style.backgroundColor = 'blue';
}

document
   │  捕获 ↓
  html
   │  捕获 ↓
  body
   │  捕获 ↓
  ul.list
   │  捕获 ↓
  li (目标阶段：事件在这里触发)
   │  冒泡 ↑
  ul.list
   │  冒泡 ↑
  body
   │  冒泡 ↑
  html
   │  冒泡 ↑
document

// ❌ 不好的做法：为每个按钮添加事件监听器
function bindEachButton() {
  const buttons = document.querySelectorAll('.item-button');
  buttons.forEach(button => {
    button.addEventListener('click', function () {
      console.log('按钮被点击:', this.dataset.id);
    });
  });
  // 1000 个按钮 = 1000 个监听器，动态新增的按钮还需要重新绑定
}

// ✅ 好的做法：使用事件委托，只绑定一次
function bindDelegated() {
  const list = document.getElementById('list');
  list.addEventListener('click', function (event) {
    // closest 从事件触发点向上找到匹配选择器的祖先，兼容点击到按钮内部图标/文字的情况
    const button = event.target.closest('.item-button');
    if (!button || !list.contains(button)) return;
    console.log('按钮被点击:', button.dataset.id);
  });
  // 无论后续动态插入多少个 .item-button，都不需要再绑定事件
}

// 一个更通用的事件委托工具函数
function delegate(container, selector, eventType, handler) {
  container.addEventListener(eventType, (event) => {
    const target = event.target.closest(selector);
    if (target && container.contains(target)) {
      handler.call(target, event, target);
    }
  });
}

// 使用
delegate(document.getElementById('list'), '.item-button', 'click', (event, el) => {
  console.log('委托点击:', el.dataset.id);
});

// ❌ 默认情况下浏览器要等待事件处理函数执行完（确认是否调用了preventDefault）才能开始滚动
window.addEventListener('touchstart', onTouchStart);

// ✅ 声明 passive: true，告诉浏览器该处理函数不会阻止默认滚动行为，
// 浏览器可以立即开始滚动动画，无需等待 JS 执行完毕
window.addEventListener('touchstart', onTouchStart, { passive: true });
window.addEventListener('wheel', onWheel, { passive: true });

// 虚拟 DOM 节点通常就是一个普通对象
const vnode = {
  type: 'div',
  props: { className: 'card', id: 'card-1' },
  children: [
    { type: 'span', props: {}, children: ['Hello'] }
  ]
};

// 简化版：只处理"同类型节点更新属性"和"列表 key 复用"两种核心情况
function diffChildren(oldChildren, newChildren) {
  const patches = [];
  const oldKeyed = new Map(oldChildren.map((c, i) => [c.key, { node: c, index: i }]));

  newChildren.forEach((newChild, newIndex) => {
    const matched = oldKeyed.get(newChild.key);
    if (matched) {
      // key 匹配到旧节点：复用 DOM，只做属性/文本层面的更新，不销毁重建
      patches.push({ type: 'UPDATE', oldIndex: matched.index, newIndex, vnode: newChild });
      oldKeyed.delete(newChild.key);
    } else {
      // 没有匹配：这是一个全新节点，需要创建
      patches.push({ type: 'CREATE', newIndex, vnode: newChild });
    }
  });

  // 剩下没被复用的旧节点，说明在新列表里被删除了
  oldKeyed.forEach(({ index }) => {
    patches.push({ type: 'REMOVE', oldIndex: index });
  });

  return patches;
}

// 场景：在列表开头插入一条新数据
// 旧列表：[A, B, C]  新列表：[X, A, B, C]

// ❌ 没有 key（或用 index 当 key）：Diff 算法会认为
// 位置0: A→X（更新）, 位置1: B→A（更新）, 位置2: C→B（更新）, 位置3: 新增C
// 结果是所有节点都被"更新"了一遍，即使内容其实没变，白白多做了 3 次属性比对和可能的 DOM patch

// ✅ 使用稳定的唯一 key（如数据自身的 id）：Diff 算法能识别出
// A、B、C 是同一批节点只是挪了位置，只需要在最前面插入 X 对应的新节点
// DOM 操作次数从"4 次更新"降为"1 次插入"

// 最快：直接按 id 查找，浏览器内部有 id 索引
const el1 = document.getElementById('app');

// 稍慢：CSS 选择器引擎需要解析选择器语法并做匹配
const el2 = document.querySelector('#app');

// 实时集合：DOM 变化时会自动更新集合内容，遍历时如果同时增删元素要小心死循环或漏项
const els1 = document.getElementsByClassName('item');

// 静态快照：一次性查询，之后 DOM 再变化也不会影响这个结果集
const els2 = document.querySelectorAll('.item');

// 反例：在循环里重复查询同一个选择器
for (let i = 0; i < 100; i++) {
  document.querySelector('.container').appendChild(document.createElement('span'));
  // 每次循环都重新查询 .container，浪费性能
}

// 正例：查询一次，缓存引用
const container = document.querySelector('.container');
for (let i = 0; i < 100; i++) {
  container.appendChild(document.createElement('span'));
}

const el = document.getElementById('note');

// 用户输入未经转义直接塞进 innerHTML，存在 XSS 风险
const userInput = '<img src=x onerror="alert(1)">';
el.innerHTML = userInput; // ❌ 危险：会执行恶意脚本

// 纯文本展示，安全且不会被当作 HTML 解析
el.textContent = userInput; // ✅ 安全：原样显示为文字

// 清空子元素的两种方式
el.innerHTML = ''; // 简单但会解绑所有子孙节点上的事件监听器
while (el.firstChild) {
  el.removeChild(el.firstChild); // 更可控，可结合业务逻辑决定要不要提前清理监听器
}

<img data-src="https://example.com/real-image.jpg" class="lazy" alt="示例图片" />

const lazyImages = document.querySelectorAll('img.lazy');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;      // 进入视口后才真正加载图片
      img.classList.remove('lazy');
      obs.unobserve(img);              // 加载完就不再需要观察它，及时释放资源
    }
  });
}, {
  root: null,        // null 表示以浏览器视口作为根
  rootMargin: '200px', // 提前 200px 开始加载，用户几乎感知不到加载过程
  threshold: 0.01       // 只要有 1% 进入视口就触发
});

lazyImages.forEach(img => observer.observe(img));

const sentinel = document.getElementById('scroll-sentinel'); // 列表末尾的哨兵元素
let isLoading = false;

const loadMoreObserver = new IntersectionObserver(async (entries) => {
  const entry = entries[0];
  if (entry.isIntersecting && !isLoading) {
    isLoading = true;
    await loadNextPage(); // 拉取下一页数据并追加到列表
    isLoading = false;
  }
}, { rootMargin: '400px' });

loadMoreObserver.observe(sentinel);

const adSlots = document.querySelectorAll('.ad-slot');
const exposureObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // threshold 设为 0.5，表示广告至少露出一半才算"真实曝光"，避免虚假曝光数据
    if (entry.isIntersecting) {
      reportExposure(entry.target.dataset.adId);
      exposureObserver.unobserve(entry.target); // 一个广告位只上报一次曝光
    }
  });
}, { threshold: 0.5 });

adSlots.forEach(slot => exposureObserver.observe(slot));

class VirtualList {
  constructor({ container, itemHeight, totalCount, renderItem, buffer = 5 }) {
    this.container = container;       // 可滚动的外层容器，需要设置固定高度和 overflow-y: auto
    this.itemHeight = itemHeight;     // 每一项的固定高度（px）
    this.totalCount = totalCount;     // 数据总条数
    this.renderItem = renderItem;     // (index) => HTMLElement，渲染单条数据
    this.buffer = buffer;             // 上下多渲染的缓冲行数，减少快速滚动时的白屏

    this._setupDom();
    this.container.addEventListener('scroll', () => this._onScroll());
    this._render();
  }

  _setupDom() {
    // 撑开总高度的占位元素，让滚动条长度符合真实数据总量
    this.phantom = document.createElement('div');
    this.phantom.style.height = this.itemHeight * this.totalCount + 'px';
    this.phantom.style.position = 'relative';

    // 实际承载可见内容的容器，用 transform 定位到当前应处的位置
    this.content = document.createElement('div');
    this.content.style.position = 'absolute';
    this.content.style.top = '0';
    this.content.style.left = '0';
    this.content.style.right = '0';

    this.phantom.appendChild(this.content);
    this.container.appendChild(this.phantom);
  }

  _onScroll() {
    // 用 requestAnimationFrame 节流滚动回调，避免每个像素滚动都重新渲染
    if (this._rafId) return;
    this._rafId = requestAnimationFrame(() => {
      this._render();
      this._rafId = null;
    });
  }

  _render() {
    const scrollTop = this.container.scrollTop;
    const viewportHeight = this.container.clientHeight;

    let startIndex = Math.floor(scrollTop / this.itemHeight) - this.buffer;
    let endIndex = Math.ceil((scrollTop + viewportHeight) / this.itemHeight) + this.buffer;
    startIndex = Math.max(0, startIndex);
    endIndex = Math.min(this.totalCount - 1, endIndex);

    // 用 DocumentFragment 批量构建这一小段可见数据，避免逐个 appendChild
    const fragment = document.createDocumentFragment();
    for (let i = startIndex; i <= endIndex; i++) {
      const node = this.renderItem(i);
      node.style.position = 'absolute';
      node.style.top = i * this.itemHeight + 'px';
      node.style.height = this.itemHeight + 'px';
      fragment.appendChild(node);
    }

    // 每次渲染前清空旧内容，只保留当前可视范围内的少量节点
    this.content.innerHTML = '';
    this.content.appendChild(fragment);
  }
}

// 使用示例：渲染 100000 条数据的列表
const list = new VirtualList({
  container: document.getElementById('scroll-container'),
  itemHeight: 40,
  totalCount: 100000,
  renderItem(index) {
    const div = document.createElement('div');
    div.textContent = `第 ${index} 行数据`;
    div.className = 'row';
    return div;
  }
});

function renderLargeListInIdleTime(items, container) {
  let index = 0;

  function renderChunk(deadline) {
    // deadline.timeRemaining() 返回本次空闲期还剩多少毫秒，
    // 只要还有时间余量（或浏览器判断任务已超时），就继续渲染下一条
    while (index < items.length && (deadline.timeRemaining() > 0 || deadline.didTimeout)) {
      const item = items[index];
      const div = document.createElement('div');
      div.textContent = item.name;
      container.appendChild(div);
      index++;
    }

    if (index < items.length) {
      // 本次空闲时间用完了，但还有剩余数据，注册下一次空闲回调继续处理
      requestIdleCallback(renderChunk, { timeout: 1000 });
    }
  }

  requestIdleCallback(renderChunk, { timeout: 1000 });
}

// 使用：即便 items 有 5000 条，页面在渲染过程中依然可以响应用户输入
renderLargeListInIdleTime(largeDataArray, document.getElementById('big-list'));

// Safari 部分版本不支持 requestIdleCallback，降级用 setTimeout 模拟
const ric = window.requestIdleCallback || function (cb) {
  const start = Date.now();
  return setTimeout(() => {
    cb({
      didTimeout: false,
      timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
    });
  }, 1);
};

// main.js —— 主线程
const worker = new Worker('data-worker.js');

worker.postMessage({ type: 'PROCESS', payload: largeRawDataArray });

worker.onmessage = (event) => {
  const { type, result } = event.data;
  if (type === 'DONE') {
    renderSummary(result); // 只在拿到结果后做一次性、轻量的 DOM 更新
  }
};

worker.onerror = (err) => {
  console.error('Worker 执行出错:', err.message);
};

// data-worker.js —— Worker 线程，没有 window/document，只能做纯计算和消息通信
self.onmessage = function (event) {
  const { type, payload } = event.data;
  if (type === 'PROCESS') {
    const sorted = payload.slice().sort((a, b) => a.value - b.value);
    const total = payload.reduce((sum, item) => sum + item.value, 0);
    const average = total / payload.length;

    self.postMessage({
      type: 'DONE',
      result: { sorted: sorted.slice(0, 100), total, average }
    });
  }
};

const target = document.getElementById('content');

const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1 && node.matches('.lazy-widget')) {
          initWidget(node); // 有新的组件节点插入时，自动初始化它
        }
      });
      mutation.removedNodes.forEach(node => {
        if (node.nodeType === 1 && node.matches('.lazy-widget')) {
          destroyWidget(node); // 节点被移除时做清理
        }
      });
    }
  }
});

observer.observe(target, {
  childList: true,  // 监听子节点增删
  subtree: true,    // 监听所有后代节点，不只是直接子节点
  attributes: false // 是否监听属性变化
});

// 不再需要时记得断开观察，避免持续消耗性能
// observer.disconnect();

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

const attrObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      console.log('class 变化，旧值:', mutation.oldValue, '新值:', box.className);
    }
  });
});

attrObserver.observe(box, {
  attributes: true,
  attributeOldValue: true,
  attributeFilter: ['class'] // 只关心 class 属性，减少无关回调
});

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 应用：搜索框输入时，用户停止输入 300ms 后才真正发起请求
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce((event) => {
  fetchSearchResults(event.target.value);
}, 300));

function throttle(fn, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

// 应用：滚动过程中每 100ms 最多更新一次"阅读进度"
window.addEventListener('scroll', throttle(() => {
  updateReadingProgress();
}, 100));

function renderDashboard(data) {
  performance.mark('dashboard-render-start');

  buildCharts(data);
  renderTable(data);
  updateSummaryCards(data);

  performance.mark('dashboard-render-end');
  performance.measure(
    'dashboard-render-duration',
    'dashboard-render-start',
    'dashboard-render-end'
  );

  const [entry] = performance.getEntriesByName('dashboard-render-duration');
  console.log('dashboard 渲染耗时:', entry.duration.toFixed(2), 'ms');

  // 上报到自建监控系统或分析平台
  reportPerformance('dashboard_render', entry.duration);

  // 清理标记，避免长期运行的单页应用中标记无限累积
  performance.clearMarks('dashboard-render-start');
  performance.clearMarks('dashboard-render-end');
  performance.clearMeasures('dashboard-render-duration');
}

// 监听超过 50ms 的长任务（Long Task），这类任务会阻塞主线程，影响交互响应
const longTaskObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.warn('检测到长任务:', entry.duration.toFixed(2), 'ms', entry);
    reportLongTask(entry.duration);
  });
});

longTaskObserver.observe({ entryTypes: ['longtask'] });