브라우저 구조
•
자바스크립트 엔진
◦
자바스크립트 코드를 해석하고 실행하는 인터프리터
크롬은 v8, 사파리는 webkit
•
이벤트 루프
◦
자바스크립트 엔진의 뒷편에서 동작하는 장치
◦
call stack(호출 스택)과 콜백 큐를 계속 주시하고 있음
◦
call stack이 비어있으면 콜백 큐에 먼저 들어온 순서대로 콜백 함수들을 호출 스택으로 집어넣음
•
콜백 큐(태스크 큐)
◦
web API의 콜백 함수들이 대기하는 큐
•
마이크로 태스크 큐
◦
Promise의 반환 객체가 (then, catch) 대기하는 큐
•
web API
◦
setTimeout, DOM, Http 요청 등 모두 비동기 요청
◦
작동을 하면 콜백 큐에서 실행 대기
◦
자바스크립트 엔진은 싱글스레드이지만 web API는 멀티스레드로 동작
◦
setTimeout(callback, 0) 실행 과정 : 콜스택이 비어야 콜백큐에 넣어진 요청이 콜스택에 갈 수 있기 때문에, 콜스택에 있는 모든 함수가 실행된 후 setTimeout 실행
브라우저 렌더링
•
브라우저 실행 과정
1.
렌더링 엔진이 HTML, CSS 파싱 (브라우저 렌더링)
2.
브라우저 엔진이 유저 인터페이스와 렌더링 엔진 연결
•
렌더링 엔진 동작 과정(Critical Rendering Path)
1.
HTML 태그 토큰화되어 노드 객체로 바뀌고 DOM tree 생성
2.
스타일 CSSOM tree 생성
3.
DOM tree와 CSSOM tree 합친 Render tree 생성
◦
document 객체부터 각 노드 순회하면서 각각에 맞는 CSSOM 찾아서 규칙 적용
◦
meta, display:none 속성은 렌더와 관련 없어서 Render tree에 포함X
4.
Layout (리플로우) - Render tree 배치
◦
뷰포트 내에서 요소들의 정확한 위치와 크기 계산
◦
%나 em 같이 상대적인 단위를 사용한 경우 이 과정에서 정확한 px단위로 변환
5.
Paint (리페인트) - Render tree 그리기
◦
text, image 실제 픽셀로 화면에 그려짐
•
css 변경 / animation 동작한 경우
◦
리플로우부터 다시 발생: 요소의 크기나 위치가 바뀔 때, 브라우저 창 크기가 바뀔 때(수치를 다시 계산해야 할 때)
◦
리페인트부터 다시 발생 : 배경 이미지나 텍스트 색상, 그림자 등 스타일의 변경 일어날 때(레이아웃의 수치는 변하지 않을 때)
프론트엔드의 비동기 (callback -> promise -> async/await)
•
Promise
◦
자바스크립트에서 비동기를 간편하게 처리하기 위해 제공하는 객체
Promise 상태
◦
pending : Promise 만들어지고 지정한 operation 수행 중인 상태
◦
fulfilled : operation 성공적으로 완료한 상태
◦
rejected : 파일 찾을 수 없거나 네트워크 에러
•
콜백함수
◦
다른 함수의 인자로 넘겨지는 함수
•
클로저
◦
중첩 함수에서 내부 함수가 부모함수에게 있는 변수를 가지고 있고 접근할 수 있는 것
◦
어떤 함수 A에서 선언한 변수 a를 참조하는 내부 함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상
