Javascript - 直接访问元素或设置变量哪个更快？

Question

我正在使用HTML<audio>元素，我想知道直接引用元素的属性是否比设置变量更快(或完全相同)。例如，如果我使用audio.ontimeupdate事件并在函数中引用audio.currentTime几次。哪个更快:

seconds = (parseInt(track.currentTime % 60)).toLocaleString(undefined, {minimumIntegerDigits: 2});
minutes = parseInt((track.currentTime / 60) % 60);
duration.innerHTML = minutes + ':' + seconds ;
playhead.value = track.currentTime * (1000 / track.duration);

或

let CurrentTime = track.currentTime;
seconds = (parseInt(CurrentTime % 60)).toLocaleString(undefined, {minimumIntegerDigits: 2});
minutes = parseInt((CurrentTime / 60) % 60);
duration.innerHTML = minutes + ':' + seconds ;
playhead.value = CurrentTime * (1000 / track.duration);

或者根本没有区别?显然，这是每秒更新多次，这就是为什么我想知道。

我只是问，因为当我访问DOM元素，这显然是不同的，我设置一个变量，如果使用不止一次。

Answer 1

或者根本没有区别?

在绝大多数情况下根本没有区别。如果存在差异，则只有在这段代码不合理地频繁运行(每秒数千次)时才能检测到。

但即使在这种情况下，瓶颈也会是

duration.innerHTML =

部分，因为DOM操作非常非常昂贵。

除非这段代码不合理地频繁运行，否则不值得担心。在我看来，最好是编写尽可能可维护的代码，而不用太担心性能。

如果您要优化这段代码的性能，我建议保存innerHTML值，这样您就不会无条件地运行

duration.innerHTML = minutes + ':' + seconds ;

每次都使用，但只在需要更新section时使用。(或者使用像React这样的框架为你自动优化)

Answer 2

@CertainPerformance的回答是正确的。这是一个微优化，对于每秒只运行一次的代码来说，这是一个过早的优化。

另一方面，

1. 重复parseInt是一个巨大的性能瓶颈。track.currentTime是字符串吗?如果它代表一个数字就不应该是。我假设track.currentTime是播放的秒数。

2. 使用innerHTML是一个可怕的错误。如果使用外部输入，甚至会导致安全问题。你不需要设置HTML内容，你只需要设置元素的文本，通常你是这样做的:

   duration.textContent = `${minutes}:${seconds}`;
   

   ^{(为了更方便，我也使用了模板字面值)}

   但是，为了避免在时钟的每一个刻度上创建一个新的文本节点，您可能需要单独管理一个Text节点。

这是:

const durationTextNode = document.createTextNode();
duration.appendChild(durationTextNode);
function onTick(track) {
const trackProgress = track.currentTime * (1000 / track.duration);
const seconds = track.currentTime % 60;
const minutes = track.currentTime / 60 | 0;
durationTextNode.data = `${minutes}:${seconds.toLocaleString(undefined, { minimumIntegerDigits: 2 })}`;
playhead.value = trackProgress;
}