より多くのDOM要素を追加するよりも、CSSで生成されたコンテンツ（つまり擬似要素）の使用がより効率的（つまり解析/レンダリングが高速化）されていますか？

Question

私のモバイルWebアプリをリーンで効率的に保つために、私はいつでもDOM上の要素の数を制限しようとしています。私がDOM要素の使用を制限しようとする1つの方法は、擬似:beforeと:after要素を使用して可能な限りコンテンツを生成することです。例えば

はなく、このようなメタデータをリスト項目を表す：

<dd class="child" 
    data-name="Name" 
    data-desc="Description" 
    data-location="Location" 
    data-genre="Genre"> 
</dd> 

：

<dd class="item"> 
    <div class="name">Name</div> 
    <div class="desc">Description</div> 
    <div class="location">Location</div> 
    <div class="genre">Genre</div> 
</dd> 

Iは、この（&メタデータを表示するcontent:プロパティを使用）のようにそれを表すことができ

したがって、5つの別々の要素ではなく、間違いなくクリーンなマークアップではなく、データ属性を持つ1つのDOM要素。
デモ：http://jsfiddle.net/quc8b/2/

この手法では実際にパフォーマンスが向上しますか？私の考えは、より少ないDOM要素でjavascriptがより速く解析されるべきであり、リストアイテムノードをより速く追加/削除できるはずです。しかし、レンダリング（つまり、ペイント、レイアウト、&リフロー）はより速く行われますか？言い換えれば、従来の要素やテキストノードよりも速く、効率的にレンダリング/解析されたCSS生成コンテンツですか？

レンダリングツリーやドキュメントツリーでCSSで生成されたコンテンツをブラウザがどのように内部的に扱うかは、私には分かりません（シャドウDOMは多分？）。これについて議論する記事はありますか？

Answer 1

この回答は年前にに指定されています。以下に記載されているステートメントの多くは、もはや有効ではありません。擬似要素を使用することは、アクセス可能でなければならないコンテンツを提供する際には、依然として推奨されません。

擬似要素のパフォーマンスについてはわかりませんが、私はあなたが他のすべての上にパフォーマンスを置くことを心配しています。

擬似要素は「本物」DOM-ノードと比較すると、かなりの欠点を持っている：あなたはJavascript

で動的にその外観を変更することはできません

• 彼らは移行できないか
• アニメーション彼らは検索エンジンにとってはるかに重要ではない
• デバッグには煩雑です
• その番号は:beforeとの1つに限定されています要素
• 彼らは
• あなたは、いくつかのHTML要素が擬似要素を持つことができません
• 内容と外観の分離の概念を傷つける例えば、リンクまたは追加の容器のために、HTMLタグを含めることができません

詳細については、Tag-Wikiを参照してください。

これ以上あると確信しています。反対側では、私は信じて、パフォーマンスの向上のいくつかの並べ替えは無視されます。

Answer 2

私もこれを理解することに興味がありました。だから、私は単純なリットルのテストケースを行いました。

私は2つのhtmlページを作成しました。

擬似変異体： 50.000 <p>paragraph</p>ノード

CSS：p:before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; content: ""; }

"多くのDOM要素" -variant： 50.000 <p><span class="icon"></span> paragraph</p>

CSS：.icon { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: red; }

I MacBook ProのChrome Devtools Performanceモニタを数回実行して、結果を観察しただけです。

「プロファイリングとリロードの開始」を使用して、解析とレンダリングの時間を観察しました。一般に、「多くのDOM要素」ソリューションは約300ミリ秒ほど高速でした。たとえば、この場合は2452msかかりましたが、「擬似」バリアントは2033msでした。それを数回試してみると、およそ400ミリ秒の違いがありました。

ページが完全に私は、パフォーマンスモニタで再び「レコードを」ヒットロードされた後

2.。ソームのレイアウトを変更するには、ウィンドウマネージャーを使用してブラウザウィンドウのサイズを3回変更しました（1.全画面モード、2.右半画面、左半画面）

この場合「擬似」変種は常に約330ms遅かった。例えば、画像の下の画像では1463秒かかったが、「多くのDOM要素」は1136だけだった。

3.私も、前と後の時間をdocument.body.offsetHeight;を使用してログインするリフローをトリガするためのスクリプトと時間計測を使用してみました。しかし、私はそれが1から4ミリ秒かかることがわかったので、何かを確実に測定することが実際に有用であるとは思えませんでした。より多くの要素や操作を必要とするかもしれません。

私が思った最初のことのちょっとしたテスト。試してみるべきことが他にあるかどうか知らせてください:)