웹 브라우저 렌더링

웹 브라우저의 렌더링이라 .. 그럼 브라우저는?

브라우저

인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Explorer 등이다.

브라우저는 웹에서 페이지를 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 한다.

유저가 선택한 페이지의 요소들을 서버로부터 받아와서 유저에게 보여준다. 

 

실시간으로 웹 사이트가 그려지는 과정, 이 과정이 웹 브라우저의 렌더링 과정이다.

인터넷 웹 브라우저는 두 개의 엔진이 있다. 

1. 렌더링 엔진

• 사용자가 볼 화면을 그려내는 역할
• 압축파일을 해제해 파일을 실행하는 것과 유사
• 크롬, 엣지 브라우저는 크롬의 블링크 렌더링 엔진을 사용

 

2. 자바스크립트 엔진

- 자바스크립트 코드를 읽고, 기능을 작동시키는 역할

 

담겨진 내용

HTML : 문서에 들어갈 텍스트 내용, 이미지, 파일 등

CSS : 문서의 생김, 그림이나 파일을 어떻게 배치할지

JavaScript :  HTML 구조 변형, 기능적인 내용

 

브라우저 렌더링 동작 과정

1.  Parsing : HTML 파일과 CSS 파일을 파싱해서 각각의 Tree 생성

• HTML 마크업 처리하고 DOM 트리 빌드
• CSS 마크업 처리하고 CSSOM 트리 빌드

2. Style : 두 개의 Tree 결합 -> Rendering Tree로 결합

3. Layout : Rendering Tree에서 각 노드의 위치와 크기 계산

• 크기 값이 %였다면 픽셀 단위로 변환

4. Paint : 계산된 값을 이용해 각 노드를 화면상의 픽셀로 변환 -> 레이어 생성

• Layout 단계에서 계산된 값
• 여러 개의 레이어로 관리하기에 스타일이 복잡할수록 paint 시간이 늘어남

5. Composite : 레이어 합성하면 실제 화면

• Paint 단계에서 생성된 레이어를 합성

 

구글의 라이트 하우스 기능

- 렌더링 과정을 눈으로 확인

- 웹페이지가 열리는 시간, 모바일 최적화 수준, 코드 사용 등 여러 기준점을 정해 웹페이지에 점수를 매김

- 속도가 오래 걸리는 요소가 있다면 내용을 삭제해서 렌더링 속도 개선 가능 

- 개발자 도구를 열어서 활용 가능

- 포탈 서비스처럼 복잡하고 다양한 기능이 들어있는 서비스일수록 로딩 시간 체크의 중요성 ↑

 

웹 개발자 체크 사항

•  텍스트를 표현하기 위한 웹 폰트의 용량
• 사진 이미지의 용량
• 서비스 아이콘이나 벡터 이미지의 용량
• 동영상이나 첨부파일의 용량

최근에는 PC 보다 모바일 환경을 더 많이 이용한다. PC에서 문제없는 용량이더라도 모바일을 위한 최적화는 따로 필요하다. 전 세계를 기준으로 보면 아직 많은 국가들이 30Mbps도 되지 않는 속도의 인터넷을 사용하기에 해외 기준이면, 경량화 중요시한다. 

똑같은 사용자를 기준으로 가벼운 웹 사이트 = 서버 유지 비용 ↓ => 합리적 선택 

 

https://yozm.wishket.com/magazine/detail/646/

웹 브라우저의 렌더링이란? | 요즘IT

 

https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/

브라우저 렌더링 과정 이해하기.