javascript - 获取 scrollTop、获取 offsetHeight 和 getStyle 需要很长时间

Question

影响我性能的前三项操作是:

• 获取滚动条
• 获取偏移高度
• Ext.getStyle

为了解释我的应用程序中发生了什么:我有一个网格，其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时，它运行很慢，比如添加行，或向嵌套网格添加行。

我不知道如何优化这 3 个调用，我已经为这个问题搜索了很多东西。谁能解释为什么获取样式如此昂贵？

Answer 1

一个应该有帮助的优化是只在浏览器重绘时获取值。简而言之，javascript 事件循环是这样工作的:当进入一个函数时，它会控制 CPU 直到函数结束。如果发生另一个事件(如窗口调整大小、ajax 请求完成或单击按钮)，该事件将被推送到事件队列中。当一个函数完成并且 CPU 空闲时，事件队列就会从队列中弹出一个东西并将 CPU 交给它。

执行循环的一部分是“动画帧”部分。您可以设置一些代码在下一次重绘之前运行。这是一些文档:https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

这对您有何帮助:

当用户执行缓慢的操作时，创建一个节流函数并将其放入 requestAnimationFrame 回调中。像这样:

var rafCallback = function() {
  doComputationallyExpensiveThings();
  rafCallbackEnabled = false;
};
var rafCallbackEnabled = false;
document.on('user does a thing', function() {
  if (rafCallbackEnabled) return;
  rafCallbackEnabled = true;
  window.requestAnimationFrame(rafCallback);
});

这将使您的计算量大的代码在每个动画帧中最多运行一次。