브라우저 작동원리
브라우저
- HTML, 이미지, 폰트 등 사용자가 선택한 자원을 전송, 표현하는 소프트웨어 ex)크롬, 엣지, 사파리, 파이어폭스 등
- 웹표준을 따르는 HTML과 CSS로 구성됨
* 웹표준 : 표준이 없어 파편화가 심했기에 2019년 W3C와 WHATWG에서 웹표준 지정
브라우저의 기본구조
통신
① 사용자가 주소표시줄에 주소 입력
ⓐ UI 스레드가 검색어인지 url인지 확인하여 파싱
② 사용자가 [ENTER]입력
ⓑ UI 스레드가 네트워크 호출, 네트워크 스레드 요청처리, 응답이 HTML이라면 응답결과를 렌더러 프로세스에 전달
*스레드 : 프로세스에서 실행하는 프로그램 중 일부를 실행하는 역할
* 프로세스 : 어플리케이션을 실행할 프로그램
ⓒ HTML 데이터 수신 : 렌더러 프로세스의 메인스레드는 HTML을 파싱하여 DOM트리로 변환, CSSOM트리 구축
DOM트리 + CSSOM 트리 = 렌더트리(최종적으로 화면에 표시되는 모든 노드와 스타일정보 포함)
Layout
z축을 활용하는 3차원으로 페이지에 출력될 노드의 크리, 위치, 순서정보를 계산, 브라우저의 자체 최적화 로직(더티 비트 시스템)
* 더티 비트 시스템 : 특정 element의 재배치시 해당 element를 더티라고 표시하여 재실행시 해당 부분만 다시 계싼하여 리소스 낭비방지, 비동기 일괄작업으로 작업횟수 감소
Paint
배치된 element에 색을 입히고 layer위치를 결정, HTML의 최상위부터 재귀적으로 z-index가 낮은 순서대로 페인팅됨
* reflow : layout, paint 재실행
* repaint : paint 재실행
* composite : 레이어 최종합성
JS엔진
JS엔진
JS를 읽어서 컴퓨터가 읽을수 있는 기계어로 변환해주는 역할을 하며 인터프리터 또는 JIT컴파일을 사용하며 웹 브라우저에서 가장 대표적으로 사용됨
JS엔진 동작과정
브라우저에서 제공하는 web API와 이벤트 등이 함께 동작하면서 런타임이 이루어짐
버튼클릭과 같은 이벤트나 DOM이벤트, http요청, setTimeout과 같은 비동기함수는 web API를 호출하며 web API는 콜백함수를 Calback Queue에 넣음
JS엔진의 종류
| V8 | Google, Chrome, Node.js | - C++로 만들어짐 - JIT컴파일러 사용 |
| Rhino Engine | Mozilla, Firefox | - Java로 만들어짐 - SpiderMonkey의 Java 버전 - 인터프리터 및 컴파일러로 JS Code를 Java bytecode로 변환 |
| SpiderMonkey Engine | Mozilla, Firefox | - C로 만들어짐 - 최조의 JS엔진 - 넷스케이프 네비게이터 웹 브라우저를 위해 개발 |
| Chakra Engine | MS, IE9+, Edge | - IE용 엔진 |
| Webkit Engine | Applem Safari | - Apple용 엔진 |
V8
가장많이 사용되는 대표적인 JS엔진으로 Google에서 만듦, Chrome브라우저와 Node.js에서 사용됨, 속도향상을 위해 JIT컴파일러를 사용하여 JS Code를 기계어로 변환함(중간 바이트코드 생산x, 속도향상), Memory Heap과 Call Stack으로 이루어짐
메모리힙(Memory Heap)
메모리 할당이 일어나는 곳으로 참조타입(객체, 배열, 함수 등) 데이터가 저장됨, 메모리힙의 주소값은 콜스택의 변수 식별자의 값으로 실행컨텍스트의 렉시컬 환경에 각각 저장됨
* 실행컨텍스트 : 실행 가능한 코드가 실행되기 위한 환경
호출스택(Call Stack)
코드 실행에 따라 호출 스택이 쌓이는 곳, 프로그램상의 위치를 기록하는 자료구조, JS는 싱글 쓰레드 기반언어이므로 호출 스택이 하나라 한 번에 한 작업만 처리 가능, 수행할 작업을 LIFO구조로 쌓고 실행, 호출 스택의 처리시간이 지연될 경우 브라우저는 작업대기상태가 되어 에러가 발생되는 것을 방지하기 위한 비동기 콜백이 있음
WEB API
API : 응용프로그램에서 사용할수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어하 수 있게 만든 인터페이스, 파일제어, 창제어, 화상처리 등
REST API : 핵심컨텐츠 및 기능을 외부사이트에서 활용할 수 있도록 제공되는 인터페이스, 프로그램간의 소통 용이, HTTP와 URI기반, 주로 .JSON사용, 데이터의 이름으로 구분하여 해당 자원에 대한 상태정보 공유, 해당자원에 대한 CRUD적용(GET, POST, PUT, DELETE, PATCH)
WEB API : REST API가 아닌 API
참고자료)
브라우저 작동원리
https://www.youtube.com/watch?v=v8H5ujL4Tt8
https://www.youtube.com/watch?v=GAyZ_QgYYYo
https://poiemaweb.com/js-browser
https://d2.naver.com/helloworld/59361
js엔진
https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/
https://bnbgg.tistory.com/8
https://velog.io/@kirin/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84JavaScript-engine
webAPI
https://velog.io/@mollog/Web-API-MDN-%EB%82%B4%EC%9A%A9-%EC%A0%95%EB%A6%AC
https://bellog.tistory.com/101