브라우저 렌더링이 이루어지는 과정
웹을 개발하는 사람로써 웹브라우저가 렌더링 되는 과정을 이해하는 것은 필수가 아닐까합니다.
저는 왜???
라는 말을 참 좋아하는데요.
어떠한 행위를 할때 ‘왜?’ 라고 생각해보는 과정은 좋은 습관이라고 생각합니다.
우리는 웹개발을 하는 사람으로써, 어떠한 과정에 한계를 두지 말고 지금은 모르더라도 점진적으로 알아가야 한다고 생각을 하는데요.
우리가 작업을 하는 HTML, CSS, JavaScript가 렌더링 되는 과정을 이해하는 것이 매우 중요하다고 생각합니다.
서론이 조금 길었네요. 이제 본론으로 들어가겠습니다.
우리가 구현하는 브라우저는 과연 어떻게 렌더링이 될까요?
우선 ‘렌더링’ 부터 알아보도록 하겠습니다.
렌더링이란?
렌더링(Rendering)은 컴퓨터 프로그램을 사용하여 모델(또는 이들을 모아놓은 장면인 씬(scene) 파일)로부터 영상을 만들어내는 과정을 말한다.
라고 간단하게 표현하고 있습니다.
한마디로 클라이언트(사용자)에서 서버에 파일을 받아 브라우저에 뿌려주는 과정이라고 볼 수 있습니다.
더 깊이 알고싶으시면 밑에 위키링크를 클릭해보세요.
위키 렌더링
클라이언트란 단어는 편하게 사용자라고 이해하시면 쉬울 것 같습니다.
모바일에서 접속하면, 모바일 === 클라인언트
pc에서 접속하면, pc === 클라이언트
인것이죠. 이는 브라우저에만 국한된 단어는 아닙니다. 그냥 사용자를 클라이언트라고 이해하시면 될 것 같습니다.
제가 활동하고 있는 커뮤니티에서 한때 잠깐 어떤 질문이 올라온적이 있는데요.
질문의 내용은 html, css, javascript 렌더링 순서에 관한 질문이었습니다.
그림을 살펴보도록하죠.
그림을 보면 doctype을 시작으로 html태그가 처음 나오는것을 보실 수 있습니다.
다음 meta태그, title태그 등을 지나 head태그안에 script와 link태그를 이용한 css를 불러오는 과정을 보실수 있습니다.
그렇다면..과연 html, css, javascript 중 가장 먼저 렌더링 되는 것은 무엇일까요?
정답 : html
맞습니다 html이 불러와 지고 그다음 css 및 javascript가 렌더링됩니다.
아 참 빼먹은 설명이 있네요.
우리의 컴퓨터 및 프로그램들은
좌에서 우로 그리고
위에서 아래로
문서를 파싱합니다.
파싱 === 문서를 읽는다 정도로 이해하시면 될 것 같습니다.
렌더링에 관련되서 많은 서적 및 우리의 친구 구글에 보면 많은 자료들이 있습니다.
그중 우리 대한민국의 포탈 네이버에서도 렌더링 되는 과정에대해 설명해 놓은 자료가 있습니다.
그 중 참고를 해서 보여드리면,
dom트리..
랜더트리…
이건무슨말이다냐….ㅋㅋㅋㅋ
DOM트리 란? 하나의 태그로 구성된 형태라고 보시면 될 것 같습니다.
1 | <div> |
이 코드를 기준으로 설명드리면, ‘div’라는 돔이 있고, 그자식으로 ‘p’라는 돔이 ‘DOM트리’ 라는 텍스트를 가지고 있다.
어떤가요. 이해하셨나요? 우리가 사용하는 태그 하나하나가 모두 DOM이 됩니다.
랜더트리 란? 쉽게표현해 html과 css 그리고 넓게 javascript까지!
스타일에 관여하는 모든 문서를 파싱하고 html의 돔에 적용을 시키기 전에!
그러니까 그리기 전에 기억을 해두는 것이라고 생각을 하면 편하겠네요.
어떠한 DOM은 display가 block이고, 어떠한 DOM은 color가 #000이고, 이러한 과정을 각각의 돔을 실제 그리기전에 스타일을 입히는 것!
어떤가요 조금 이해 되셨나요?
웹킷(크롬)과 모질라의 게코에서 설명해 놓은 그림을 보면
웹킷
모질라 게코
두 그림을 보면 조금의 용어의 차이는 있지만, 결론적으로 과정을 보면 동일한것을 보실 수 있습니다.
어떤가요? 렌더링 과정 그림을 보니 조금 더 이해가 되나요..?
DOM트리 와 랜더트리 과정을 보니…
문서가 길수록, 구조가 복잡하면, 렌더링에 영향이 있겠구나..
그렇기 때문에 불필요한 태그 및 필요없는 부분을 지우라는 것이구나..
라고 생각이 들면 이번 포스팅은 성공인것 같습니다.
최적화된 렌더링에 대해 생각해보고, 실천을 하는것이 각각 프론트엔드개발자 더 발전을 이룰 수 있는 과정이 아닐까 생각이 듭니다.
마지막 더 자세한 사항은 D2 브라우저렌더링를 통해 공부해보세요.
다음은 작업을 할 때 빌드도구 예를 들면 걸프나 그런트 또는 웹팩등 다양항 빌드도구를 사용하는데 사용하는 이유에 대해 설명해보겠습니다.
먼저 맛보기로 설명드리면, 작업환경을 편하게 하는것 뿐만 아니라 렌더링에도 영향을 줄수 있는 작업들을 포함하고 있습니다.
그럼 이만 오늘의 포스팅을 마치겠습니다.