Question

具体来说，这是代码：

var style = el.style;
var x = style.left;
var y = style.top;

比这个更有效：

var x = el.style.left;
var y = el.style.top;

我最近和同事谈过这件事。第一个片段保存了一个getter调用，因为它缓存了样式对象，但它创建了另一个对样式对象的引用，并使用了另一个变量。

Answer 1

这并不重要。

刚刚在jsperf上为你写了一个测试，看看...脖子和脖子，几乎没有区别（我的机器没有统计学上的显着差异）：

欢呼声。

Answer 2

这个答案取决于你真正关心的问题：

如果性能是您主要关注的问题，那么您必须在所有重要浏览器中测量这两种情况并评估这些测量结果。
如果您只是想要遵循一个好的经验法则，那么我认为创建一个新变量只是为了两个这样的用途可能不值得，除非它是一个性能敏感的代码片段，其中案例规则＃1获胜。
如果您正在寻找代码简单性，紧凑性和速度之间的良好平衡，那么我会说为这个简单的情况避免额外的变量和额外的代码行。性能差异不会很大，所以为什么要增加复杂性和更多代码。
如果您正在寻找正确性问题，那么这完全是个人意见，双方都可以争论。我认为＃3胜。如果没有别的事情可以推动你的决定，那就去追求简单。

Answer 3

我认为这是过早优化，除非你遇到某种性能问题我不会担心你采取哪种方法（特别是对于像这样小的代码）。如果样式属性已经被DOM内部缓存，我不会感到惊讶，因此每次访问它时都不会有任何额外的开销。

建议缓存仅在JavaScript中使用两次的对象

要回答你的问题 - 如果在访问它时有很多开销，那么通常这是一个好主意缓存，例如也许它是每次访问时创建的，或者导致对集合进行昂贵的查找。但是，如果它纯粹直接返回对象，那么我认为没有任何好处。

如果你得到一个精确的答案，那么获得它的唯一方法就是实际对两个版本进行基准测试。但是，对于您的特定代码，我会说任何性能差异都可以忽略不计。但是，引入另一个变量将为编译器增加不必要的开销（虽然很小）。