面试题：JavaScript 事件循环与单线程模型对前端性能的影响

Question

结合实际项目经验，谈谈 JavaScript 的事件循环和单线程模型会在哪些方面影响前端性能，你采取过什么优化措施来应对这些影响？

Answer 1

影响前端性能的方面

1. 阻塞问题：由于 JavaScript 是单线程，当执行一段复杂或耗时较长的同步代码时，会阻塞后续代码执行以及页面渲染。例如在处理大数据量计算时，页面会出现卡顿，用户交互（如点击、滚动等）响应不及时。
2. 事件队列堆积：事件循环中，事件队列可能会因为大量事件快速涌入而堆积。比如在频繁触发滚动事件或鼠标移动事件时，如果事件处理函数复杂，就会导致事件处理不及时，影响用户体验。
3. 动画与渲染性能：单线程导致动画和渲染与 JavaScript 代码执行共用线程。若 JavaScript 执行时间过长，会抢占动画和渲染的时间片，造成动画卡顿，页面渲染不流畅。

优化措施

1. Web Workers：将一些计算密集型任务（如复杂的数学计算、数据处理等）放到 Web Workers 中执行。Web Workers 允许 JavaScript 开启新的线程，在后台运行脚本，不影响主线程的事件循环，从而避免阻塞页面渲染和用户交互。例如在处理大数据量排序时，可以创建一个 Web Worker 来执行排序任务，主线程继续处理其他用户交互。
2. 防抖与节流：对于频繁触发的事件（如滚动、resize、input 等），使用防抖（Debounce）和节流（Throttle）技术。防抖是指在事件触发后，等待一定时间，如果在这段时间内事件再次触发，则重新计时，只有在规定时间内没有再次触发事件，才执行事件处理函数。节流是指在一定时间间隔内，只允许事件处理函数执行一次。例如，对于窗口滚动事件，可以使用节流技术，设置每 200 毫秒执行一次处理函数，避免因频繁触发导致事件队列堆积。
3. 优化代码执行顺序：将耗时任务尽量推迟到页面渲染完成后执行，或者将复杂任务分解成多个小任务，通过 setTimeout 或 requestIdleCallback 等方法，利用事件循环的空闲时间逐步执行。例如，可以把一些初始化数据的复杂计算任务放在 setTimeout 中执行，让页面先完成渲染，提高用户感知的性能。
4. 使用微任务（Microtask）：合理利用 Promise 等产生的微任务。微任务会在当前宏任务执行结束后，下一个宏任务开始之前执行，且在同一个事件循环中。例如在处理多个异步操作的顺序执行时，使用 Promise 链来确保任务按顺序执行，并且利用微任务的特性，尽量减少对主线程的阻塞。