在 javascript 中，读取 innerwidth 会强制浏览器进行同步布局（reflow），如果频繁读取会导致主线程阻塞。要拆分长任务，核心做法是将计算逻辑与 dom 操作分离，利用 requestanimationframe 或 settimeout 将布局相关的读取操作推迟到下一帧的渲染阶段执行，从而避免在用户交互或动画循环中直接触发重排。
如何避免在事件处理中直接读取 innerWidth
直接在点击或滚动事件中读取 window.innerWidth 会立即触发布局计算。解决办法是在事件回调中仅收集数据，通过 requestAnimationFrame 调度读取操作，确保读取发生在浏览器准备绘制新帧的时刻，此时布局已稳定且不会造成额外的同步阻塞。
let width = 0;
function handleResize() {
// 不直接读取，而是请求下一帧执行
requestAnimationFrame(() => {
width = window.innerWidth;
console.log('Layout stable, width:', width);
});
}
window.addEventListener('resize', handleResize);
上述代码在窗口大小改变时，不会立即执行读取，而是等待浏览器进入下一帧。这样可以将布局读取从事件处理路径中移除，减少单次任务的耗时。
立即学习“Java免费学习笔记（深入）”；
如何在动画循环中优化尺寸读取
在 requestAnimationFrame 动画循环中，如果在每一帧都读取 innerWidth，会干扰浏览器的合成器优化。正确的做法是只在必要时读取，或者将读取操作合并到特定的逻辑分支中，例如仅在窗口状态变化时才更新缓存值，而不是每帧重复读取。
let lastWidth = window.innerWidth;
function animate(timestamp) {
const currentWidth = window.innerWidth;
// 只有当宽度发生变化时才进行复杂计算
if (currentWidth !== lastWidth) {
lastWidth = currentWidth;
updateLayout(currentWidth);
}
render();
requestAnimationFrame(animate);
}
function updateLayout(w) {
// 基于宽度的复杂计算
console.log('Updating layout for width:', w);
}
requestAnimationFrame(animate);
该示例展示了在动画循环中如何通过比较当前宽度与上次记录的宽度，来决定是否执行昂贵的布局相关计算。这种策略减少了不必要的读取和计算，提高了动画性能。
当 innerWidth 读取导致主线程阻塞时如何处理
如果 innerWidth 的读取已经导致主线程明显卡顿，说明存在大量的样式计算或 DOM 遍历。此时应检查是否有其他 CSS 属性触发了重排，并考虑使用 getBoundingClientRect() 替代部分场景下的 innerWidth，或者将计算结果缓存起来，避免重复读取。此外，可以使用 Web Worker 进行非 DOM 相关的计算，但注意 Worker 无法直接访问 window 对象，因此需要将宽度值传递给 Worker 进行处理。
