通过 GTM 隐藏 HTML 元素：Javascript 与 CSS，哪个更快？答案

【问题标题】：Hide HTML element via GTM: Javascript vs CSS, which is faster?通过 GTM 隐藏 HTML 元素：Javascript 与 CSS，哪个更快？
【发布时间】：2022-11-03 17:09:03
【问题描述】：

我正在尝试使用 Google 跟踪代码管理器隐藏 HTML 元素，但我想知道哪种方法更快，JavaScript 或 CSS。

我一直认为插入 CSS 本身会比使用 JavaScript 插入一些内联 CSS 更快地隐藏 HTML 元素。但是，我对两者都进行了测试，感觉 JavaScript 实际上隐藏元素的速度更快。但是，我没有数字可以证明我的观点。背后的逻辑是什么？

JavaScript：

<script>
  document.querySelector(".hello-world").style.display = "none";
</script>

CSS：

<style>
  .hello-world{
    display: none;
  }
</style>

【问题讨论】：

标签： javascript html css google-tag-manager

【解决方案1】：

CSS 是迄今为止在页面加载时将样式应用于任何元素的最佳方式。

这是因为 CSS 可以在样式表加载之后应用，这通常是在 DOM 渲染之前，所以你不会看到内容出现和消失的闪烁。

与 JS 相比，它必须等到 DOM 加载完毕，这意味着元素在突然隐藏之前将是可见的（缓存脚本等除外）。此问题称为'Flash of Unstyled Content' 或 FOUC。

附带说明一下，CSS 是硬件加速的，所以如果您有任何想要显示的动画，请尝试使用 CSS/SVG 而不是 JS 来创建它。

【讨论】：