웹 브라우저
HTML 문서와 그림, 멀티미디어 파일등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭.
주요 웹 브라우저로는 구글 크롬, 모질라 파이어폭스 등이 있다.
웹 브라우저 중요한가..?
프로그래밍과 직접적으로 상관없어 보일 수 있지만 플랫폼이 어떻게 동작하는지 잘 이해해야 좋은 소프트웨어를 만들 수 있다.
소프트웨어 성능의 대부분은 웹 브라우저의 동작과정과 관련이 있다.
웹 브라우저 작동원리
웹 페이지 로드 과정
※ 위 이미지의 노란색 부분은 네트워크 레벨로 자바스크립트를 읽기 전이다(대부분 백엔드에서 담당하는 작업들..)
- Prompt for unload
- 다른 페이지로 이동할때 발생
- unloadEventStart => window.beforeunload 이벤트 발생
- Rediect
- 요청한 URL(서버)에서 redirection 신호를 보낼 때 발생
- AppCache
- 실제로 서버의 데이터를 읽어오기 전에 브라우저 캐시에 저장된 데이터가 있는지 확인
- DNS(Domain Name Serveice)
- DNS를 통해 도메인을 서버의 실제 IP로 알아낸다.
- TCP, Request, Response
- TCP: 서버와 클라이언트간에 데이터를 신뢰성 있게 전달하기 위해 만들어진 프로토콜
- TCP를 통해 서버에게 Request하고 Response를 받는다.
- Processing
- 서버에서 받은 파일(HTML, CSS, JS, etc..)을 파싱하여 렌더링
- document.DOMContentLoaded: DOM tree까지 그려낸 상태, 자바스크립트로 기능을 추가할수 있게 된다.
- 서버 리소스(이미지, 영상)등은 아직 읽어들이기 전
- Load
- 필요한 리소스들을 모두 다운로드하고 읽어들인 상태
- window.load 이벤트 발생
브라우저 주요 구성 요소
사용자 인터페이스
- 화면에서 웹페이지 부분을 제외한 나머지 (사용자가 인터렉션 가능한 영역)
- 대표적으로 주소표시줄, 북마크, 앞으로, 뒤로가기 버튼 등이 있다.
브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진의 다리 역할
렌더링 엔진
- 실질적으로 웹 페이지를 표현하는 부분
- HTML, CSS, JS를 해석하고 그려낸다.
- 통신
- HTTP 요청과 같은 네트워크 호출에 사용됨.
- 자바스크립트 해석기
- JavaScript 코드를 해석하고 실행
- UI 백엔드
- 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
자료 저장소
- 쿠키나 파일같은 데이터를 저장한다.
렌더링 엔진의 동작 과정
1. HTML, CSS, JS 파싱
- 문서를 읽어 브라우저가 문법을 분석, 코드를 이해한다.
<script>태그를 만나면 JS를 해석할 때까지 파싱을 멈춘다.
2. DOM, CSSOM 변환
- 브라우저에서 사용할 수 있는 구조로 변환한다
3. 렌더 트리 구축
- DOM과 CSSOM을 결합하여 화면에 그려낼 내용을 작성한다.
- 즉, 어떤 엘리먼트에 어떤 스타일을 적용할 것인지 정해진다.
4. 렌더 트리 배치
- 각 요소의 크기와 위치를 계산한다. (Layout 단계)
5. 렌더 트리 그리기
- 요소를 실제로 픽셀로 변환하여 그린다. (Paint 단계, Rasterize)
- 픽셀로 그려진 여러 레이러를 합성한다. (Compositing 단계)
Layout 단계가 발생하면 반드시 뒷 단계들을 모두 거치게 된다.
즉, Layout단계가 발생하게 되면 많은 비용이 발생하게 된다.
자바스크립트나 css로 Layout에 변화를 주게 되면 위 단계들을 거치게 되는데 어떤 단계의 변화를 주냐에 따라 렌더링 성능에 영향을 주게된다.
Layer는 개발자도구에서 확인이 가능하다.
개발자도구 오른쪽 상단에 : (more) 버튼 클릭 => More tools => Layers
Front-End 😲