时间戳

首页 > 解决方案 > Javascript - 直接访问元素或设置变量更快？

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

问题描述

我正在使用 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 元素时，这显然是不同的，如果多次使用，我会设置一个变量。

标签： javascript

解决方案

还是根本没有区别？

在绝大多数情况下根本没有区别。如果存在差异，则只有在这部分代码运行不合理的频率（每秒数千次）时才能检测到。

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

duration.innerHTML =

部分，因为 DOM 操作要昂贵得多。

除非这段代码不合理地频繁运行，否则不值得担心。IMO，最好编写尽可能可维护的代码，而不必担心性能。

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

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

每次，但仅在需要更新该部分时。（或者使用像 React 这样的框架来自动为你优化。）

推荐阅读