得到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); 
}); 

這會使您的計算代價很高的代碼在每個動畫幀中最多運行一次。