잠온다

JS) DOM, node, element, reflow, repaint 본문

Javascript

JS) DOM, node, element, reflow, repaint

블블디 2023. 1. 4. 00:01

1. DOM

DOM이란 Document Object Model의 약어로 넓은 의미로는 웹 브라우저가 HTML 페이지(Document Object = 문서 객체)를 인식하는 방식(Model), 좁은 의미로는 document 객체와 관련된 객체의 집합을 의미한다.

 

DOM은 tree형식의 자료구조로 이루어져 있는데 tree 위쪽의 node를 parent node, 아랫쪽 node를 child node라고 한다. 가장 위에서 시작되는 node는 root node, 자식이 없는 가장 아래 node는 leaf node라고 한다.

 

2. node vs element

node란 tree 구조에서 root node를 포함한 모든 개체를 node라고 표현한다. element는 html 문서에서 <div>, <p>와 같은 태그를 사용해서 작성된 node를 말한다. 즉 node가 elment의 상위 개념으로, node에는 태그 뿐 아니라 텍스트, 주석 등을 모두 포함한다.

 

DOM을 조작할 때 node를 탐색하는 방법 보단 element를 탐색하는 방법을 사용하면 주석이나 텍스트 등을 제외하고 element만을 탐색하기에 더욱 효율적일 수 있다.

 

3. 브라우저 동작 방식

브라우저는 위와 같이 HTML을 파싱하여 DOM tree를 생성하고 link를 만나면 CSS를 파싱하여 CSSOM tree를 생성한다. 그 후 둘을 토대로 attachment라는 과정을 거쳐 Render tree를 생성한다. 즉 DOM tree와 Render tree는 다른 것이며 화면이 비춰지는 것은 DOM tree가 아닌 Render tree다. 가령 display: none의 경우 Render tree에는 포함되지 않으며 <head> 같은 것들 또한 마찬가지다.

 

4. reflow, repaint

layout 단계로도 많이 불리는 reflow는 Render tree의 목적에 맞게 각 요소의 구체적인 위치와 크기를 연산해낸다. 즉 reflow는 모든 수치를 다시 계산하여 Render tree를 재생성하는 과정이다.  그 후 재생성된 Render tree를 다시 그리는 과정을 repaint라고 한다.

 

event handler → recalcurate (변경된 스타일 수치 계산) → reflow (layout) → repaint (paint)

 

reflow는 레이아웃 수치가 변경되면 발생하는데, background color나 visibility와 같이 스타일만이 바뀌는 경우 reflow가 생략된 채 repaint 과정만 일어난다. 

 

5. reflow 최적화 방법

reflow가 발생하는 원인은 아래와 같다.

  1. 윈도우 리사이징
  2. 폰트의 변화 (height 계산에 영향을 주기 때문)
  3. 스타일 추가 또는 제거
  4. 내용 변화 (input에 텍스트 입력 등)
  5. :hover와 같은 가상클래스 (pseudo class)
  6. 클래스 attribute의 동적 변화
  7. js를 통한 DOM 동적 변화
  8. element에 대한 offsetWidth, offsetHeight 계산
  9. 스타일 attribute 동적 변화

원인을 모두 피할 수는 없지만 이를 인지하고 개발하는 것은 중요하다. 아래 사항을 인지하고 있자.

 

  1. 되도록 말단 node에만 클래스 사용. reflow 영향을 최소화할 수 있다.
  2. 인라인 스타일 자제. 클래스 사용을 지향하자.
  3. position은 relative보단 absolute와 fixed를 사용하자. relative는 주변 레이아웃에 영향을 준다.
  4. 퀄리티와 퍼포먼스를 타협하자.
  5. 테이블로 구성된 레이아웃을 자제하자. 작은 변화에도 테이블 전체 node에 reflow가 발생한다.
  6. CSS에서 js 표현식을 자제하자. 문서 일부가 reflow 될 때마다 표현식이 다시 계산되기 때문이다.
  7. CSS 하위 선택자는 필요한 만큼만 쓰자. 
  8. 자주 사용하는 일부 속성과 메서드는 캐싱하자.

 

참고자료

https://velog.io/@young_pallete/Reflow-Repaint%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

https://m.blog.naver.com/magnking/220972680805

https://webclub.tistory.com/346

 

'Javascript' 카테고리의 다른 글

JS) this, bind  (0) 2023.01.08
JS) 자바스크립트의 메모리 할당, 실행 컨텍스트와 콜 스택  (0) 2022.08.14
JS) 자주 사용하는 ES6 문법  (0) 2022.07.02
JS) var, let, const, 호이스팅  (1) 2022.06.19
JS) 함수와 함수의 호출,  (2) 2022.06.19
'Javascript' Related Articles more
Comments