假设您有一个相对较小的 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.
显然，这可以根据具体情况进行基准测试，但是，对于许多浏览器版本和设备，我能够在合理的时间内运行的任何基准测试都没有意义。
我一直找不到与此主题相关的任何基准。
是否有任何最新的基准比较这两种方法？浏览器开发人员是否就一般来说，在速度方面应该首选哪个达成共识。
原则上，DOM 操作比切换现有节点的属性display慢。我可以在这里停止我的回答，因为这在技术上是正确的。
但是，页面的重绘和重排通常速度较慢，并且您的两种方法都会触发它，因此您可以查看：
- 显示切换：1个单位
- DOM 节点切换：2 个单位
- 重绘+重排页：100个单位
这样您就可以将 101 个单位与 102 个单位进行比较，而不是将 3 与 4 进行比较(或将 6 与 7 进行比较(。我并不是说这是数量级，它实际上取决于您真实页面的实际 DOM 树，但它很可能接近上面的数字。
如果您使用以下方法：visibility:hidden或opacity:0，它会更快，更不用说opacity是可动画的，这在现代 UI 中是首选。
一些资源：
- 驯服大量 DOM
- 渲染树构造、布局和绘制 浏览器
- 如何工作：现代网络浏览器的幕后花絮
- Web 性能和关键呈现路径简介
- 了解关键渲染路径，在 1 秒内呈现页面
Web性能，就像 Web 开发一样，不是"按下此按钮"的过程。你需要尝试，失败，学习，再试一次，再失败一次......
如果您的元素始终相同，您可能会发现(在测试时(将它们缓存在变量中比在调用 show 方法时重新创建它们要快得多。
测试非常简单：
- 将每个方法放在一个单独的函数中;
- 记录开始时间(使用
performance.now()(; - 使用每种方法
n次，其中n为：100、1E3、1E4,...1e7 - 每个测试的日志完成时间(或与其开始时间的差异(
比较。您会注意到从 100 测试得出的结论与从 1e7 测试中得出的结论完全不同。
为了更深入，您可以在显示时测试不同方法的差异，在隐藏时测试不同方法的差异。您可以测试隐藏的渲染元素，然后切换其显示。发挥创意。尝试任何你能想到的东西，即使它看起来很愚蠢或没有多大意义。
这就是你学习的方式。