为什么这个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

回答