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中删除它们时可以有任何性能吗？我的意思是，例如，iframes在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显示的性能提升：无或$ .remove（）？

2 个答案: