爲什麼這個window.innerheight的表現如此糟糕？

我正在測試一個我的朋友注意到的測試用例。他正在使用window.innerheight循環，並且fps有很大的下降。爲什麼這個window.innerheight的表現如此糟糕？

這裏是鏈接到jsperf我創建測試它http://jsperf.com/innerheight

唯一的解釋我能想出的是，這是一個getter，並計算實際高度，在每次調用。是對的嗎？任何文件，我可以驗證這一點？

2012-07-14 Amit

window.innerheight是一個getter，然後在.innerheight後面有一個函數，當你保存一個變量時，你只需保存結果 – GTSouza 2012-07-14 19:54:00

在您的第一個循環（innerheight）中，您正在訪問對象屬性並將其分配給h。在第二個循環（緩存）中，您只有h。當然，緩存的會更快。

2012-07-14 19:56:16 Will

那麼這就意味着如果我這樣做，'var h = {a：window.innerheight }'並且訪問'ha'它也會很慢，因爲我們再次訪問一個屬性？ – Amit 2012-07-14 20:11:58

是的，訪問對象屬性總是比直接訪問變量慢。 – Will 2012-07-14 20:21:55

好吧，是的，但差別很大？ – Amit 2012-07-15 06:47:42

這個問題發佈幾年前，但以防萬一其他人在這裏遇到類似的結果。

從這個blog：

的問題是WebKit的喜歡重新計算DOM的佈局幾乎你會使用類似的東西getBoundingClientRect每一次。（即使得到window.innerHeight/innerWidth將強制重新計算）...所有調用來從DOM獲取任何計算的維度應緩存或避免。

在初始化和每次調整大小時緩存窗口大小都顯着改善了我的性能。

2016-10-26 21:34:02 user2521870

要檢測此類性能問題，您可以使用Chrome devTools Timeline選項卡。它顯示重新佈局和repaint的 – 2017-04-13 08:52:54

回答