브라우저
1. 브라우저?
'브라우저' 또는 '웹 브라우저'란 사용자가 인터넷을 통해 웹 페이지를 검색할 때 접속할 수 있는 도구이다. 사용자가 원하는 웹 페이지의 주소를 입력하면 브라우저는 그 웹 페이지에 대한 HTML, CSS, JS를 받아 해석해서 화면에 보여준다. 즉, 인터넷에서 사용자가 원하는 웹 페이지의 모든 정보를 화면에 보여주고, 문서 검색을 도와주는 응용 프로그램이다.
사용자수가 많고 인지도가 높은 주요 5개의 웹 브라우저인 Chrome, Safari, Firefox, Microsoft Edge, Opera를 '5대 브라우저'라고 부른다. 종류에 따라 사용자 인터페이스, 보안 기능, 성능 등에 차이가 있다.
2. 브라우저의 작동 방식
브라우저는 HTTP(Hyper Text Transfer Protocol) 또는 HTTPS(Hyper Text Transfer Protocol Secure) 방식으로 정보를 가져와서 사용자가 원하는 웹 페이지의 화면을 보여준다. HTTP는 텍스트, 이미지, 비디오가 웹에서 전송되는 방식을 정의하는 일종의 약속이다.
사용자가 원하는 웹 페이지의 주소를 입력하면 브라우저는 해당 주소의 웹 페이지를 서버에서 가져온다. 그 후 브라우저는 HTML, CSS, JS와 같은 코드를 해석해서 화면에 보여준다. 브라우저는 웹 페이지 안에서 사용자와의 상호작용을 처리하고 필요한 경우 상호작용에 대한 웹 페이지의 구조, 스타일, 동작을 결정하기 위해 서버에 추가 요청을 보내고 응답을 받아 화면에 보여준다.
CRP
CRP?
브라우저는웹 서버에 요청을 하고 응답을 받는다. 응답에는 다양한 코드들이 들어있는데, 이 코드들에는 웹 페이지를 구성하는 많은 정보가 담겨 있다. 특히 응답으로 받은 HTML은 웹 페이지를 구성하는 요소들의 정보, CSS, JS에 대한 정보가 들어있다. 그러나 HTML은 우리가 보는 웹 페이지와 많이 달라서 사용자가 확인하기 어렵다. 또한, JS도 동작할 수 없기 때문에 HTML을 우리가 보는 웹 페이지로 바꿔야 하는데 이러한 과정을 CRP(Critical Rendering Path)라고 한다. CRP에 따라 웹 페이지가 어떻게 표시되는지 결정되고, 최적화를 통해 페이지의 로딩 속도를 빠르게도 할 수 있다.
2. CRP 과정
간단하게 CRP 과정은 아래의 5단계 순서로 실행된다.
1. DOM(Document Object Model) Tree 생성
브라우저가 서버에서 응답받은 HTML 문서를 파싱하여 DOM Tree를 만든다. DOM Tree는 웹 페이지의 버튼, 텍스트 같은 Element를 계층적으로 나타낸 것을 말한다.
2. CSSOM(CSS Object Model) 생성
브라우저는 서버에서 응답받은 CSS 문서를 파싱하여 CSSOM을 생성한다. CSSOM은 스타일 규칙을 포함하는 Tree 구조이고, 웹페이지의 각 노드에 대한 스타일정보를 가지고 있다. 계층적 구조이기 때문에 CSS 정보가 중복 될 수 있다. 이러한 경우에는 기존에 있던 CSS 정보는 사라지고 CSS 정보가 덮어씌어진다.
3. Render Tree 생성
브라우저는 DOM과 CSSOM을 사용하여 Render Tree를 만든다. Render Tree는 사용자가 보는 화면에 버튼, 텍스트와 같이 실제로 표시되는 Element들을 포함하는 계층적 구조이다. Render Tree를 만드는 과정에서 동적으로 만들어지는 Element들은 제외될 수 있다.
4. Layout
브라우저는 Render Tree를 기반으로 Element들의 위치, 크기 등을 모두 고려하여 Viewport를 설정한다. 보통 Viewport의 값은 브라우저를 사용하는 모니터 해상도를 고려하여 설정된다.
5. Paint
브라우저는 마지막으로 앞 단계들에 의해 만들어진 정보로 화면에 Element들을 그리는 Paint 작업을 수행한다. 이 단계에서 pixel 단위로 사용자에게 화면을 보여준다. Paint 작업에서는 CSS의 복잡도, DOM의 크기가 고려되어 시간이 결정된다.
3. CRP 최적화
CRP를 최적화하기 위해서는 주요 Element들을 서버에서 받는 것과 처리하는 것을 최적화하고, 렌더링을 차단하는 요소들을 최소화해야한다. 이를 위해 리소스들의 압축, 병렬 다운로드, 스크립트의 비동기 로딩, CSS 및 JS의 최소화 들의 방법을 사용할 수 있다. 그리고 웹 페이지의 로딩 속도를 빠르게 하기 위해서는 CRP를 최소화하는 방향으로 웹 페이지의 구조와 스타일링을 설계할 수 있다.
