브라우저의 렌더링 과정 ( DOM Tree + CSSOM Tree -> Render Tree -> Reflow(Layout) -> Paint(Repaint)
조건부 렌더링이 최적화에 최고 -> 연산도 아예 안함
display : none
자리 차지 안함
DOM 트리까지만 가져가고, Render Tree에서 제외-> 레이아웃에 포함되지 않는다
하지만 DOM 트리까지는 해당 요소가 Node로 만들어 지기 때문에, 컴포넌트를 생성하기 위한 계산과정은 전부 거쳐야 한다 -> 리렌더링에 따른 자원 소모는 피하지 못함.
검색엔진이 아예 접근 못함
Reflow, Repaint 안함
opacity : 0
자리 차지함
클릭이벤트를 가지고 있어서 본인이 클릭됨
Reflow, Repaint 안함
visibility : hidden
자리 차지함
Render 트리에 포함됨
뒤에 있는 요소 클릭 가능
Repaint 만 함