Q&A
ご回答いただきありがとうございます。頂いたご回答２つともベストアンサーとしたい気持ちでいっぱいですが、お先にご回答頂きましたのでベストアンサーとさせて頂きます。display:none要素が与えるページ表示速度への影響についての回答としてしっかり把握することができました。ありがとうございます。
###知りたいこと
display:none要素はページレスポンス、つまり表示速度に影響があるのか知りたいです。
質問は以下２つになります。
-
①と②には、ページレスポンスにが違いはあるか？
-
②と③には、ページレスポンスにが違いはあるか？
（もし質問1と2が両方yesの場合、なぜ②と③に違いは起きますか？）
1
1<h1>タイトル</h1>
2
1<h1>タイトル</h1> 2<div style="display:none;"> 3<p>ああああああああああああ</p> 4<p>ああああああああああああ</p> 5.....500行 6<p>ああああああああああああ</p> 7</div>
3
1<h1>タイトル</h1> 2<div> 3<p>ああああああああああああ</p> 4<p>ああああああああああああ</p> 5.....500行 6<p>ああああああああああああ</p> 7</div>
回答2件
0
適当にやったので正確に500行ではない（1000行ぐらい？）ですが、試してみました。
方法は、Firefoxのパフォーマンス測定で、リロードをしpagehideイベントが起こってから、DOMContentLoadedが起きるまでです。
①と②はほとんど差が見られませんでした。②と③には差がありました。ただ、繰り返し試行すると誤差も大きく、参考になる数値かどうかは分かりません。
miyabi_takatsukさんが回答でおっしゃっているとおり、display:noneでもDOMツリーに追加されますが、レンダリングツリーには追加されません。ですので、その部分のコストなのではないかと思いました。
↓この記事によると、
The main flow | How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks
レンダリングツリーからレイアウトとペインティングというプロセスがあるので、レンダリングツリーに追加されないということはそのプロセスを全てスキップできます。
例示のような単純なレイアウトであればともかく、浮動や配置、重ね合わせなど、他のレンダリングに影響を与えるスタイルがある場合は、CSS Containmentと同様の観点から、パフォーマンスに差が出るのではないかと思います。
Chrome85 から実装されたcontent-visibilityに関する記事も参考になるかと思います。ページのパフォーマンスに関する興味深い内容ですので、ぜひご一読ください。
content-visibility: the new CSS property that boosts your rendering performance
投稿2021/02/27 08:41
総合スコア36946
0
ベストアンサー
直接的な回答にならないかもしれないのはご了承ください。
まず、以下、公式ではないですが、非常に参考になる記事を紹介します。
要素の表示非表示は visibility:hidden の方が display:none よりも高速 - Qiita
display:none でページが軽くなるわけではありません - カスタマイズ
結論
さて、結論ですが、
①と、②では、明らかに差異が生じます。
Webページのライフサイクルには、
パースという、DOM Treeを生成するフェーズが存在するため、
（一つ目の記事参照）
パフォーマンスに影響は間違いなくでるからです。
これは、そのHTMLがどういった構造かを解析するフェーズで、ブラウザがレンダリングを行う際にとても重要なフェーズです。
見えなくとも、構造解析は行うため、その分レンダリングは遅くなります。
また、PageSpeed Insightsでは、
display: noneで隠している要素であっても、ページ全体の要素数を抑えろと、警告してくることからも、隠している要素も、レンダリングパフォーマンスに影響が出ることを、公式が認めていることになります。
（大量の隠し要素であれば、display: hiddenの方がいいのかも。
また、template要素であれば、その中身はリソースの読み込み自体は行われないため、displayのコントロールより高速となる）
なので、問題は、
②と③で差異が生じるのか、となります。
表示する際は、確かにレンダリングをしない②の方が速いように思いがちですが、
これは本当に実験をしてみないとなんとも言えませんので、
質問者さんが、実験をされてみてはいかがでしょうか？
500行では、影響を測り切れないと思いますが、
一万行とかであれば、表示に差異を持たせられると思います。
ですが、むしろ、②の方が遅くなるかもしれません。
②と③は、パースの時点で差異は生じませんが、
②は、インナースタイルによってレンダリングの前に一つ処理が挟まるため、
表示の切り替えが発生する分、③よりも②の方がパフォーマンスが落ちる可能性が高いと思われます。
投稿2021/02/26 20:04
編集2021/02/26 20:46
総合スコア9555
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/27 12:00
2021/02/28 02:07
2021/02/28 02:10
2021/02/28 04:04
2021/02/28 07:05 編集
2021/03/08 09:48