CSS表示によるパフォーマンス向上：noneまたは$ .remove（）？

Question

私は外国のウェブサイトのためにFirefox WebExtensionを開発しています。それは私が削除したい多くのスクリプトと広告があります。私は拡張子に2つのファイル、CSSとJSファイルを持っています。

/* Hide some parts before removing them */ 
aside, 
#site-footer, 
.ads, 
iframe, 
script { 
    display: none 
} 

そして、JSファイルに私はjQueryを使ってそれらを削除します：CSSファイルでは、私はこれらの要素を非表示

// 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コードを使い続けるべきです。そうでなければ、この余分な除去をもたらす可能性のある利益はどれですか？

Answer 1

調査の結果、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が含まれています）のような要素の場合は必須です。それでも、jQueryではなく純粋なJSをもう少し使ってみることができます。

Answer 2

プロパティdisplay:none要素を非表示にしてもDOMからの削除はできません。 CSSはこれを画面上でどのように表示するかを制御するだけなので、あなたのiframeはすべてこの後もCPUを使用します。