具体来说,是这段代码:
var style = el.style;
var x = style.left;
var y = style.top;
比这个更有效:
var x = el.style.left;
var y = el.style.top;
我最近和一位同事讨论过这个问题。第一个片段保存了一个 getter 调用,因为它缓存了样式对象,但它创建了一个对样式对象的引用并使用了一个变量。
具体来说,是这段代码:
var style = el.style;
var x = style.left;
var y = style.top;
比这个更有效:
var x = el.style.left;
var y = el.style.top;
我最近和一位同事讨论过这个问题。第一个片段保存了一个 getter 调用,因为它缓存了样式对象,但它创建了一个对样式对象的引用并使用了一个变量。
这没什么大不了的。
刚刚在jsperf上给你写了个测试看看……并驾齐驱,几乎没有区别(在我的机器上没有统计学上的显着差异):
http://jsperf.com/alias-vs-dot-lookup-speed
干杯。
这个答案取决于你真正关心的问题:
我会将其归类为过早优化,除非您遇到某种性能问题,否则我不会担心您在此处采用哪种方法(尤其是对于像这样小的代码)。如果样式属性已经在内部被 DOM 缓存,我不会感到惊讶,因此每次访问它时甚至可能不会有任何额外的开销。
是否建议缓存仅在 JavaScript 中使用两次的对象
回答您的问题 - 如果在访问它时有很多开销,那么通常缓存是一个好主意,例如,它可能是在每次访问时创建的,或者导致对集合进行昂贵的查找。但是,如果它纯粹直接返回对象,那么我看不到任何好处。
如果您在获得精确答案之后,那么获得答案的唯一方法就是对两个版本进行实际基准测试。但是,对于您的特定代码,我会说任何性能差异都可以忽略不计。但是,引入另一个变量会为编译器增加不必要的开销(尽管很小)。