프론트엔드 개발자가 되기위한 여정 -32

이정우·2022년 10월 17일
0

frontend-bootcamp

목록 보기
34/60

밸! 하~

오늘은 browerrederingprocess에대해서 알아보겠습니다!

즉 브라우저가 어떻게 그려지는지 알아볼껀데요

바로 알아볼까요??

1. Browser Rendering process

먼저 소스파일을 다운받아 HTMl과 CSS를 준비하게 됩니다
이후, HTML과 CSS를 합치게 되는데요
그다음에 위치를 그리게되는데요
여기서의 위치는
layout에 따라서 그리게 됩니다
이 과정을 REflow라고 하는데요
기존에 가져왔던것을 layout에 따라서 그리는 것을 의미합니다

마지막으로 색을 칠하게 됩니다
파일내부에서 지정한대로 색칠을 하게 되는데요
이것을 REpaint라고 합니다

그럼 Repaint와 Reflow중 어떤과정이 시간이 더 오래걸릴까요?
바로 Reflow입니다!
예를 들어
Hover라는 옵션을 써서 색깔을 바꾸게 된다면 바로바로 repaint를 하면 되지만
hover시 위치가 바뀌게 된다면 Reflow부터 시작을 해서 repaint를 하게됩니다
즉 repaint는 repaint한개만 일어나면 되지만
reflow의 경우에는 reflow이후 repaint를 다시 해줘야하기 때문에
두개의 과정이 다시 발생하기에
속도의 차이가 조금더 있겠죠?

이러한 과정을 다 거친이후
합치게 됩니다
이 합치는 과정을 바로 composite라고 부릅니다!

여기서 알수있는것

브라우저의 역할은 무엇일까요??

브라우저의 역할은 사용자의 요청을 서버에 전달하고 그결과를 화면에 나타내는 과정인데 렌더링은 어떻게 일어나는가
바로 렌더링 엔진이 HTML문서를 파싱하여 DOM트리를 만들고 CSS문서를 파싱하여 CSSOM트리를 만들게 됩니다
이렇게 되어서
DOM 과 CSSOM을 이용하여 렌더트리를 만들게 되고
이 이후에 위에 설명드렸던 layout을 그리기 시작하는것입니다 !

자 오늘은 프론트 엔드 개발자라면 반드시 알아야할 브라우저의 랜더링 과정에 대해서 알아보았는데요!
깊은 내용은 들어가지 않고 간단하게 개념을 먼저 잡고 가기위해서 간단히 포스팅을 해보았습니다
그러면 부족한지식이지만 오늘도 지식한개 쌓아가게요!

그럼 오늘도 이만!

밸~바!

profile
주니어 프론트엔드 개발자

0개의 댓글