scrollHeight 读取导致重排与长任务拆分
scrollheight 的读取会强制浏览器同步执行布局（reflow），如果频繁调用或数据量大，容易阻塞主线程。解决思路是将 dom 操作与计算逻辑分离，利用 requestanimationframe 将重排请求推迟到下一帧，或者使用 web worker 处理纯数据计算，避免直接读写 dom。
requestAnimationFrame 实现异步读取
通过 requestAnimationFrame 可以将读取操作放入下一帧渲染前执行，虽然仍可能触发重排，但能确保 UI 更新优先，减少卡顿感。适用于需要立即反馈的场景。
const element = document.getElementById('container');
function readScrollHeight() {
return new Promise((resolve) => {
requestAnimationFrame(() => {
const height = element.scrollHeight;
resolve(height);
});
});
}
readScrollHeight().then(h => console.log('Height:', h));Web Worker 处理非 DOM 数据计算
如果 scrollHeight 的值用于复杂计算，可将数据提取后传给 Web Worker，Worker 中不操作 DOM，仅做数学运算，结果回传主线程再更新视图。这彻底避免了主线程被计算阻塞。
立即学习“Java免费学习笔记（深入）”；
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: [1, 2, 3] });
worker.onmessage = (e) => console.log('Result:', e.data);
// worker.js
self.onmessage = (e) => {
let sum = 0;
for (let i = 0; i < e.data.length; i++) {
sum += e.data[i];
}
self.postMessage(sum);
};scrollHeight 为 0 时的条件判断
当元素隐藏（display:none）或高度为 0 时，scrollHeight 返回 0。此时需检查元素是否可见，若不可见，应先临时显示或获取 computed style 中的 height 值作为替代方案。
