CSS display:none 或 $.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 代码。否则有什么潜在的收益可以提供这种额外的移除？

Answer 1

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

Answer 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 多一点。

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

Performance gain from CSS display:none or $.remove()?

javascript

css

firefox

jquery

firefox-addon