웹 브라우저의 렌더링이라 .. 그럼 브라우저는?
브라우저
인터넷에 접속할 때 사용하는 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
우리가 인식하지 못할 뿐, 웹페이지는 미리 만들어진 것을 가져오는 게 아니라 실시간으로 그려지는 것에 가깝습니다. 실시간으로 웹사이트가 그려지는 과정, 이 과정을 웹 브라우저의 렌더링
yozm.wishket.com
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
브라우저 렌더링 과정 이해하기.
최근에 백엔드 팀원들과 CS공부를 하면서, 주소창에 을 입력했을 때 일어나는 일에 대해 공부하였다. 이때 백엔드 팀원이 받아온 HTML…
tecoble.techcourse.co.kr
'기타 덩덩 > 늘어나라 테크 지식' 카테고리의 다른 글
Scrum - 소프트웨어 개발 방법론 (0) | 2024.04.06 |
---|---|
VPN (1) | 2024.01.04 |
[모든 개발자를 위한 HTTP 웹 기본 지식 - 김영한] 세션8 HTTP 헤더2 - 캐시와 조건부 요청 (4) | 2023.10.04 |
[모든 개발자를 위한 HTTP 웹 기본 지식 - 김영한] 세션2 URI와 웹 브라우저 요청 흐름 (0) | 2023.10.02 |
[Web] CORS가 뭔데 (0) | 2023.05.01 |