请解释浏览器从HTML解析到页面渲染的完整流程，并说明事件委托在事件处理中的优势，以及如何利用事件委托优化前端性能？

1) 【一句话结论】：浏览器从HTML解析到页面渲染的流程为解析HTML生成DOM树→结合CSS生成CSSOM树→构建渲染树→经历布局、绘制、复合阶段；事件委托通过事件冒泡机制在父元素上统一处理子元素事件，减少事件监听器数量，优化前端性能。

2) 【原理/概念讲解】：浏览器解析HTML时，逐行解析标签，构建DOM树（节点树，包含元素、文本等节点，如<div><p>内容</p></div>生成对应节点）；解析CSS规则后，生成CSSOM树（样式树，将样式应用到DOM节点）；DOM树与CSSOM树合并为渲染树（仅包含可见元素，隐藏元素不参与），再经历布局（计算每个元素的位置和大小，触发Reflow）、绘制（将渲染树绘制到屏幕，触发Paint）、复合（将多个图层复合，提升渲染性能）。事件处理流程中，事件触发后，事件冒泡（从子元素向父元素传播），事件捕获（从父到子，现代浏览器不常用），事件目标（事件实际发生的元素）。事件委托的核心是利用事件冒泡，在父元素上绑定事件处理函数，处理子元素的事件，因为子元素的事件会冒泡到父元素，这样只需一个事件监听器，减少内存占用和事件处理开销（类比：就像在教室门口设置一个接待员，处理所有学生的问询，无需每个学生都找老师，减少等待时间）。

3) 【对比与适用场景】：

特性	事件委托	直接绑定事件
事件处理数量	1个监听器，处理多个子元素	每个子元素1个监听器
优势	减少内存占用，提升性能（尤其子元素动态添加时）	事件处理直接，响应快（子元素固定时）
使用场景	子元素动态添加，大量子元素（如列表项动态增删）	子元素数量少且固定，事件处理简单（如按钮点击）
注意点	需考虑事件冒泡顺序，避免事件冲突；需正确判断事件目标（e.target）	子元素变化时需重新绑定事件监听器；事件处理逻辑简单

4) 【示例】：伪代码展示事件委托：

// 父容器（ul）绑定click事件
const parent = document.getElementById('parent');
parent.addEventListener('click', (e) => {
  // 检查事件目标是否是子元素（如li）
  if (e.target.matches('.child')) {
    console.log('点击了子元素:', e.target.textContent);
  }
});
// 动态添加子元素
const newChild = document.createElement('li');
newChild.className = 'child';
newChild.textContent = '新子元素';
parent.appendChild(newChild);
// 新子元素点击时，会冒泡到父元素，触发事件处理

5) 【面试口播版答案】：浏览器从HTML解析到页面渲染的流程是：首先解析HTML生成DOM树，再结合CSS生成CSSOM树，形成渲染树，然后经历布局（计算位置大小）、绘制（绘制到屏幕）、复合（图层复合）阶段。事件处理中，事件委托通过事件冒泡机制，在父元素上统一处理子元素事件，减少事件监听器数量。比如，父容器绑定click事件，处理子元素的点击，这样即使子元素动态添加，也不需要为每个子元素单独绑定事件，提升性能。

6) 【追问清单】：

• 问：事件委托是否适用于所有事件类型？比如focus、blur等是否冒泡？
  回答：事件委托主要适用于冒泡事件（如click、mouseover），因为事件会冒泡到父元素。而像focus、blur等事件不冒泡，所以事件委托不适用。
• 问：事件委托和事件捕获的区别？
  回答：事件捕获是从父到子，事件冒泡是从子到父，事件委托通常利用事件冒泡（从子到父），在父元素上处理子元素事件。
• 问：事件委托的兼容性如何？是否所有浏览器都支持？
  回答：事件委托（利用事件冒泡）在所有现代浏览器（IE9+）都支持，兼容性好。
• 问：事件委托是否会影响事件处理顺序？
  回答：不会，事件委托通过冒泡顺序处理，与直接绑定的顺序一致，只是事件源不同。
• 问：如何优化事件委托的性能？比如事件处理函数是否需要优化？
  回答：事件处理函数应尽量简洁，避免复杂计算，减少事件处理时间，提升性能。

7) 【常见坑/雷区】：

• 事件委托不适用于所有事件，比如focus、blur等不冒泡的事件，不能通过父元素处理。
• 事件委托中，事件目标（e.target）的判断很重要，需要正确匹配子元素，避免误处理父元素或其他元素。
• 动态添加子元素时，事件委托仍然有效，但需要确保事件处理函数中正确判断目标元素，否则可能处理错误元素。
• 事件委托的绑定时机：如果父元素在子元素之前创建，事件委托可能无法处理子元素事件，因为子元素事件冒泡到父元素时，父元素的事件监听器已经绑定。
• 事件委托可能影响事件处理性能，如果事件处理函数过于复杂，反而降低性能，所以需平衡事件委托的简化与处理函数的效率。