클립보다 사용되지 않는 DOM 요소를 숨기는 더 좋은 방법이 있습니까?

Question

단일 페이지 웹 기반 응용 프로그램을 만들려고하므로 전체 UI가 DOM에 한 번에로드되지만 한 번에 그 부분 만 사용자에게 표시됩니다.

원래 화면 요소를 display:none으로 설정했지만 요소를 표시/숨기려면 사용하려는 애니메이션/전환을 위반했습니다.

내가 지금하고있는 일은 불투명도/위치 등을 조정하여 화면에서 요소를 전환하는 것입니다. 그리고 일단보기가 안되면 다음과 같이 요소를 클리핑하는 클래스를 설정합니다. clip: rect(0, 0, 0, 0) 간섭을받지 않도록 화면상의 요소가 있고 사용자가 그것을 클릭 할 수 없습니다.

이 방법은 잘 작동하지만 더 나은 /보다 효율적인 방법이 있다면 내 질문은 무엇입니까? 나는 앱이 성장함에 따라 점점 더 많은 요소가 DOM에로드되면서 속도가 문제가 될 수 있다고 생각한다.

그래서 브라우저가 효율적으로 화면상의 요소 만 처리 할 수 ​​있도록 요소를 숨기는 가장 효율적인 방법을 찾고 있습니다.

의견을 보내 주셔서 감사합니다.

Answer 1

visibility: hidden 할 수 있습니다.