CSS display:none 或 $.remove() 带来的性能提升？答案

【问题标题】：Performance gain from CSS display:none or $.remove()?CSS display:none 或 $.remove() 带来的性能提升？
【发布时间】：2017-05-26 00:19:24
【问题描述】：

我正在为国外网站开发 Firefox WebExtension。它有许多我想删除的脚本和广告。我的扩展中有两个文件，一个 CSS 和一个 JS 文件。在 CSS 文件中，我隐藏了这些元素：

/* Hide some parts before removing them */
aside,
#site-footer,
.ads,
iframe,
script {
  display: none
}

在 JS 文件中我用 jQuery 删除它们：

// List of selectors to remove
var removeList = [
  'aside',
  '#site-footer',
  '.ads',
  'iframe',
  'script'
];
// Remove them
$(removeList.join(",")).remove();

我意识到使用 CSS 隐藏元素比 jQuery.remove() 函数快得多。我的问题是，我真的需要在用 CSS 隐藏后删除这些元素吗？当我从 DOM 中删除它们时会有任何性能吗？我的意思是，例如，在display:none 之后，iframe 是否仍使用 CPU？如果是这样，我应该继续使用 JS 代码。否则有什么潜在的收益可以提供这种额外的移除？

【问题讨论】：

jQuery 所做的任何事情都比原生 DOM 方法慢得多——当您使用 firefox 时，您可以使用以下代码来移除 jQuery 要求，至少要移除代码的一部分：document.querySelectorAll(removeList.join(",")).forEach(e => e.remove())
答案是“视情况而定”

标签： javascript jquery css firefox firefox-addon

【解决方案1】：

属性display:none 仅隐藏您的元素，但不会从 DOM 中删除。在此之后，您的所有 iframe 仍将使用 CPU，因为 CSS 仅控制元素在屏幕上的显示方式。

【讨论】：

【解决方案2】：

经过一番研究，我决定同时使用display:none 和$.remove()。隐藏后，浏览器可能不会从头开始创建可视数据表单，但它会完成其余所有操作。例如：

<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="display: none;"></iframe>

使用 Firefox v53 在页面上播放音乐。它确实加载了所有 HTML/JS/CSS 文件。所以在这种情况下，display:none 的性能增益确实值得怀疑。我还需要删除元素。

虽然从 DOM 中移除元素很慢，但它仍然是我的最佳选择。也许不是静态数据，而是像iframe、.ads（它们通常包含 iframe）这样的元素，这是必须的。不过，我可以尝试使用纯 JS 而不是 jQuery。

【讨论】：