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（）？

回答

相關問題