JS中使用Math.ceil对DOM属性取整后相加，结果较预期多1的异常问题

问题本质不是Math.ceil计算错误，是两个前端运行机制叠加导致的取值错位：

• 布局类DOM属性是动态可变值：scrollTop、clientHeight这类和渲染布局绑定的属性，不是存好的静态常量。它会随着浏览器渲染流程、滚动事件触发、重排计算不断更新，代码在不同执行时机读同一个属性，拿到的很可能是不同的值。
• 浏览器DevTools的日志是惰性求值的：直接把带DOM读取的表达式传给console.log时，控制台不会在打日志的瞬间把计算结果固定存下来。等你后面打开控制台看这条日志的时候，它才会重新实时读当前的DOM值、重新算一遍表达式，再把结果显示给你。

把运行流程完整还原就能对上偏差：

1. 代码执行到第一行，读clientHeight算出来50，此时scrollTop刚好是80整，这条日志先暂存着，不做最终显示。
2. 第一行执行完、到第三行加法语句跑起来的几微秒间隙，浏览器刚好把之前排进渲染队列的滚动更新跑完，scrollTop从80变成了80.1111145019531。
3. 第三行执行加法时，重新读DOM算：Math.ceil(clientHeight)=50，Math.ceil(更新后的scrollTop)=Math.ceil(80.111...)=81，最终算出来50+81=131。
4. 等后来打开控制台翻日志的时候，两条单值日志才开始重新计算展示——这时候滚动状态已经稳定，scrollTop又回到了80附近，所以看到的单值日志都是50、80，完全和第三行加法执行时的真实计算值对不上，才会觉得“单步算都是对的，加起来就多了1”。

• 读DOM的时候立刻把值固化成独立临时变量，别在加法这类复合表达式里反复读动态DOM：

  const clientH = Math.ceil(e.currentTarget.clientHeight)
  const top = Math.ceil(e.currentTarget.scrollTop)
  // 后续所有计算都用固化后的临时值，不会因为DOM动态变化错位
  console.log(clientH, top, clientH + top)
  

• 打日志的时候别直接传DOM属性表达式，要么用上面固化的临时变量，要么把值转成字符串、固定精度数字再输出，从根源上躲开DevTools惰性显示的误导。
• 如果需要拿到和渲染完全同步的稳定滚动值，读scrollTop之前可以主动读一次元素的offsetHeight，强制浏览器把渲染队列里待更新的布局结果同步到DOM上，避免读到还在排队没落地的跳变值。

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