브라우저 구조

• 자바스크립트 엔진
  • 자바스크립트 코드를 해석하고 실행하는 인터프리터 크롬은 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
  1. Layout (리플로우) - Render tree 배치
  • 뷰포트 내에서 요소들의 정확한 위치와 크기 계산
  • %나 em 같이 상대적인 단위를 사용한 경우 이 과정에서 정확한 px단위로 변환
  1. Paint (리페인트) - Render tree 그리기
  • text, image 실제 픽셀로 화면에 그려짐
• css 변경 / animation 동작한 경우
  • 리플로우부터 다시 발생: 요소의 크기나 위치가 바뀔 때, 브라우저 창 크기가 바뀔 때(수치를 다시 계산해야 할 때)
  • 리페인트부터 다시 발생 : 배경 이미지나 텍스트 색상, 그림자 등 스타일의 변경 일어날 때(레이아웃의 수치는 변하지 않을 때)

프론트엔드의 비동기 (callback -> promise -> async/await)

• Promise
  • 자바스크립트에서 비동기를 간편하게 처리하기 위해 제공하는 객체 Promise 상태
  • pending : Promise 만들어지고 지정한 operation 수행 중인 상태
  • fulfilled : operation 성공적으로 완료한 상태
  • rejected : 파일 찾을 수 없거나 네트워크 에러
• 콜백함수
  • 다른 함수의 인자로 넘겨지는 함수
• 클로저
  • 중첩 함수에서 내부 함수가 부모함수에게 있는 변수를 가지고 있고 접근할 수 있는 것
  • 어떤 함수 A에서 선언한 변수 a를 참조하는 내부 함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상