Chrome DevTools性能面板Layout Forced为何指向非样式修改代码行？

• 强制同步布局的触发点是「读取布局相关属性」的操作，而非修改元素样式的操作，这是核心原因。
• 执行第69行代码m.style.top = pos + 'px';时，浏览器不会立刻触发布局计算，仅会标记当前DOM存在需要重排的变更，将布局计算任务加入待执行队列，等待当前JavaScript同步代码执行完毕、下一帧渲染前统一处理。
• 只有在同一个同步执行的JavaScript任务中，修改样式后立刻读取需要布局计算才能返回准确值的属性（常见的包括offsetWidth、clientTop、getBoundingClientRect()、scrollTop等），浏览器才会为了返回正确的属性值，中断当前代码执行，强制立刻完成布局计算，这才是强制布局的真正触发时机。
• 你参考的案例中第70行就是这类读取布局属性的代码，因此DevTools会将强制布局的触发链接指向第70行，而非只是标记了待重排的第69行。

内容的提问来源于stack exchange，提问作者alancc