DOM 리플 로우 란 무엇입니까?

DOM 리플 로우 란 무엇입니까?

---

나는이 개 CSS 속성의 차이에 대해 읽고 있었다 display:none및 visibility:hidden및 발견 된 DOM 리플 로우 용어.

진술은

display: none없는 DOM 리플 로우가 발생합니다 visibility: hidden.

그래서 제 질문은 :

DOM 리플 로우 란 무엇이며 어떻게 작동합니까?

---

리플 로우 페이지의 레이아웃을 계산한다. 요소에 대한 리플 로우는 요소의 크기와 위치를 재 계산하고 해당 요소의 자식, 조상 및 DOM에서 그 뒤에 나타나는 요소에 대한 추가 리플 로우를 트리거합니다. 그런 다음 최종 다시 그리기를 호출합니다. 리플 로우는 매우 비싸지 만 안타깝게도 쉽게 트리거 될 수 있습니다.

리플 로우는 다음과 같은 경우에 발생합니다.

• DOM에서 요소 삽입, 제거 또는 업데이트
• 페이지의 내용 수정 (예 : 입력 상자의 텍스트)
• DOM 요소 이동
• DOM 요소 애니메이션
• offsetHeight 또는 getComputedStyle과 같은 요소 측정
• CSS 스타일 변경
• 요소의 className 변경
• 스타일 시트 추가 또는 제거
• 창 크기 조정
• 스크롤

자세한 내용은 여기를 참조하십시오 : Repaints 및 Reflows : 책임감있는 DOM 조작

---

Reflow는 문서의 일부 또는 전체를 다시 렌더링 할 목적으로 문서에있는 요소의 위치와 형상을 다시 계산하기위한 웹 브라우저 프로세스의 이름입니다.

https://developers.google.com/speed/articles/reflow

display:none을 숨길 div는 것처럼 div반면 렌더링되지 않습니다 visibility:hidden만 숨 깁니다하지만 공간이 여전히 점유

---

즉,을 설정 display: none;하면 visible : hidden; 경우 브라우저가 DOM 요소의 위치를 ​​다시 계산합니다. -아니. visibility: hidden;DOM에서 요소 크기를 변경하지 않기 때문에 생각하십시오 .

참조 URL : https://stackoverflow.com/questions/27637184/what-is-dom-reflow