- 브라우저 렌더링 방식을 뿌수기 시리즈의 상편입니다. 이 글은 본격적인 브라우저 렌더링 과정을 설명하기 이전, 브라우저를 구성하는 요소에 대해 쉽게 파악해보자라는 취지에서 쓰인 글입니다.
- 내용상의 오류는 댓글을 통해 남겨주시면 감사하겠습니다.
브라우저 렌더링 방식을 알아야 하는 이유
Make it work, Make it right, Make it fast
-Kent Beck-
웹 최적화란 쉽게 말해서 올바르게 동작하게 만들고, 빠르게 동작하게 만드는 것을 이야기 한다. 말은 쉽지 사실 Make it work 만으로도 벅차지만, 조금이라도 더 나은 사용자 경험을 위해서 웹 최적화는 알아두어야할 필요가 있따.
올바르게 동작하게 하려면 뭘 알아야해?
메모리와 네트워크 트래픽에 대해 이해가 필하고 이를 적절히 사용할 줄 알아야 한다.
빠르게 만들려면 뭘 알아야해?
⏰ 사용자의 행동에 빠르게 반응하도록 반응시간을 줄이는 법, 계산을 빠르게 할 수 있는 법, 초기 구동 시간(초기 애플리케이션이 로드 되는 시간)을 줄이는 법을 알아야한다.
이 중 우리는 사용자의 행동에 빠르게 반응하도록, 반응시간을 줄여보는 방법을 배워보자. 우선, 반응시간을 줄여보기 위해선 반드시 브라우저의 렌더링 방식을 알아야한다. 이 글은 나도 초보고 읽는 사람도 초보라는 전제하에 아주 쉽게 작성되었으니, 혹시나 부정확한 정보가 있다면 댓글로 와다닥 적어주시길.
브라우저 렌더링 방식을 이해하는 방법은 일단 누가! 무엇을! 언제! 하고 있는지 그것을 기억하는 게 중요하다. 우선 그 누가?의 대상이 되는 친구들을 알아야한다.
브라우저를 구성하는 요소들
이게 브라우저라는 것이다. 우리는 크롬만 띡- 누르면 이렇게 쉽게 볼 수 있지만, 우리가 이 글을 읽기까지 수많은 친구들이 우리를 도와주고 있다. 하지만 이렇게 보면 뭐가 뭔지 모르겠으니까 아래 그림으로 이해해보자
🖥 사용자 인터페이스 (aka 안내데스크)
페이지 뷰를 제외한 주소표시줄, 뒤로 가기 버튼, 새로고침 버튼 등이 있는 사용자가 요청한 페이지를 보여주는 창 이외의 사용자가 컨트롤할 수 있는 영역을 말한다.
인터페이스란, 상호작용을 뜻한다. 우리가 브라우저와 소통할 수 있는 버튼들, 주소표시줄이 있는 영역이기에 사용자 인터페이스라고 부른다.
📤 브라우저 엔진 (aka 중간관리자)
사용자의 요청을 렌더링 엔진에 전달해 주는 애!
사용자 인터페이스와 렌더링 엔진 사이에서 통신하는 역할을 해준다. 사용자가 URL을 입력하면
- 그게 자료저장소에 있으면? 사용자가 입력한 주소에 있는 자료를 찾고 렌더링 엔진한테 전달해준다.
- 그게 자료저장소에 없으면? URL값을 렌더링 엔진한테 던져버린다.
📱 자료저장소 (aka 고객 정보 저장소)
쿠시,캐시들이 들어있는 곳, 브라우저 안에 있다!! 브라우저의 개발자도구를 열어 Application탭을 가면 확인할 수 있다.
🎨 렌더링 엔진 (aka 실무자) (짱바쁨)
우리의 요청한 웹페이지를 보여주는 처리를 해주는 애!
렌더링이란, 눈으로 볼 수 있도록 그리는 것이다. 브라우저 엔진이 자료를 주면 전달받은 HTML,XML 문서를 파싱 해서 사용자가 요청한걸 웹페이지에 그려준다.
파싱이 뭔데 ? 파싱은 parseInt()에서의 parse를 떠올려주면 쉽다. 쉽게 이야기 해서 어떤 데이터를 원하는 형식으로 변환시켜주는 거라고 이해하면 쉽다.
렌더링 엔진은 브라우저 별로 다른데, 크롬은 웹킷을 사용하다가 현재는 Blink라는 자체적인 엔진을 구현하여 렌더링 엔진을 사용한다.
렌더링 엔진과 소통하는 친구들
↔️ Networking (출장)
아까 브라우저 엔진이 던지고 간 URL 값을 전달받았다면, URL를 Networking(통신)에 전달해서 데이터를 받아온다. Networking은 이름 그대로 인터넷 통신과 관련된 보안 문제를 처리한다.
🥸 JS Engine (번역가)
자바스크립트 해석기라고도 부르며, 사이트에 포함된 JavaScript 코드의 구문을 분석하고 실행하는 역할을 한다. 렌더링 엔진은 JS Engine을 통해 받아온 JS 파일을 파싱을 한다.
☑️ UI Backend (그림쟁이)
체크 박스,버튼 같은 기본적인 위젯들을 그려주는 구성 요소이다. OS마다 셀렉트 버튼이 다른 이유가 운영체제의 인터페이스를 따르는 UI를 따르는 Render Tree를 브라우저에 그림
렌더링 엔진은 일단 브라우저 엔진한테 전달받은 HTML, XML 등의 문서를 화면에 그리고, 또 URL을 전달받으면 통신을 통해 데이터 받아오고, 생성된 Render Tree를 UI Backend로 전달도 해야하는 아무튼 바쁜 친구다.
이 렌더링엔진이 대체 무슨일을 해서 브라우저가 렌더링이 되는 건지 다음편에서 알아보도록 하자!
