[프론트엔드 면접 질문] 브라우저 렌더링원리

홈페이지가 사용자에게 보이는 순서에 대해서 설명해주세요

1. 주소창에 입력된 주소를 통해 브라우저 URL을 해석해 서버를 찾아간다.
2. 이후 DNS가 연결해 줄 곳을 찾는다 (실제서버)
3. 서버에서 클라이언트가 요청한 자원을 보내준다. (보통 HTML 문서)
4. 클라이언트는 HTML문서를 파싱하여 DOM을 생성한다.
   4-1. 중간에 CSS나 JS 스크립트를 다운받는 태그를 만나면 DOM 생성을 중지하고 해당 자원들을 다운로드 한다.
5. HTML -> DOM, CSS -> CSSOM 을 생성한다.
6. 만들어진 DOM과 CSSOM을 브라우저에 렌더링 하기 위해 렌더 트리로 결합한다.
7. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단하고, 이후 JS엔진을 실행하고 JS코드를 파싱한다.

브라우저의 주요 기능 : 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는것

브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 : 요청한 콘텐스를 브라우저 화면에 표시
(Gecko 엔진, WebKit 엔진)

렌더링 엔진의 동작과정

위와 같은 일련의 과정들이 점진적으로 진행된다!
모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

호이스팅에 대해서 설명해보게요

클로저는 무엇인가요? 원리와 왜 사용하는지 알려주세요

CSS

CSS에서 Marign과 padding에 대해서 설명해주세요.

position을 어떻게 사용하는지 알려주세요

get, post가 어떻게 다르게 쓰는지 알려주세요