javascript - 插入 html 和更改显示样式属性之间的速度差异

Question

假设您有一个相对较小的 HTML 片段(假设少于 100 个标签且大小 <4KB)并且您希望偶尔向用户显示和隐藏它(想想菜单、模式...等)。

是用css隐藏和显示最快的方法，比如:

//Hide:
document.getElementById('my_element').style.display = 'none';

//Show:
document.getElementById('my_element').style.display = 'block';

或者插入和删除它:

//Hide
document.getElementById('my_element_container').innerHTML = '';

//Show:
const my_element_html = {contents of the element};
document.getElementById('my_element_container').innerHTML = my_element_html;

// Note: insertAdjacentHTML is obviously faster when the container has other elements, but I'm showcasing this using innerHTML to get my point across, not necessarily because it's always the most efficient of the two.

显然，这可以根据具体情况进行基准测试，但是，对于许多浏览器版本和设备，我能够在合理时间内运行的任何基准测试都没有那么有意义。

我找不到与此主题相关的任何基准。

是否有比较这两种方法的最新基准？浏览器开发人员是否就一般而言在速度方面应该首选哪种浏览器达成共识。

Answer 1

原则上，DOM 操作比切换现有节点的 display 属性要慢。我可以在这里停止我的回答，因为这在技术上是正确的。

---

但是，页面的重绘和重排通常要慢得多，并且您的两种方法都会触发它，因此您可以查看:

• 显示切换:1 个单元
• DOM 节点切换:2 个单位
• 重绘 + 重排页面:100 个单位

这样您就可以将 101 个单位与 102 个单位进行比较，而不是将 3 与 4(或 6 与 7)进行比较。我并不是说这是一个数量级，它实际上取决于您的真实页面的实际 DOM 树，但很可能接近上面的数字。

如果您使用像这样的方法:visibility:hidden 或 opacity:0，它会更快，更不用说 opacity 是动画，在现代 UI 中，这是首选。

一些资源:

• Taming huge collections of DOMs
• Render-tree Construction, Layout, and Paint
• How Browsers Work: Behind the scenes of modern web browsers
• An introduction to Web Performance and the Critical Rendering Path
• Understanding the critical rendering path, rendering pages in 1 second

Web 性能与 Web 开发非常相似，并不是一个“按下此按钮”的过程。你需要尝试、失败、学习、再试、再失败……

---

如果您的元素始终相同，您可能会发现(通过测试)将它们缓存在变量中比在调用 show 方法时重新创建它们要快得多。

测试很简单:

• 将每个方法放在一个单独的函数中；
• 记录开始时间(使用 performance.now())；
• 使用每种方法 n 次，其中 n 是:100, 1e3, 1e4,... 1e7
• 记录每个测试的完成时间(或与开始时间的差异)

比较。您会注意到从 100 次测试得出的结论与从 1e7 次测试得出的结论完全不同。

要更深入，您可以测试显示时不同方法和隐藏时不同方法的差异。您可以测试隐藏的渲染元素，然后切换它们的显示。发挥创意。尝试任何你能想到的，即使它看起来很愚蠢或没有多大意义。

这就是你学习的方式。