본문으로 바로가기

CRP,DOM 의 이해

category JavaScript 2022. 1. 15. 19:19

CRP(Critical Rendering Path) 과정

--1~4 뭘 그릴지(rendering 할지) 결정하는 과정--
1.Constructing DOM Tree
2.Constructing CSSOM Tree
3.Running JavaScript
4.Creating the render Tree
---------------------------------
--5~6 그리는(rendering하는) 과정--
5.Generating the Layout
6.Painting

 

DOM은 HTML,XML문서의 객체 기반 '표현 방식', 프로그래밍 언어가 접근할수 있는 interface이다.
트리구조로 표현됨. <html>태그는 root노드로 표현되고, 그 자식 노드로 <head>,<body>태그가 있는 식. 컨텐츠는 단말노드에 해당한다.

DOM tree가 완성되면 DOM tree를 기반으로 CSSOM가 완성되고, JavaScript가 실행된다음 결과를 바탕으로 Render Tree를 만든다.
Render Tree를 기반으로 결과 화면을 렌더링 한다

 

 

참조 : https://wit.nts-corp.com/2019/02/14/5522

 

'JavaScript' 카테고리의 다른 글

함수선언식 함수 표현식 차이  (0) 2022.01.15