브라우저란?
웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다.
브라우저의 구조
브라우저의 구조를 검색하면 해당 이미지를 가장 많이 확인할 수 있다.
각각에 대한 간단한 설명을 함께 적어보았다.
1. 사용자 인터페이스
사용자가 접근할 수 있는 영역입니다. URL를 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼 , 홈 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분입니다.
2. 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다. Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 합니다.
3. 렌더링 엔진
웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타냅니다. 예를 들어 HTML 문서를 응답받으면 HTML과 CSS를 파싱 하여 화면에 표시합니다. 브라우저의 동작 원리를 이해하려면 렌더링 엔진의 이해가 중요합니다.
브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합합니다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타냅니다.
4. 통신
HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용됩니다.
5. UI 백엔드
select, input 등 기본적인 위젯을 그리는 인터페이스 입니다.
6. 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행합니다.
7. 자료 저장소
Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역입니다.
렌더링 엔진
우리가 naver.com 을 검색했을 때 컴퓨터가 이해하는 주소는 IP주소이고 naver.com 도메인은 사용자가 보기 편하도록 부여한 이름이다.
(IP주소 예시 223.62.162.17)
IP 주소를 얻어내는 단계
- 유저가 naver.com 검색
- 컴퓨터는 naver.com 도메인을 들고 DNS(Domain Name System) 에 찾아가서 해당 IP주소를 달라고 함
- 한번 받은 주소는 DNS캐시에 저장해서 다음번에는 바로 가져올 수 있음
IP 주소를 받아온 후
- IP 주소를 받은 후에 해당 서버로 가서 HTML 파일을 받아옴 → 바이트 스트림 형태로 줌 (ex.01010110101)
- 우리가 이해할 수 있는 HTML 파일로 인코딩함(UTF-8 을 가장 많이 사용)
- HTML 파일을 읽어내려가기 시작함 → 토큰화
- 토큰을 객체(object)화 시킴 → 노드(Node)
- HTML은 수직관계이기 때문에 각각의 태그들끼리 관계 설정을 해줌 → Model
DOM(Document Object Model) Tree
노드에 관계를 부여해주면 돔트리가 형성된다.
- Tree: 자료구조 중 하나
HTML의 목표
문서를 해석해서 DOM Tree를 만드는 것!
CSSOM
HTML을 읽어내리다가
<link rel="style sheet" href="style.css">
link 태그를 만나면 다시 IP주소에 찾아가서 css파일을 요청한다.
주소를 받아온 후 다시 같은과정 반복
자바스크립트 태그가 제일 하단에 있는 이유?
HTML 파일을 보면 <script src="main.js"></script> 가 항상 아래에 있는것을 볼 수 있다.
이유가 무엇일까?
📍 자바스크립트가 실행되는 동안에는 DOM 파싱을 멈춤!
javascript는 힘이 있어서 html을 쓰지 않고 javascript 파일 만으로도 노드를 만들 수 있기 때문에... 파싱을 멈추고 js의 요청사항을 모아서 한번에 처리하기 위해
자바스크립트가 DOM을 막는게 싫다면?
script 태그에 defer 를 써주면됨
그러면 CSS파일은 왜 위에다 둠?
DOM은 CSSOM을 만나야 다음스텝으로 나아갈 수 있기 때문에 빠르게 만나기 위해 상단에 둔다
Render Tree
DOM + CSSOM
랜더트리가 형성되면 그려나가기 시작한다
레이어를 여러개로 나누어서 그린 후 마지막 단계에서 합치게 됨
→ 부분적으로 바뀔 경우에 효율성을 높이기 위해!
Layout → Paint → Composite 단계는 우리가 웹사이트를 사용할 때 반복되는 구간이다.
레이아웃이 반복(Reflow)되는 순간은?
- 페이지 초기 렌더링 시(최초 Layout)
- 윈도우 리사이징 시(Viewport 크기 변경 시)
- 노드 추가 또는 제거
- 요소의 위치, 크기 변경(margin, padding, width 등등)
- 폰트나 텍스트 내용 변경, 이미지 크기 변경
Reflow를 줄이는 것이 웹사이트 성능향상에 도움이 된다!
웹사이트 성능을 높이기 위해서는?
- 소스의 사이즈 줄이기
- 외부에서 가져오는 리소스양 줄이기(media쿼리, 불필요한 파일은 필요할 때 가져오기)
- 외부에서 가져오는 횟수 줄이기(인라인)
- Reflow, Repaint 줄이기(ex. left나 right 보다는 transform, 1px보다는 5px씩 등)
브라우저 렌더링 요약
먼저 HTML을 파싱하여 DOM 노드로 변환하고 CSS 파일과 포함된 스타일 요소들을 파싱하여 CSS 객체 모델이 생성되고 정해진 순서대로 렌더 트리를 형성한다. 그 후에는 이 렌더 트리를 기반으로 브라우저는 화면에 각 요소들을 배치하고 렌더링 한다.
