要素を非表示にする 2 つの方法 [display: none] と [visibility: hidden] の違いとそれらによって引き起こされる問題_html/css_WEB-ITnose

この問題について以前に論じたエッセイ (@人天元原文) を見て、次のように要約しました:

[表示: なし]: 要素と要素内のすべてのコンテンツ、および要素の位置を非表示にします。幅、高さ、その他の属性値も一緒に「消えます」

[visibility: hidden]: 要素と要素内のすべてのコンテンツを非表示にしますが、要素の位置、幅、高さ、その他の属性値はそのまま残ります。

要約もあります: (@Nicholas_F の区 原文)

display:none --- 隠されたオブジェクトの物理的スペースを保持しません。つまり、オブジェクトはページ上で完全に消えます。見ることも触れることもできません。

visibility:hidden--- Web ページ上でオブジェクトを非表示にしますが、Web ページ上でオブジェクトが占めるスペースは変化しません。平たく言えば、それは見ることはできませんが、触れることはできることを意味します。

しかし、それだけでは不十分だと感じたので、彼に関するローディングの問題について考えました。
1. ページのロードと同時に、display:none; 属性を持つ構造もロードされますか?それともdisplay:block;になった時点でロードされるのでしょうか？
2. ページのロードと同時に、visibility:hidden; 属性を持つ構造もロードされますか?それとも、visibility:visible; に変更されたときにロードされますか?

私の個人的な意見は次のとおりです:
display:; その値が block になると、その構造体がロードされます。
その値が非表示になっていても、その値が占有するスペースはまだ存在するため、可視性はページがロードされるときにロードされます。