DOM - 브라우저 렌더링

브라우저가 DOM을 이용해서 어떻게 렌더링이 될까?

www.naver.com  에 접속하면 무슨 일이 일어날까?

 

1. 네트워크 관련

2. 렌더링

 

참조) 개발자도구에서 네트워크 창 확인해보기

 

HTML : DOM tree 생성 

CSS : CSSOM (CSS Object Model) tree 구조 생성

 

이 둘이 합쳐져서 Rendertree 를 만든다 

ex. display : none 인 요소를 제외하고 렌더링이 일어난다 

 

reflow(layout) : 어디에, 얼마나 크게 배치할 것인지를 계산

 

repaint (pain) : 색, 보더, 그림자 등 그리기

 

composite : 여러 레이어가 합쳐지는 과정

 

 

reflow는 리소스가 큰 작업임

 ex. 상위 요소가 padding 이 변경되거나 하면 reflow부터 다시 일어나야함   

 

reflow, repaint 를 일으키는 속성은 뭐가 있고, 줄이려면 어떻게 해야하는지 등 알아보기

( position : absolute 처리하거나  opacity 등)

 

https://www.youtube.com/watch?v=z1Jj7Xg-TkU