[Web] Critical Rendering Path

🔷 DOM + CSSOM

브라우저가 페이지를 렌더링 하려면 DOM과 CSSOM 트리를 생성해야 한다. 성능이 좋은 웹페이지를 만들기 위해서 최대한 빨리 HTML, CSS를 브라우저에 제공해줘야 한다.

작성한 코드는 브라우저에서 작동할 수 있게 변환되는데, HTML -> DOM // CSS -> CSSOM으로 변환된다.

HTML로 마크업된 코드가 DOM으로 변환되기 까지 아래와 같은 과정을 거친다.

 <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

1. Bytes

브라우저가 HTML의 원시 바이트를 읽어와서 해당 파일에 대해 지정된 인코딩에 따라 개별 문자로 변환한다.

2. 토큰화

브라우저가 문자열을 웹 표준에 지정된 고유 토큰으로 변환한다.

3. 렉싱

토큰은 해당 속성 및 규칙을 정의하는 객체로 변환됨.

4. DOM TREE 생성

마크업에 정의된 상-하 관계를 구조화한 돔 트리가 형성된다. 돔 트리에 최종으로 출력된 내용을 가지고 브라우저가 페이지 처리를 할 때 사용한다.

위와 같은 과정을 CSSOM을 형성하는데도 똑같이 진행한다. CSS는 하향식 규칙을 가진다. 상위 요소에 스타일을 줘도 하위 요소에서 더 세분화된 스타일을 지정하면 상위 스타일 속성이 적용되지 않는다.

🔷 Render - Tree

DOM과 CSSOM이 결합하여 렌더링 트리를 형성한다.

렌더 트리가 형성되면, 아래와 같은 동작이 연이어 일어나고 우리가 페이지를 볼 수 있게 화면에 출력해준다.

렌더트리가 완성되면, layout 단계가 진행되는데, 기기의 뷰포트 내에서 노드의 정확한 위치와 크기를 캡처하는 '상자 모델'이 생성된다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환되어 배치된다.

레이아웃 단계가 완료되면, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 paint 단계가 진행된다.

DOM 또는 CSSOM이 수정되면, 화면에 다시 렌더링 할 필요가 있는 픽셀을 파악하기 위해 위와 같은 프로세스를 다시 반복해야 한다. 간단한 웹페이지일 경우 크게 상관이 없을 수 도 있지만, 동적요소가 많이 들어간 웹이나 매우 긴 코드를 사용 하는 웹페이지에서 수정될 때마다 layout -> paint -> composition이 일어나면 성능이 저하될 위험에 처한다.

그래서 js에서 css수정을 위해 동적요소를 추가할 때 최대한 효율적인 css 속성을 사용해서 코드를 작성하는 게 좋다.

https://csstriggers.com/

CSS Triggers

@PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates

csstriggers.com

위 사이트에서는 코드를 작성할 때 단계별로 반응이 일어나는지 안 일어나는지를 알 수 있다. 보다 효율적인 코드를 작성하기 위해 위 사이트를 참고하면 좋을 것 같다.

참고 사이트) https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

렌더링 트리 생성, 레이아웃 및 페인트 | Web | Google Developers

TODO

developers.google.com

'Javascript' 카테고리의 다른 글

[JS] 객체 접근방식 & ES6 객체 리터럴 신문법 (0)	2022.09.15
[JS] Fetch API(1) (0)	2022.06.16
[JS] 동기(Synchronous), 비동기(Asynchronous) 프로그래밍(+Promise) (2)	2021.12.03
[JS] 자바스크립트 동작원리 (0)	2021.12.02
[JS] Hoisting 이란? (2)	2021.10.11

keep at it

[Web] Critical Rendering Path

🔷 DOM + CSSOM

🔷 Render - Tree

'Javascript' 카테고리의 다른 글

티스토리툴바

[Web] Critical Rendering Path

🔷 DOM + CSSOM

🔷 Render - Tree

'Javascript' 카테고리의 다른 글

관련글

티스토리툴바