BOM(Browser Object Model)
브라우저의 창이나 프레임을 프로그래밍으로 제어할 수 있게 해주는 객체 모델. 전역 객체는 window
이며, 하위 객체로 location
, navigator
, document
, screen
, history
가 포함된다.
DOM(Document Object Model)
웹 페이지를 프로그래밍으로 제어할 수 있게 해주는 객체 모델. 전역 객체는 Node
이며, 하위 객체로는 Document
, Element
, Attr
, CharacterData
등이 있다.
브라우저가 화면에 나타나는 요소를 렌더링할 때, 렌더링 엔진을 사용한다. 렌더링 엔진은 HTML, CSS, Javascript를 활용하여 CRP(Critical Rendering Path)라는 프로세스를 거쳐 렌더링을 진행한다.
</body>
직전 또는 defer
속성을 가지는 스크립트) 실행async
속성을 가지거나 속성이 없는 스크립트는 HTML 파싱 과정을 중단하고 실행display: none;
을 가지는 엘리먼트는 제외리플로우(Reflow)
요소의 크기나 위치, Viewport의 크기 등 Layout 수치가 변경되면 그 수치에 영향을 받는 부모 및 자식 노드들도 Layout 과정을 다시 수행하면서 Rendering Tree에서 각 노드의 위치와 크기를 다시 계산하는데 이 과정을 리플로우라 한다.
리플로우가 일어나는 경우는 다음과 같다.
리페인트(Repaint)
리플로우만으로는 변경사향이 실제 화면에 반영되지 않는다. 그래서 리플로우 과정에 의해 변경된 Rendering Tree를 기반으로 다시 화면을 그려주는 과정이 필요한데 이를 리페인트라 한다.
리플로우는 리페인트의 충분조건이 아니다. 대표적으로 visibility: hidden → visible;
과 같은 속성은 리플로우를 발생시키지 않지만 리페인트를 발생시킨다.
최적화 관점에서의 리플로우
리플로우는 사용자의 브라우저 사용을 방해하는(User Blocking) 작업이기 때문에 최적화 관점에서 리플로우의 발생을 최소화하는 것이 중요하다.
브라우저는 자바스크립트 엔진을 내장하여 자바스크립트 코드를 실행한다. 브라우저마다 엔진의 종류가 달라 코드를 실행하는 방식에 다소 차이가 있을 수 있다. 다음은 일반적으로 자바스크립트 엔진의 코드 실행 과정이다.
CSS 선택자의 특정성은 쉼표로 구분된 네 개의 값(a, b, c, d
)을 기준으로 다음 규칙에 따라 계산된다.
a
는 인라인 스타일 사용 여부다. 속성의 선언이 요소의 인라인 스타일이라면 1, 아니면 0이다.b
는 Id 선택자의 개수다.c
는 클래스, 속성, 가상 클래스 선택자의 개수다.d
는 태그, 가상 요소 선택자의 개수다.특정성은 왼쪽에서 오른쪽 순으로 순서와 값을 비교하여 결정된다. 예를 들어, 0, 1, 0, 0
과 0, 0, 10, 0
두 선택자에 대해 전자의 특정성이 후자보다 크다.