回答編集履歴
4
CSS→インナースタイルに修正
test
CHANGED
|
@@ -66,6 +66,6 @@
|
|
|
66
66
|
|
|
67
67
|
②と③は、パースの時点で差異は生じませんが、
|
|
68
68
|
|
|
69
|
-
②は、
|
|
69
|
+
②は、インナースタイルによってレンダリングの前に一つ処理が挟まるため、
|
|
70
70
|
|
|
71
71
|
表示の切り替えが発生する分、③よりも②の方がパフォーマンスが落ちる可能性が高いと思われます。
|
3
②の方が逆に遅くなる可能性を示唆
test
CHANGED
|
@@ -59,3 +59,13 @@
|
|
|
59
59
|
500行では、影響を測り切れないと思いますが、
|
|
60
60
|
|
|
61
61
|
一万行とかであれば、表示に差異を持たせられると思います。
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
ですが、むしろ、②の方が遅くなるかもしれません。
|
|
66
|
+
|
|
67
|
+
②と③は、パースの時点で差異は生じませんが、
|
|
68
|
+
|
|
69
|
+
②は、CSSによってレンダリングの前に一つ処理が挟まるため、
|
|
70
|
+
|
|
71
|
+
表示の切り替えが発生する分、③よりも②の方がパフォーマンスが落ちる可能性が高いと思われます。
|
2
質問の内容から、合うよう修正
test
CHANGED
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
+
# 結論
|
|
22
|
+
|
|
21
23
|
さて、結論ですが、
|
|
22
24
|
|
|
23
|
-
表示する際は、確かにレンダリングをしない前者の方が速いように思いがちですが、
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
①と、②では、明らかに差異が生じます。
|
|
26
26
|
|
|
27
27
|
Webページのライフサイクルには、
|
|
28
28
|
|
|
@@ -30,21 +30,27 @@
|
|
|
30
30
|
|
|
31
31
|
（一つ目の記事参照）
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
パフォーマンスに影響は間違いなくでるからです。
|
|
34
34
|
|
|
35
35
|
これは、そのHTMLがどういった構造かを解析するフェーズで、ブラウザがレンダリングを行う際にとても重要なフェーズです。
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
見えなくとも、構造解析は行うため、その分レンダリングは遅くなります。
|
|
38
38
|
|
|
39
39
|
また、PageSpeed Insightsでは、
|
|
40
40
|
|
|
41
|
-
`display: none`で隠している要素
|
|
41
|
+
`display: none`で隠している要素であっても、ページ全体の要素数を抑えろと、警告してくることからも、隠している要素も、レンダリングパフォーマンスに影響が出ることを、公式が認めていることになります。
|
|
42
42
|
|
|
43
|
-
（大量の隠し要素であれば、`display: hidden`の方がいいのかも
|
|
43
|
+
（大量の隠し要素であれば、`display: hidden`の方がいいのかも。
|
|
44
|
+
|
|
45
|
+
また、`template`要素であれば、その中身はリソースの読み込み自体は行われないため、`display`のコントロールより高速となる）
|
|
44
46
|
|
|
45
47
|
|
|
46
48
|
|
|
49
|
+
なので、問題は、
|
|
50
|
+
|
|
51
|
+
**②と③で差異が生じるのか**、となります。
|
|
52
|
+
|
|
47
|
-
|
|
53
|
+
表示する際は、確かにレンダリングをしない②の方が速いように思いがちですが、
|
|
48
54
|
|
|
49
55
|
これは本当に実験をしてみないとなんとも言えませんので、
|
|
50
56
|
|
1
ページ表示パフォーマンスが上がるわけではない事を記載した記事を記載
test
CHANGED
|
@@ -11,6 +11,10 @@
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
[要素の表示非表示は visibility:hidden の方が display:none よりも高速 - Qiita](https://qiita.com/naohikowatanabe/items/7fc02bb665e0c9b6ce0d)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
[display:none でページが軽くなるわけではありません - カスタマイズ](https://vanillaice000.blog.fc2.com/blog-entry-544.html)
|
|
14
18
|
|
|
15
19
|
|
|
16
20
|
|