CSS显示性能增益：无或$ .remove（）？

我正在为外国网站开发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代码。否则，哪些潜在收益可以提供额外的删除？

来源

2017-05-26 Emre Piskin

什么jQuery不会是可测量比本地DOM方法慢 - 因为你使用Firefox，你可以使用下面的代码删除jQuery的要求，至少你的代码的删除部分：'document.querySelectorAll（removeList.join（ “”））。的forEach（E => e.remove（））' –

答案是 “其取决于” – epascarello

经过一番研究，我决定同时使用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（它们通常包含的I帧）是必须的。不过，我可以尝试使用纯JS而不是jQuery多一点。

来源

2017-05-27 10:26:56

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

来源

2017-05-26 00:54:37

CSS显示性能增益：无或$ .remove（）？

回答

相关问题