面试题答案
一键面试1. 批量操作 DOM
- 原理：减少对 DOM 树的重排和重绘次数。当对 DOM 进行多次修改时，每次修改都会触发浏览器重新计算布局（重排）和重新绘制（重绘），开销较大。将多个 DOM 修改操作合并，一次性应用到 DOM 上，可降低这种开销。
- 适用场景：适用于需要对多个 DOM 元素进行连续修改，比如同时修改多个元素的样式、属性等情况。例如，要一次性添加多个列表项到一个无序列表中。
2. 使用 DocumentFragment
- 原理：DocumentFragment 是一个轻量级的 DOM 容器，它存在于内存中，并不在 DOM 树里。对 DocumentFragment 进行操作不会触发页面的重排和重绘。当对 DocumentFragment 的操作完成后，再将其添加到 DOM 树中，只会触发一次重排和重绘。
- 适用场景：适合大量 DOM 元素的添加或删除操作。比如在动态生成一个包含许多子元素的复杂菜单时，先在 DocumentFragment 中构建菜单结构，最后再将其插入到页面的 DOM 中。
3. 缓存 DOM 查询结果
- 原理：每次使用
document.querySelector或类似方法查询 DOM 时，浏览器都需要遍历整个 DOM 树来找到匹配的元素，这是一个相对耗时的操作。缓存查询结果，避免重复查询相同的 DOM 元素，可以提高性能。 - 适用场景：当需要多次访问同一个 DOM 元素时，比如在一个循环中多次操作某个特定的元素，就应该先缓存该元素的查询结果。
4. 事件委托
- 原理：将事件处理程序绑定到父元素上，而不是每个子元素。当子元素触发事件时，事件会冒泡到父元素，父元素通过事件对象的
target属性判断是哪个子元素触发的事件，从而执行相应的处理逻辑。这样减少了事件处理程序的数量，降低内存开销，同时也提高了性能。 - 适用场景：适用于有大量子元素且事件处理逻辑相同的情况，比如一个包含许多列表项的无序列表，每个列表项都有点击事件，就可以将点击事件委托给父级的
<ul>元素。
5. 避免频繁读取和修改样式
- 原理：每次读取元素的样式属性（如
element.style.width），浏览器可能需要计算最新的布局和样式信息。如果紧接着又修改样式，会导致浏览器再次计算布局和重绘，增加性能开销。将读取和修改操作分开，可以减少这种不必要的计算。 - 适用场景：在对元素样式进行一系列复杂操作时，先集中读取样式信息，然后再统一修改样式。例如，要改变一个元素的多个样式属性，先获取其当前的
width、height等信息，然后一次性设置新的样式。