得到scrollTop的，得到的offsetHeight和getStyle都采取了很长一段时间

Question

前三名操作被杀死了我的表现是：

• 得到scrollTop的
• 得到的offsetHeight
• 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); 
}); 

这会使您的计算代价很高的代码在每个动画帧中最多运行一次。