javascript - CSS 显示的性能提升 :none or $. remove()？

Question

我正在开发 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中移除它们会有什么表现吗？我的意思是，例如，iframe 在 display:none 之后是否仍然使用 CPU？如果是这样，我应该继续使用 JS 代码。否则有什么潜在的 yield 可以提供这种额外的移除？

Answer 1

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