前端取经路——DOM渡劫：三藏法师的九道试炼-CSDN博客

本文链接：https://blog.csdn.net/weixin_42072714/article/details/147750312

大家好，我是老十三，一名前端开发工程师。操作DOM是前端修行中的必经之路，也是最容易遇到"妖魔鬼怪"的险境。今天我将带你一起面对DOM渡劫的九道试炼，从性能优化到事件代理，从Web Components到Canvas绘图。通过这些试炼，你将掌握更高效、更优雅的DOM操作技巧，让用户体验如行云流水般丝滑。准备好与我一同渡劫了吗？

掌握了CSS的"五行山"与JavaScript的"九大心法"后，是时候跟随三藏法师，踏入DOM渡劫的修行之路。这九道试炼，将让你从理论迈向实践，掌握与页面元素交互的真谛。

🔄 第一难：DOM性能 - 批量操作的"一气呵成"

问题：为什么频繁操作DOM会导致页面卡顿？如何在大量DOM操作时保持页面流畅？

深度技术：

DOM操作是前端性能瓶颈的主要来源，每次DOM变更都可能触发昂贵的重排(reflow)和重绘(repaint)。优化DOM性能的关键在于减少直接操作DOM的次数，以及合理使用浏览器的渲染机制。

高效DOM操作的核心策略包括：批量处理更新、使用文档片段(DocumentFragment)、适当的离线处理和虚拟DOM技术。理解这些策略，能让复杂页面交互变得流畅自如。

代码示例：

// 糟糕的实现：频繁操作DOM
function badListCreation() {
  const list = document.getElementById('list');
  for (let i = 0; i < 10000; i++) {
    list.innerHTML += `<li>Item ${i}</li>`; // 每次循环都触发DOM更新
  }
}

// 改进方案1：使用字符串拼接
function betterListCreation() {
  const list = document.getElementById('list');
  let html = '';
  
  for (let i = 0; i < 10000; i++) {
    html += `<li>Item ${i}</li>`;
  }
  
  list.innerHTML = html; // 一次性更新DOM
}

// 改进方案2：使用文档片段
function bestListCreation() {
  const list = document.getElementById('list');
  const fragment = document.createDocumentFragment();
  
  for (let i = 0; i < 10000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
  }
  
  list.appendChild(fragment); // 一次性将片段添加到DOM
}

// 批量样式更新
function batchStyleUpdates(element) {
  // 糟糕：每行都会触发重排
  // element.style.width = '100px';
  // element.style.height = '100px';
  // element.style.borderRadius = '50%';
  
  // 优化：使用CSS类一次性应用多个样式
  element.classList.add('circle');
  
  // 或者批量设置样式
  const styles = {
    width: '100px',
    height: '100px',
    borderRadius: '50%'
  };
  
  Object.assign(element.style, styles);
}

// 离线DOM操作
function offlineOperation(elementId) {
  // 从DOM中移除元素
  const element = document.getElementById(elementId);
  const parent = element.parentNode;
  const nextSibling = element.nextSibling;
  
  // 移除元素（使其离线）
  parent.removeChild(element);
  
  // 执行大量操作
  for (let i = 0; i < 1000; i++) {
    element.appendChild(document.createElement('div'));
  }
  
  // 放回元素
  parent.insertBefore(element, nextSibling);
}

// 使用requestAnimationFrame避免布局抖动
function animateElements(elements) {
  elements.forEach(el => {
    // 不好的方式：在循环中直接修改样式
    // el.style.height = `${el.offsetHeight + 1}px`; // 读取后立即写入，导致布局抖动
  });
  
  // 更好的方式：批量读取后批量修改
  const heights = elements.map(el => el.offsetHeight); // 一次性读取
  
  requestAnimationFrame(() => {
    elements.forEach((el, i) => {
      el.style.height = `${heights[i] + 1}px`; // 一次性写入
    });
  });
}

🌐 第二难：事件委托 - 冒泡与捕获的"筋斗云"速度

问题：如何高效处理成百上千个元素的点击事件？为什么说事件委托是处理大量DOM事件的最佳实践？

深度技术：

事件委托(Event Delegation)是利用事件冒泡机制，将多个元素的事件处理器集中到其父元素上的技术。这不仅简化了DOM事件管理，还能大幅提升性能，特别是在处理大量动态生成的元素时。

理解事件委托，需要掌握事件流的三个阶段(捕获、目标、冒泡)，以及event.target与event.currentTarget的区别。结合closest()等DOM API，可以构建强大而灵活的事件处理系统。

代码示例：

// 传统方式：为每个元素添加独立的事件监听器
function withoutDelegation() {
  const buttons = document.querySelectorAll('.button');
  
  buttons.forEach(button => {
    button.addEventListener('click', function(e) {
      console.log(`Button ${this.textContent} clicked`);
    });
  });
  
  // 问题1：动态添加的元素需要重新绑定事件
  // 问题2：内存占用随元素增加而增加
}

// 事件委托：将事件监听器添加到父元素
function withDelegation() {
  const container = document.querySelector('.button-container');
  
  container.addEventListener('click', function(e) {
    // 检查点击的是否是我们关心的元素
    if (e.target.matches('.button')) {
      console.log(`Button ${e.target.textContent} clicked`);
    }
  });
  
  // 优势1：动态添加的元素自动享有事件处理
  // 优势2：只需要一个事件监听器，内存占用更小
}

// 高级事件委托：处理复杂的嵌套结构
function advancedDelegation() {
  const todoList = document.querySelector('.todo-list');
  
  todoList.addEventListener('click', function(e) {
    // 查找最近的action元素
    const action = e.target.closest('[data-action]');
    
    if (action) {
      const actionType = action.dataset.action;
      const todoItem = action.closest('.todo-item');
      
      if (todoItem && actionType) {
        const todoId = todoItem.dataset.id;
        
        // 根据不同操作执行不同逻辑
        switch (actionType) {
          case 'complete':
            markTodoComplete(todoId);
            break;
          case 'edit':
            openTodoEditor(todoId);
            break;
          case 'delete':
            deleteTodo(todoId);
            break;
        }
      }
    }
  });
}

// 自定义事件系统
class EventHub {
  constructor(element) {
    this.element = element;
    this.delegatedEvents = {};
    
    // 主事件监听器
    this.handleEvent = this.handleEvent.bind(this);
  }
  
  // 注册委托事件
  on(eventType, selector, handler) {
    if (!this.delegatedEvents[eventType]) {
      this.delegatedEvents[eventType] = [];
      // 只在第一次为事件类型注册时添加DOM监听器
      this.element.addEventListener(eventType, this.handleEvent);
    }
    
    this.delegatedEvents[eventType].push({
      selector,
      handler
    });
    
    return this;
  }
  
  // 处理所有委托事件
  handleEvent(event) {
    const eventType = event.type;
    const handlers = this.delegatedEvents[eventType] || [];
    
    let targetElement = event.target;
    
    // 模拟事件冒泡
    while (targetElement && targetElement !== this.element) {
      handlers.forEach(({ selector, handler }) => {
        if (targetElement.matches(selector)) {
          handler.call(targetElement, event, targetElement);
        }
      });
      
      targetElement = targetElement.parentElement;
    }
  }
  
  // 移除委托事件
  off(eventType, selector, handler) {
    // 实现略
  }
}

// 使用自定义事件系统
const hub = new EventHub(document.body);

hub.on('click', '.button', function(event, element) {
  console.log(`Button clicked: ${element.textContent}`);
})
.on('mouseover', '.card', function(event, element) {
  console.log(`Card hover: ${element.dataset.title}`);
});

🧩 第三难：Web组件 - 跨框架复用的"金刚不坏"

问题：如何创建真正可复用的UI组件，不依赖特定框架，在任何环境中都能使用？

深度技术：

Web Components是现代浏览器原生支持的组件化解决方案，包含Custom Elements、Shadow DOM和HTML Templates三大核心技术。它让开发者能够创建封装良好、可复用的自定义元素，不受框架限制。

Shadow DOM提供了DOM隔离机制，解决了全局样式污染问题；而自定义元素生命周期钩子(connectedCallback, disconnectedCallback等)提供了类似框架组件的能力，使原生组件开发更加结构化。

代码示例：

// 基础Web Component：定义自定义元素
class WisdomCard extends HTMLElement {
  constructor() {
    super();
    // 创建Shadow DOM以隔离样式和DOM
    this.attachShadow({ mode: 'open' });
    
    // 初始化组件
    this.render();
  }
  
  // 当元素连接到DOM时调用
  connectedCallback() {
    console.log('Wisdom card added to the page');
    this.upgradeProperty('title');
    this.upgradeProperty('content');
  }
  
  // 当元素从DOM移除时调用
  disconnectedCallback() {
    console.log('Wisdom card removed from the page');
  }
  
  // 监听属性变化
  static get observedAttributes() {
    return ['title', 'content', 'theme'];
  }
  
  // 属性变化时触发
  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      this[name] = newValue;
      this.render();
    }
  }
  
  // 获取属性值（确保与属性保持同步）
  upgradeProperty(prop) {
    if (this.hasOwnProperty(prop)) {
      const value = this[prop];
      delete this[prop];
      this[prop] = value;
    }
  }
  
  // 定义title属性的getter和setter
  get title() {
    return this.getAttribute('title') || 'Wisdom';
  }
  
  set title(value) {
    this.setAttribute('title', value);
  }
  
  // 定义content属性的getter和setter
  get content() {
    return this.getAttribute('content') || 'No content provided';
  }
  
  set content(value) {
    this.setAttribute('content', value);
  }
  
  // 定义theme属性
  get theme() {
    return this.getAttribute('theme') || 'light';
  }
  
  set theme(value) {
    this.setAttribute('theme', value);
  }
  
  // 渲染组件
  render() {
    const theme = this.theme;
    
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-family: sans-serif;
          margin: 16px;
        }
        
        :host([theme="dark"]) .card {
          background-color: #333;
          color: #fff;
        }
        
        .card {
          border-radius: 8px;
          padding: 16px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          background-color: #fff;
          color: #333;
          transition: all 0.3s ease;
        }
        
        .card:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        
        .title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 8px;
          color: ${theme === 'dark' ? '#4caf50' : '#2e7d32'};
        }
        
        .content {
          line-height: 1.5;
        }
        
        ::slotted(a) {
          color: #2196f3;
          text-decoration: none;
        }
      </style>
      
      <div class="card">
        <div class="title">${this.title}</div>
        <div class="content">
          ${this.content}
          <slot name="extra"></slot>
        </div>
      </div>
    `;
    
    // 添加点击事件
    this.shadowRoot.querySelector('.card').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('card-click', {
        bubbles: true,
        composed: true, // 允许事件穿越Shadow DOM边界
        detail: {
          title: this.title,
          content: this.content
        }
      }));
    });
  }
}

// 注册自定义元素
customElements.define('wisdom-card', WisdomCard);

// 使用自定义元素（HTML中）
/*
<wisdom-card 
  title="前端之道" 
  content="工欲善其事，必先利其器"
  theme="dark">
  <a href="/more" slot="extra">了解更多</a>
</wisdom-card>

<script>
  document.querySelector('wisdom-card').addEventListener('card-click', (e) => {
    console.log('Card clicked:', e.detail);
  });
</script>
*/

// 高级Web Component：使用HTML Template和复杂状态管理
class TaskList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    // 内部状态
    this._tasks = [];
    
    // 获取模板
    this.template = document.getElementById('task-list-template');
    
    // 渲染初始状态
    this.render();
  }
  
  // 获取任务数据
  get tasks() {
    return this._tasks;
  }
  
  // 设置任务数据并重新渲染
  set tasks(value) {
    this._tasks = Array.isArray(value) ? value : [];
    this.render();
  }
  
  connectedCallback() {
    // 监听输入框提交
    this.shadowRoot.querySelector('form').addEventListener('submit', this.handleSubmit.bind(this));
    
    // 监听任务操作
    this.shadowRoot.addEventListener('click', this.handleTaskAction.bind(this));
  }
  
  // 处理表单提交
  handleSubmit(e) {
    e.preventDefault();
    const input = this.shadowRoot.querySelector('input');
    const taskName = input.value.trim();
    
    if (taskName) {
      this.addTask(taskName);
      input.value = '';
    }
  }
  
  // 处理任务操作（完成/删除）
  handleTaskAction(e) {
    const button = e.target.closest('button');
    if (!button) return;
    
    const taskId = button.closest('li').dataset.id;
    const action = button.dataset.action;
    
    if (action === 'complete') {
      this.toggleTaskComplete(taskId);
    } else if (action === 'delete') {
      this.removeTask(taskId);
    }
  }
  
  // 添加新任务
  addTask(name) {
    this._tasks.push({
      id: Date.now().toString(),
      name,
      completed: false
    });
    
    this.render();
    this.dispatchEvent(new CustomEvent('task-added', {
      bubbles: true,
      composed: true
    }));
  }
  
  // 切换任务完成状态
  toggleTaskComplete(id) {
    this._tasks = this._tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    );
    
    this.render();
  }
  
  // 删除任务
  removeTask(id) {
    this._tasks = this._tasks.filter(task => task.id !== id);
    this.render();
  }
  
  render() {
    if (!this.template) return;
    
    // 克隆模板内容
    const templateContent = this.template.content.cloneNode(true);
    
    // 更新任务列表
    const taskList = templateContent.querySelector('.tasks');
    taskList.innerHTML = '';
    
    this._tasks.forEach(task => {
      const li = document.createElement('li');
      li.dataset.id = task.id;
      li.className = task.completed ? 'completed' : '';
      
      li.innerHTML = `
        <span>${task.name}</span>
        <div class="actions">
          <button data-action="complete">${task.completed ? '🔄' : '✅'}</button>
          <button data-action="delete">🗑️</button>
        </div>
      `;
      
      taskList.appendChild(li);
    });
    
    // 更新计数
    const counter = templateContent.querySelector('.counter');
    counter.textContent = `${this._tasks.length} tasks`;
    
    // 清除旧内容，添加新内容
    this.shadowRoot.innerHTML = '';
    this.shadowRoot.appendChild(templateContent);
  }
}

customElements.define('task-list', TaskList);

// HTML模板（HTML中）
/*
<template id="task-list-template">
  <style>
    /* 组件样式... */
  </style>
  <div class="task-list-container">
    <h2>My Tasks</h2>
    <form>
      <input type="text" placeholder="Add a new task..." required>
      <button type="submit">Add</button>
    </form>
    <ul class="tasks"></ul>
    <div class="counter">0 tasks</div>
  </div>
</template>

<task-list></task-list>

<script>
  // 初始化任务
  const taskList = document.querySelector('task-list');
  taskList.tasks = [
    { id: '1', name: 'Learn Web Components', completed: true },
    { id: '2', name: 'Master Shadow DOM', completed: false }
  ];
  
  // 监听任务添加事件
  taskList.addEventListener('task-added', () => {
    console.log('New task added!');
  });
</script>
*/

## 🔄 第四难：虚拟DOM - 框架背后的"变身术"

问题：为什么现代框架都使用虚拟DOM？这种抽象到底解决了什么问题？

深度技术：

虚拟DOM(Virtual DOM)是一种编程概念，通过在内存中维护UI的虚拟表示，减少对实际DOM的直接操作。它不是浏览器的特性，而是各大框架实现高效DOM更新的解决方案。

虚拟DOM的核心价值在于将"命令式"的DOM操作转变为"声明式"的状态更新，配合高效的diff算法，只进行必要的DOM变更。理解这一机制，有助于更好地使用现代框架，甚至实现简易版的响应式系统。

代码示例：

```javascript
// 简易版虚拟DOM实现

// 1. 创建虚拟DOM节点
function createVNode(type, props = {}, children = []) {
  return {
    type,                // 节点类型：'div', 'span'等
    props,               // 属性对象：{class: 'btn', onClick: fn}
    children: children.map(child =>  // 子节点数组
      typeof child === 'object' ? child : createTextVNode(child)
    )
  };
}

// 创建文本节点
function createTextVNode(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: { nodeValue: text },
    children: []
  };
}

// 2. 将虚拟DOM渲染为真实DOM
function render(vnode, container) {
  // 创建DOM元素
  const dom = vnode.type === 'TEXT_ELEMENT'
    ? document.createTextNode('')
    : document.createElement(vnode.type);
  
  // 处理非子节点的属性
  const isProperty = key => key !== 'children';
  const isEvent = key => key.startsWith('on');
  
  // 设置属性
  Object.keys(vnode.props)
    .filter(isProperty)
    .forEach(name => {
      // 处理事件
      if (isEvent(name)) {
        const eventType = name.toLowerCase().substring(2);
        dom.addEventListener(eventType, vnode.props[name]);
      } else {
        dom[name] = vnode.props[name];
      }
    });
  
  // 递归渲染子节点
  vnode.children.forEach(childVNode => {
    render(childVNode, dom);
  });
  
  // 将创建的DOM添加到容器中
  container.appendChild(dom);
  
  return dom;
}

// 3. 简易的Diff算法：对比新旧虚拟DOM树
function diff(oldVNode, newVNode) {
  // 如果节点类型不同，直接替换
  if (oldVNode.type !== newVNode.type) {
    return {
      type: 'REPLACE',
      newVNode
    };
  }
  
  // 文本节点特殊处理
  if (oldVNode.type === 'TEXT_ELEMENT') {
    if (oldVNode.props.nodeValue !== newVNode.props.nodeValue) {
      return {
        type: 'UPDATE_TEXT',
        value: newVNode.props.nodeValue
      };
    }
    return null; // 无变化
  }
  
  // 收集需要更新的属性
  const propPatches = {};
  let propChanged = false;
  
  // 检查移除的属性
  Object.keys(oldVNode.props).forEach(key => {
    if (key !== 'children' && !(key in newVNode.props)) {
      propChanged = true;
      propPatches[key] = null;
    }
  });
  
  // 检查新增和变更的属性
  Object.keys(newVNode.props).forEach(key => {
    if (key !== 'children' && oldVNode.props[key] !== newVNode.props[key]) {
      propChanged = true;
      propPatches[key] = newVNode.props[key];
    }
  });
  
  // 递归对比子节点
  const childPatches = [];
  const maxLength = Math.max(oldVNode.children.length, newVNode.children.length);
  
  for (let i = 0; i < maxLength; i++) {
    childPatches[i] = diff(
      oldVNode.children[i] || {},
      newVNode.children[i] || {}
    );
  }
  
  // 只在有变化时返回补丁
  if (propChanged || childPatches.some(patch => patch !== null)) {
    return {
      type: 'UPDATE',
      props: propChanged ? propPatches : null,
      children: childPatches.some(patch => patch !== null) ? childPatches : null
    };
  }
  
  return null; // 无变化
}

// 4. 应用Diff补丁
function applyPatch(dom, patch) {
  if (!patch) return dom;
  
  switch (patch.type) {
    case 'REPLACE':
      const newDom = render(patch.newVNode, document.createDocumentFragment());
      dom.parentNode.replaceChild(newDom, dom);
      return newDom;
      
    case 'UPDATE_TEXT':
      dom.nodeValue = patch.value;
      return dom;
      
    case 'UPDATE':
      // 更新属性
      if (patch.props) {
        Object.keys(patch.props).forEach(key => {
          const value = patch.props[key];
          if (value === null) {
            // 移除属性
            dom.removeAttribute(key);
          } else if (key.startsWith('on')) {
            // 更新事件
            const eventType = key.toLowerCase().substring(2);
            dom.addEventListener(eventType, value);
          } else {
            // 更新普通属性
            dom[key] = value;
          }
        });
      }
      
      // 递归更新子节点
      if (patch.children) {
        patch.children.forEach((childPatch, index) => {
          applyPatch(dom.childNodes[index], childPatch);
        });
      }
      
      return dom;
      
    default:
      return dom;
  }
}

// 5. 简单的响应式系统示例
function createApp() {
  let state = {};
  let rootElement = null;
  let vdom = null;
  
  // 设置状态并触发重新渲染
  function setState(newState) {
    state = { ...state, ...newState };
    update();
  }
  
  // 挂载应用
  function mount(component, container) {
    rootElement = container;
    update();
  }
  
  // 更新视图
  function update() {
    const nextVdom = view(state, setState);
    
    if (!vdom) {
      // 首次渲染
      render(nextVdom, rootElement);
    } else {
      // 后续更新：计算差异并应用
      const patches = diff(vdom, nextVdom);
      applyPatch(rootElement.firstChild, patches);
    }
    
    vdom = nextVdom;
  }
  
  // 渲染函数（由使用者提供）
  let view = () => createVNode('div', {}, ['Hello World']);
  
  // 设置渲染函数
  function setView(viewFn) {
    view = viewFn;
  }
  
  return {
    mount,
    setState,
    setView
  };
}

// 使用示例
const app = createApp();

// 设置视图渲染函数
app.setView((state, setState) => {
  const { count = 0, todos = [] } = state;
  
  return createVNode('div', { class: 'app' }, [
    createVNode('h1', {}, [`Count: ${count}`]),
    createVNode('button', { 
      onClick: () => setState({ count: count + 1 }) 
    }, ['Increment']),
    createVNode('ul', {}, 
      todos.map(todo => 
        createVNode('li', {}, [todo])
      )
    ),
    createVNode('button', {
      onClick: () => setState({ 
        todos: [...todos, `Task ${todos.length + 1}`] 
      })
    }, ['Add Task'])
  ]);
});

// 挂载应用
app.mount(document.getElementById('app'));

// 设置初始状态
app.setState({ count: 0, todos: [] });

🎨 第五难：浏览器渲染 - 回流与重绘的修行禁忌

问题：为什么有些CSS属性改变性能很差，而有些却很流畅？如何通过理解渲染管线优化页面性能？

深度技术：

浏览器渲染流程是前端优化的核心知识点，包括DOM解析、样式计算、布局、绘制和合成等阶段。其中，布局(回流/reflow)和绘制(重绘/repaint)是最耗费性能的操作。

理解渲染管线，需要掌握关键渲染路径(Critical Rendering Path)概念，区分哪些属性会触发回流(如大小、位置相关)，哪些只触发重绘(如颜色、阴影相关)，以及哪些可以完全由GPU合成(如transform、opacity)。

代码示例：

// 渲染性能示例

// 1. 触发回流(reflow)的操作示范
function causeReflow(element) {
  // 以下操作会导致回流
  
  // A. 直接修改元素尺寸或位置
  element.style.width = '300px';
  element.style.padding = '20px';
  element.style.margin = '10px';
  
  // B. 读取会导致强制回流的属性
  console.log(element.offsetWidth); // 强制浏览器计算布局
  element.style.height = '200px';   // 再次修改会导致新的回流
  
  // C. DOM结构修改
  const newChild = document.createElement('div');
  element.appendChild(newChild);
  
  // D. 伪类变化导致的回流
  element.classList.add(':hover');
  
  // E. 窗口大小调整也会导致回流
  // window.addEventListener('resize', function() {...});
}

// 2. 只触发重绘(repaint)的操作示范
function causeRepaint(element) {
  // 以下操作只会导致重绘，不会导致回流
  element.style.color = 'red';
  element.style.backgroundColor = 'blue';
  element.style.border = '1px solid black';
  element.style.boxShadow = '2px 2px 5px rgba(0,0,0,0.2)';
  element.style.outline = '2px solid red';
}

// 3. 使用合成层(Composite Layers)优化的操作
function useCompositing(element) {
  // 以下属性变化只会影响合成阶段，性能最佳
  element.style.transform = 'translateX(100px)'; // 代替left/top
  element.style.opacity = '0.5';                 // 代替visibility
  element.style.willChange = 'transform';        // 提示浏览器提前准备合成层
  
  // 使用CSS动画而不是JS动画
  element.style.transition = 'transform 0.3s';
  
  // 使用requestAnimationFrame同步样式更新与浏览器渲染
  requestAnimationFrame(() => {
    element.style.transform = 'translateX(200px)';
  });
}

// 4. 批量DOM操作，减少回流次数
function batchDOMOperations() {
  const list = document.getElementById('list');
  
  // 糟糕的做法：每个操作都可能导致回流
  // for (let i = 0; i < 100; i++) {
  //   list.style.width = (100 + i) + 'px';
  //   console.log(list.offsetHeight); // 强制回流
  // }
  
  // 更好的做法1：批量读取，然后批量写入
  const measurements = [];
  
  // 先进行所有的读操作
  for (let i = 0; i < 100; i++) {
    measurements.push(list.offsetHeight);
  }
  
  // 再进行所有的写操作
  for (let i = 0; i < 100; i++) {
    list.style.width = (100 + i) + 'px';
  }
  
  // 更好的做法2：使用CSS类一次性应用多个样式
  // 而不是单独设置每个样式
  list.classList.add('enhanced');
  
  // 更好的做法3：对于复杂变化，使用离屏DOM操作
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
  }
  list.appendChild(fragment); // 只有一次实际DOM更新
}

// 5. 使用性能监测工具
function measureRenderPerformance() {
  // 使用Performance API测量渲染性能
  performance.mark('animation-start');
  
  // 执行动画操作
  animateElement();
  
  performance.mark('animation-end');
  performance.measure('animation', 'animation-start', 'animation-end');
  
  // 获取测量结果
  const measures = performance.getEntriesByName('animation');
  console.log(`Animation took ${measures[0].duration}ms`);
  
  // 清除标记
  performance.clearMarks();
  performance.clearMeasures();
}

// 6. 实际应用：滚动性能优化
function optimizeScrollPerformance() {
  // 使用防抖处理滚动事件
  let scrollTimeout;
  window.addEventListener('scroll', function() {
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(handleScroll, 100);
  });
  
  // 使用IntersectionObserver检测元素可见性，代替scroll事件
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 元素进入视口
        entry.target.classList.add('visible');
        loadImagesIfNeeded(entry.target);
      } else {
        // 元素离开视口
        entry.target.classList.remove('visible');
      }
    });
  }, { threshold: 0.1 }); // 当10%的元素可见时触发
  
  // 监视多个元素
  document.querySelectorAll('.lazy-load').forEach(el => {
    observer.observe(el);
  });
}

// 7. 分层渲染优化示例
function createLayeredAnimation() {
  const element = document.getElementById('animated');
  
  // 促使浏览器为元素创建单独的层
  element.style.willChange = 'transform';
  
  // 更精细的控制：明确告诉浏览器创建哪些合成层
  element.style.transform = 'translateZ(0)'; // 创建硬件加速层
  
  // 动画中只改变transform，让合成器独立工作
  function animate() {
    let progress = 0;
    
    function step(timestamp) {
      progress += 0.01;
      element.style.transform = `translateX(${Math.sin(progress) * 100}px)`;
      
      if (progress < 10) {
        requestAnimationFrame(step);
      }
    }
    
    requestAnimationFrame(step);
  }
  
  animate();
}

## 📝 第七难：表单验证 - 用户输入的"火眼金睛"

问题：如何有效验证用户输入，在不影响用户体验的前提下保证数据质量？

深度技术：

表单验证是前端开发的核心任务，涉及用户体验与数据安全。现代表单验证不仅包括客户端验证，还需要优雅地处理服务端验证结果，以及考虑可访问性和国际化。

从HTML5原生约束验证API，到自定义验证逻辑，再到第三方表单库，掌握表单验证的多种方法，能让你从容应对各种表单场景。

代码示例：

```javascript
// 1. HTML5原生验证
function nativeValidation() {
  // HTML中使用原生属性
  /*
  <form id="native-form" novalidate>
    <input type="text" name="username" required minlength="3" maxlength="20" pattern="[A-Za-z0-9_]+" />
    <input type="email" name="email" required />
    <input type="url" name="website" />
    <input type="number" name="age" min="18" max="120" step="1" />
    <button type="submit">提交</button>
  </form>
  */
  
  // 使用约束验证API
  const form = document.getElementById('native-form');
  
  form.addEventListener('submit', function(e) {
    if (!form.checkValidity()) {
      e.preventDefault();
      
      // 获取所有无效字段并显示错误信息
      const invalidFields = form.querySelectorAll(':invalid');
      invalidFields.forEach(field => {
        // 显示自定义错误信息
        showError(field, getValidationMessage(field));
      });
    }
  });
  
  // 获取自定义验证消息
  function getValidationMessage(field) {
    if (field.validity.valueMissing) {
      return '此字段为必填项';
    } else if (field.validity.typeMismatch) {
      return `请输入有效的${field.type}`;
    } else if (field.validity.tooShort) {
      return `最小长度为${field.minLength}`;
    } 
    // 更多验证类型...
    
    return field.validationMessage;
  }
}

// 2. 自定义表单验证
function customValidation() {
  const form = document.getElementById('custom-form');
  
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const username = form.username.value;
    const password = form.password.value;
    const confirmPassword = form.confirmPassword.value;
    
    // 重置错误信息
    resetErrors();
    
    // 自定义验证规则
    let isValid = true;
    
    // 用户名验证
    if (!/^[a-zA-Z][a-zA-Z0-9_]{2,19}$/.test(username)) {
      showError('username', '用户名必须以字母开头，只包含字母、数字和下划线，长度3-20');
      isValid = false;
    }
    
    // 密码强度验证
    if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(password)) {
      showError('password', '密码至少8位，需包含大小写字母、数字和特殊字符');
      isValid = false;
    }
    
    // 确认密码
    if (password !== confirmPassword) {
      showError('confirmPassword', '两次输入的密码不一致');
      isValid = false;
    }
    
    // 如果验证通过，提交表单
    if (isValid) {
      console.log('表单验证通过，提交数据...');
      // form.submit();
    }
  });
  
  // 实时验证
  form.querySelectorAll('input').forEach(input => {
    input.addEventListener('blur', function() {
      validateField(this);
    });
    
    input.addEventListener('input', function() {
      // 用户开始输入时，移除错误状态
      this.classList.remove('error');
      const errorElement = document.getElementById(`${this.id}-error`);
      if (errorElement) {
        errorElement.textContent = '';
      }
    });
  });
}

// 3. 表单验证器类与异步验证
class FormValidator {
  constructor(formId, options = {}) {
    this.form = document.getElementById(formId);
    this.validators = {};
    this.errors = {};
    this.options = Object.assign({
      realTimeValidation: true,
      validateOnBlur: true,
      errorClass: 'error',
      errorTagName: 'div',
      errorParent: null
    }, options);
    
    this.init();
  }
  
  // 初始化表单验证
  init() {
    this.form.noValidate = true;
    
    this.form.addEventListener('submit', e => {
      e.preventDefault();
      this.validateAll().then(isValid => {
        if (isValid) {
          if (this.options.onSuccess) {
            this.options.onSuccess(this.form);
          } else {
            this.form.submit();
          }
        } else if (this.options.onError) {
          this.options.onError(this.errors, this.form);
        }
      });
    });
    
    if (this.options.realTimeValidation) {
      this.form.querySelectorAll('input, select, textarea').forEach(field => {
        if (this.options.validateOnBlur) {
          field.addEventListener('blur', () => this.validateField(field.name));
        }
        
        field.addEventListener('input', () => {
          this.removeError(field.name);
        });
      });
    }
  }
  
  // 添加验证规则
  addValidator(fieldName, validatorFn, errorMessage) {
    if (!this.validators[fieldName]) {
      this.validators[fieldName] = [];
    }
    
    this.validators[fieldName].push({
      validate: validatorFn,
      message: errorMessage
    });
    
    return this;
  }
  
  // 验证所有字段
  async validateAll() {
    this.clearAllErrors();
    const fieldNames = Object.keys(this.validators);
    
    for (const fieldName of fieldNames) {
      await this.validateField(fieldName);
    }
    
    return Object.keys(this.errors).length === 0;
  }
  
  // 验证单个字段
  async validateField(fieldName) {
    this.removeError(fieldName);
    
    const validators = this.validators[fieldName] || [];
    const field = this.form.elements[fieldName];
    
    if (!field || !validators.length) return true;
    
    const value = field.value;
    
    for (const validator of validators) {
      try {
        // 支持异步验证
        const result = await validator.validate(value, field, this.form);
        
        if (!result) {
          this.showError(fieldName, validator.message);
          return false;
        }
      } catch (error) {
        this.showError(fieldName, error.message || '验证出错');
        return false;
      }
    }
    
    return true;
  }
  
  // 显示错误
  showError(fieldName, message) {
    const field = this.form.elements[fieldName];
    if (!field) return;
    
    this.errors[fieldName] = message;
    
    field.classList.add(this.options.errorClass);
    
    // 创建错误消息元素
    const errorElement = document.createElement(this.options.errorTagName);
    errorElement.id = `${fieldName}-error`;
    errorElement.className = 'validation-error';
    errorElement.textContent = message;
    
    // 添加错误消息到DOM
    const parent = this.options.errorParent ? 
      field.closest(this.options.errorParent) : field.parentNode;
    
    parent.appendChild(errorElement);
  }
  
  // 移除特定字段的错误
  removeError(fieldName) {
    const field = this.form.elements[fieldName];
    if (!field) return;
    
    delete this.errors[fieldName];
    
    field.classList.remove(this.options.errorClass);
    
    const errorElement = document.getElementById(`${fieldName}-error`);
    if (errorElement) {
      errorElement.parentNode.removeChild(errorElement);
    }
  }
  
  // 清除所有错误
  clearAllErrors() {
    Object.keys(this.validators).forEach(fieldName => {
      this.removeError(fieldName);
    });
    
    this.errors = {};
  }
}

// 使用表单验证器类
/*
const validator = new FormValidator('registration-form', {
  onSuccess: (form) => {
    console.log('表单验证成功，提交数据...');
    // 提交表单或AJAX请求
  },
  onError: (errors, form) => {
    console.log('表单验证失败:', errors);
  }
});

// 添加验证规则
validator
  .addValidator('username', 
    value => value.length >= 3 && value.length <= 20, 
    '用户名长度需在3-20之间')
  .addValidator('username', 
    value => /^[a-zA-Z][a-zA-Z0-9_]*$/.test(value), 
    '用户名必须以字母开头，只能包含字母、数字和下划线')
  .addValidator('email', 
    value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), 
    '请输入有效的邮箱地址')
  .addValidator('username', 
    // 异步验证：检查用户名是否已存在
    async (value) => {
      if (!value) return true;
      const response = await fetch(`/api/check-username?username=${encodeURIComponent(value)}`);
      const data = await response.json();
      if (!data.available) {
        throw new Error('该用户名已被占用');
      }
      return true;
    }, 
    '正在检查用户名...');
*/

## 🎨 第八难：Canvas绘图 - 二维空间的"如意金箍棒"

问题：如何在Web页面中创建复杂的图形和动画？Canvas与SVG各有何优劣？

深度技术：

Canvas API提供了底层的2D绘图能力，允许像素级控制，适合复杂图形、游戏和大量元素的渲染。掌握Canvas需要理解绘图上下文、变换矩阵和动画循环等概念。

从基本形状绘制到复杂的粒子系统，Canvas能实现丰富的视觉效果。配合WebGL，更可实现3D渲染，开启Web图形的无限可能。

代码示例：

```javascript
// 基础Canvas示例
function basicCanvas() {
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // 设置画布尺寸为视窗大小
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  // 绘制基本形状
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 100, 100); // 矩形
  
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 5;
  ctx.strokeRect(200, 50, 100, 100); // 描边矩形
  
  // 绘制路径
  ctx.beginPath();
  ctx.arc(400, 100, 50, 0, Math.PI * 2); // 圆形
  ctx.fillStyle = 'green';
  ctx.fill();
  
  // 绘制文本
  ctx.font = '30px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText('Hello Canvas', 50, 200);
  
  // 绘制图像
  const img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 50, 250, 200, 100);
  };
  img.src = 'example.jpg';
}

// 动画与交互
function canvasAnimation() {
  const canvas = document.getElementById('animationCanvas');
  const ctx = canvas.getContext('2d');
  
  // 调整画布尺寸
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  
  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();
  
  // 动画状态
  const particles = [];
  const mouse = { x: 0, y: 0 };
  
  // 创建粒子
  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.size = Math.random() * 5 + 1;
      this.speedX = Math.random() * 3 - 1.5;
      this.speedY = Math.random() * 3 - 1.5;
      this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }
    
    update() {
      this.x += this.speedX;
      this.y += this.speedY;
      
      if (this.size > 0.2) this.size -= 0.1;
    }
    
    draw() {
      ctx.fillStyle = this.color;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fill();
    }
  }
  
  // 处理鼠标事件
  canvas.addEventListener('mousemove', function(e) {
    mouse.x = e.x;
    mouse.y = e.y;
    
    // 创建粒子
    for (let i = 0; i < 5; i++) {
      particles.push(new Particle(mouse.x, mouse.y));
    }
  });
  
  // 动画循环
  function animate() {
    // 半透明背景，形成拖尾效果
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 更新和绘制粒子
    for (let i = 0; i < particles.length; i++) {
      particles[i].update();
      particles[i].draw();
      
      // 移除过小的粒子
      if (particles[i].size <= 0.2) {
        particles.splice(i, 1);
        i--;
      }
    }
    
    requestAnimationFrame(animate);
  }
  
  animate();
}

// 高级Canvas技术：离屏渲染与性能优化
function advancedCanvas() {
  // 主画布
  const mainCanvas = document.getElementById('mainCanvas');
  const mainCtx = mainCanvas.getContext('2d');
  
  // 离屏画布，用于缓存不经常变化的绘制结果
  const offscreenCanvas = document.createElement('canvas');
  const offscreenCtx = offscreenCanvas.getContext('2d');
  
  // 设置画布尺寸
  function setCanvasSize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    mainCanvas.width = width;
    mainCanvas.height = height;
    offscreenCanvas.width = width;
    offscreenCanvas.height = height;
    
    // 预渲染静态背景
    renderBackground();
  }
  
  // 渲染静态背景到离屏画布
  function renderBackground() {
    const width = offscreenCanvas.width;
    const height = offscreenCanvas.height;
    
    // 绘制渐变背景
    const gradient = offscreenCtx.createLinearGradient(0, 0, 0, height);
    gradient.addColorStop(0, '#00b4db');
    gradient.addColorStop(1, '#0083b0');
    
    offscreenCtx.fillStyle = gradient;
    offscreenCtx.fillRect(0, 0, width, height);
    
    // 绘制静态元素
    for (let i = 0; i < 100; i++) {
      const x = Math.random() * width;
      const y = Math.random() * height;
      const radius = Math.random() * 2 + 1;
      
      offscreenCtx.beginPath();
      offscreenCtx.arc(x, y, radius, 0, Math.PI * 2);
      offscreenCtx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      offscreenCtx.fill();
    }
  }
  
  // 动画对象
  const gameObjects = [];
  
  class GameObject {
    constructor() {
      this.x = Math.random() * mainCanvas.width;
      this.y = Math.random() * mainCanvas.height;
      this.speedX = Math.random() * 4 - 2;
      this.speedY = Math.random() * 4 - 2;
      this.size = Math.random() * 30 + 10;
    }
    
    update() {
      this.x += this.speedX;
      this.y += this.speedY;
      
      // 边界碰撞检测
      if (this.x < 0 || this.x > mainCanvas.width) this.speedX *= -1;
      if (this.y < 0 || this.y > mainCanvas.height) this.speedY *= -1;
    }
    
    draw(ctx) {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
      ctx.fill();
      ctx.strokeStyle = 'white';
      ctx.stroke();
    }
  }
  
  // 创建游戏对象
  function createObjects(count) {
    for (let i = 0; i < count; i++) {
      gameObjects.push(new GameObject());
    }
  }
  
  // 主渲染循环
  function render() {
    // 清除主画布
    mainCtx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
    
    // 绘制离屏画布内容到主画布（静态背景）
    mainCtx.drawImage(offscreenCanvas, 0, 0);
    
    // 更新和绘制动态对象
    gameObjects.forEach(obj => {
      obj.update();
      obj.draw(mainCtx);
    });
    
    requestAnimationFrame(render);
  }
  
  // 初始化
  window.addEventListener('resize', setCanvasSize);
  setCanvasSize();
  createObjects(50);
  render();
}

## 🌈 第九难：SVG动画 - 矢量世界的"七十二变"

问题：如何创建高质量的响应式矢量图形和动画？SVG与CSS动画如何搭配使用？

深度技术：

SVG(可缩放矢量图形)是基于XML的图形格式，提供了强大的矢量绘图能力。与Canvas不同，SVG是声明式的，元素保持在DOM中，便于交互和动画处理。

掌握SVG涉及路径语法、变换、滤镜和蒙版等概念。结合CSS和JavaScript，SVG能创建复杂的交互式图形和动画，尤其适合图标、信息图表和响应式插图。

代码示例：

```javascript
// 基础SVG与CSS动画
function basicSVG() {
  // HTML中的SVG结构
  /*
  <svg width="500" height="300" viewBox="0 0 500 300">
    <!-- 基本形状 -->
    <rect x="50" y="50" width="100" height="100" fill="red" class="animated-shape" />
    <circle cx="250" cy="100" r="50" fill="blue" class="pulse" />
    <path d="M350,50 L450,50 L400,150 Z" fill="green" class="spin" />
    
    <!-- 文字 -->
    <text x="100" y="200" font-family="Arial" font-size="24" fill="black">
      SVG文本
    </text>
    
    <!-- 组合元素 -->
    <g class="group" transform="translate(50, 220)">
      <rect width="20" height="20" fill="purple" />
      <rect x="30" width="20" height="20" fill="orange" />
      <rect x="60" width="20" height="20" fill="teal" />
    </g>
  </svg>
  */
  
  // CSS动画
  /*
  <style>
    .animated-shape {
      transition: all 0.3s ease;
    }
    
    .animated-shape:hover {
      transform: scale(1.2);
      fill: darkred;
    }
    
    .pulse {
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { r: 50; }
      50% { r: 60; fill: lightblue; }
      100% { r: 50; }
    }
    
    .spin {
      transform-origin: 400px 100px;
      animation: spin 5s linear infinite;
    }
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    .group rect {
      transition: all 0.5s ease;
    }
    
    .group:hover rect {
      height: 40px;
    }
  </style>
  */
}

// SVG路径动画与描边效果
function pathAnimations() {
  // 路径描边动画
  /*
  <svg width="500" height="300">
    <path 
      d="M100,100 C150,50 250,50 300,100 S400,150 450,100" 
      stroke="black" 
      stroke-width="3" 
      fill="none"
      class="draw-path" />
  </svg>
  
  <style>
    .draw-path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: draw 3s linear forwards;
    }
    
    @keyframes draw {
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
  */
  
  // JavaScript控制SVG动画
  document.querySelectorAll('.morph-shape').forEach(shape => {
    let toggle = false;
    
    shape.addEventListener('click', function() {
      const paths = [
        "M50,50 L150,50 L150,150 L50,150 Z", // 方形
        "M50,100 L100,50 L150,100 L100,150 Z"  // 菱形
      ];
      
      toggle = !toggle;
      
      // 使用SMIL动画
      const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
      animate.setAttribute('attributeName', 'd');
      animate.setAttribute('from', toggle ? paths[0] : paths[1]);
      animate.setAttribute('to', toggle ? paths[1] : paths[0]);
      animate.setAttribute('dur', '0.5s');
      animate.setAttribute('fill', 'freeze');
      
      // 移除旧动画，添加新动画
      shape.innerHTML = '';
      shape.appendChild(animate);
      animate.beginElement();
    });
  });
}

// 高级SVG技术：滤镜、蒙版与交互
function advancedSVG() {
  // 创建SVG过滤器
  /*
  <svg width="0" height="0">
    <defs>
      <!-- 发光滤镜 -->
      <filter id="glow">
        <feGaussianBlur stdDeviation="5" result="blur" />
        <feColorMatrix in="blur" type="matrix" values="
          1 0 0 0 0
          0 1 0 0 0
          0 0 1 0 0
          0 0 0 20 -5"
        />
      </filter>
      
      <!-- 波纹滤镜 -->
      <filter id="wave" x="-20%" y="-20%" width="140%" height="140%">
        <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" seed="1">
          <animate 
            attributeName="baseFrequency" 
            values="0.01;0.02;0.01" 
            dur="10s" 
            repeatCount="indefinite" />
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="20" />
      </filter>
      
      <!-- 创建渐变 -->
      <linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ff0000" />
        <stop offset="14%" stop-color="#ff7f00" />
        <stop offset="28%" stop-color="#ffff00" />
        <stop offset="42%" stop-color="#00ff00" />
        <stop offset="56%" stop-color="#0000ff" />
        <stop offset="70%" stop-color="#4b0082" />
        <stop offset="84%" stop-color="#8f00ff" />
        <stop offset="100%" stop-color="#ff0000" />
      </linearGradient>
      
      <!-- 创建蒙版 -->
      <mask id="circleMask">
        <circle cx="250" cy="150" r="100" fill="white" />
      </mask>
    </defs>
  </svg>
  
  <!-- 使用滤镜和渐变 -->
  <svg width="500" height="300">
    <!-- 应用发光效果 -->
    <circle cx="100" cy="100" r="50" fill="purple" filter="url(#glow)" />
    
    <!-- 应用波纹效果 -->
    <rect x="200" y="50" width="100" height="100" fill="blue" filter="url(#wave)" />
    
    <!-- 应用渐变 -->
    <rect x="350" y="50" width="100" height="100" fill="url(#rainbow)" />
    
    <!-- 应用蒙版 -->
    <rect x="150" y="50" width="200" height="200" fill="url(#rainbow)" mask="url(#circleMask)" />
  </svg>
  */
  
  // 交互式SVG：可视化数据图表
  class SVGChart {
    constructor(containerId) {
      this.container = document.getElementById(containerId);
      this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      this.svg.setAttribute('width', '100%');
      this.svg.setAttribute('height', '400');
      this.container.appendChild(this.svg);
      
      this.margins = {top: 30, right: 30, bottom: 50, left: 50};
      this.width = this.svg.clientWidth - this.margins.left - this.margins.right;
      this.height = 400 - this.margins.top - this.margins.bottom;
      
      // 创建主图表组
      this.g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      this.g.setAttribute('transform', `translate(${this.margins.left},${this.margins.top})`);
      this.svg.appendChild(this.g);
      
      // 响应窗口大小变化
      window.addEventListener('resize', this.resize.bind(this));
    }
    
    resize() {
      this.width = this.svg.clientWidth - this.margins.left - this.margins.right;
      this.render();
    }
    
    setData(data) {
      this.data = data;
      this.render();
      return this;
    }
    
    render() {
      // 清除旧内容
      this.g.innerHTML = '';
      
      if (!this.data || !this.data.length) return;
      
      const maxValue = Math.max(...this.data.map(d => d.value));
      const barWidth = this.width / this.data.length - 10;
      
      // 绘制水平线
      for (let i = 0; i <= 5; i++) {
        const y = this.height - (i / 5) * this.height;
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', 0);
        line.setAttribute('y1', y);
        line.setAttribute('x2', this.width);
        line.setAttribute('y2', y);
        line.setAttribute('stroke', '#ccc');
        line.setAttribute('stroke-dasharray', '5,5');
        this.g.appendChild(line);
        
        // 添加Y轴标签
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', -10);
        text.setAttribute('y', y);
        text.setAttribute('text-anchor', 'end');
        text.setAttribute('alignment-baseline', 'middle');
        text.setAttribute('font-size', '12px');
        text.textContent = Math.round((i / 5) * maxValue);
        this.g.appendChild(text);
      }
      
      // 绘制柱状图
      this.data.forEach((d, i) => {
        const barHeight = (d.value / maxValue) * this.height;
        const x = i * (barWidth + 10);
        const y = this.height - barHeight;
        
        // 创建柱状
        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute('x', x);
        rect.setAttribute('y', y);
        rect.setAttribute('width', barWidth);
        rect.setAttribute('height', barHeight);
        rect.setAttribute('fill', d.color || '#4682b4');
        rect.setAttribute('rx', '5');
        rect.setAttribute('ry', '5');
        rect.classList.add('bar');
        
        // 动画效果
        rect.style.opacity = 0;
        setTimeout(() => {
          rect.style.transition = 'opacity 0.5s, height 0.5s, y 0.5s';
          rect.style.opacity = 1;
        }, i * 100);
        
        // 添加交互效果
        rect.addEventListener('mouseover', function() {
          this.setAttribute('fill', '#ff7f50');
          tooltip.style.display = 'block';
          tooltip.setAttribute('transform', `translate(${x + barWidth/2},${y - 30})`);
          tooltipText.textContent = d.value;
        });
        
        rect.addEventListener('mouseout', function() {
          this.setAttribute('fill', d.color || '#4682b4');
          tooltip.style.display = 'none';
        });
        
        this.g.appendChild(rect);
        
        // X轴标签
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', x + barWidth/2);
        text.setAttribute('y', this.height + 20);
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('font-size', '12px');
        text.textContent = d.label;
        this.g.appendChild(text);
      });
      
      // 创建工具提示
      const tooltip = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      tooltip.style.display = 'none';
      
      const tooltipBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      tooltipBg.setAttribute('x', -30);
      tooltipBg.setAttribute('y', -25);
      tooltipBg.setAttribute('width', '60');
      tooltipBg.setAttribute('height', '25');
      tooltipBg.setAttribute('rx', '5');
      tooltipBg.setAttribute('fill', 'black');
      tooltipBg.setAttribute('opacity', '0.7');
      
      const tooltipText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      tooltipText.setAttribute('x', '0');
      tooltipText.setAttribute('y', '-8');
      tooltipText.setAttribute('text-anchor', 'middle');
      tooltipText.setAttribute('fill', 'white');
      tooltipText.setAttribute('font-size', '12px');
      
      tooltip.appendChild(tooltipBg);
      tooltip.appendChild(tooltipText);
      this.g.appendChild(tooltip);
    }
  }
  
  // 使用示例
  /*
  const chart = new SVGChart('chart-container');
  chart.setData([
    {label: 'A', value: 50, color: '#4682b4'},
    {label: 'B', value: 80, color: '#5f9ea0'},
    {label: 'C', value: 30, color: '#6495ed'},
    {label: 'D', value: 70, color: '#7b68ee'},
    {label: 'E', value: 45, color: '#6a5acd'}
  ]);
  */
}