뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow 란 글이 잘 설명해준다. 3.1.1 CSS 속성 개요 분류: CSS 이야기가 나온김에 리플로우에 영향을 미치는 유명한 CSS 요소들을 뽑아보자면 [ CSS Triggers, 20 Tips for Optimizing CSS Performance] 이 있다. 그리고 재계산을 유발하기로 유명한 속성은 다음이 있으며 불필요하게 값을 수정하지 않는게 좋다.https://black7375.tistory.com/79Element.getBoundingClientRect() - Web API | MDNElement.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트 에 상대적인 위치 정보를 제공하는 객체를 반환합니다. 반환 값은 padding과 border-width를 포함해 전체 엘리먼트가 들어 있는 가장 작은 사각형인 객체입니다. left, top, right, bottom, x, y, width, height 프로퍼티는 전반적인 사각형의 위치와 크기를 픽셀 단위로 나타냅니다. width와 height 가 아닌 다른 프로퍼티는 뷰포트의 top-left에 상대적입니다.https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect
Seonglae ChoSeonglae ChoSeonglae ChoSeonglae Cho![[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링](https://www.notion.so/image/https%3A%2F%2Fblack7375.tistory.com%2Ffavicon.ico?table=block&id=1b5c3e41-9f36-4b61-a436-deb811aedad3&cache=v2){kind=small}
![[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Fblog.kakaocdn.net%252Fdn%252FFM5Z5%252FbtqWWsOdWiT%252FKHI0LMAvyNP2FC6IaoYy6k%252Fimg.png?table=block&id=1b5c3e41-9f36-4b61-a436-deb811aedad3&cache=v2)
