Opacity (투명도):
opacity 속성은 요소의 투명도를 조절하는 것이므로 요소의 레이아웃이 변경되지 않는다. 즉, 요소의 크기와 위치는 그대로 유지된다.
그러나 브라우저는 투명한 요소 위에 있는 내용을 렌더링할 때 추가 계산을 수행해야 한다. 투명한 요소의 내용이 반투명한 배경을 통해 나타나므로 이러한 계산이 필요하다. 하지만 이는 대부분의 경우에는 무시할 만큼 작은 오버헤드다.
opacity와 transform은 리페인팅 과정에서 브라우저에 무리를 주지 않는다.
Hidden (숨김):
display: none; 또는 visibility: hidden;은 요소를 완전히 화면에서 제거합니다. 따라서 브라우저는 해당 요소와 관련된 레이아웃, 그리고 해당 요소의 자식 요소들을 고려하지 않아도 된다.
이는 렌더 트리의 재구성에 대한 부담을 줄여준다. 요소가 화면에 없다는 것을 브라우저가 인지하고, 다시 화면에 표시할 때 필요한 계산이나 레이아웃 변경을 하지 않아도 된다.
결론
display: none은 렌더트리 생성 과정에서 제외된다.
따라서 대부분의 경우, display: none;이나 visibility: hidden;을 사용하여 요소를 숨기는 것이 브라우저에 더 가벼울 수 있다. 특히 요소를 화면에서 완전히 제거하고자 할 때는 이러한 방법을 사용하는 것이 좋다. 그러나 투명도를 조절해야 하거나 애니메이션 효과 등을 구현하려는 경우에는 opacity를 사용해야 한다.
기록하자