브라우저에서 URL을 입력하게되면 이러한 순서로 진행이 됩니다.
- 먼저 브라우저가 서버에게 HTML 파일을 요청합니다. (request)
- 파일을 서버에게 받아서 로딩을 합니다. (loading)
- 파일을 한줄씩 읽어 DOM 요소로 변환하는 과정을 scripting 이라고 합니다. (scripting)
- DOM 요소로 변환하고, CSS 요소를 CSSOM으로 변환합니다. (scripting)
- 변환한 것을 window에 표기하기 위해 Rendering Tree를 만듭니다. (rendering)
- Render Tree의 각 요소들이 어떤 위치에 어떤 크기로 표기되는지 계산을 합니다 (layout)
- 화면에 요소들을 그립니다. (painting)
출처 블로그 : https://velog.io/@moonshadow/
IP 주소 확인과 3Way-HandShake
- 웹사이트에 접속을 하면, 웹브라우저는 DNS 서버에게 해당 호스트(www.hello.com)의 IP 주소를 물어본다.
- IP 주소를 받은 후, 해당 IP 주소에 있는 서버를 찾아간다. 이때 랜덤한 숫자가 적힌 번호표를 가져감
- 여기서 브라우저와 서버는 서로 번호표를 주고 받으며 데이터를 주고 받기 위한 3Way-Handshake 를 완료함
- 이 Handshake 과정이 끝나면 브라우저는 서버에게 자료를 요청함
데이터 요청 및 응답
- 이제, 브라우저는 HTTP Request 로 서버에게 데이터를 요청한다. (HTML 파일을 요청)
- 그리고 서버는 HTTP Response 로 브라우저에게 데이터를 보내준다. (loading)
HTML/CSS/JS 파싱
- HTML 파싱하여 DOM Tree 생성 (scripting)
- style 태그를 만나면 DOM 생성을 중지하고 CSS 파싱 작업을 시작하여 CSSOM Tree 를 생성 (scripting)
- CSS 파싱을 마치면 DOM 생성이 중단된 시점부터 다시 생성을 시작
- 그러다 script 태그를 만나면 다시 DOM 생성을 중지하고 자바스크립트 엔진에게 제어 권한을 넘김
- 자바스크립트 엔진은 코드를 해석(파싱)하여 추상 구문 Tree 인 AST(Abstract Syntax Tree)를 만들고 실행
- 그 후 중단했던 DOM 생성을 다시 시작하고 완료한다.
- 그리고 브라우저는 DOM Tree 와 CSSOM Tree 를 합쳐서 Render Tree 를 생성 (rendering)
- 이렇게 Render Tree 를 생성하는 과정까지를 Construction 이라고 함
Layout 작업 시작
- 랜더링 엔진이 Layout 작업을 시작 (layout)
- Render Tree 의 노드들을 화면의 올바른 위치에 표시하는 것을 의미
- 그 다음 UI Backend 가 Render Tree 의 노드들을 돌면서 UI 를 그림
- 그 다음 노드들의 레이어를 순서대로 구성하는 Composition 단계
- z-index 가 낮은 요소를 먼저 놓고 그 다음에 높은 요소를 놓는 것
- 이렇게 Layout 부터 Composition 까지의 과정을 Operation 이라고 함
💡 이러한 파싱과 Layout, UI 를 그리는 과정은 서버에서 모든 데이터를 받고나서 시작하는 것이 아닌, 데이터의 일부를 받고나서 화면에 표시한다. 그리고 이것을 반복
- 브라우저가 사용자에게 더 빠르게 화면을 출력해주기 위함
- 이 때문에, 웹페이지의 화면이 한 번에 뜨지 않고 부분적으로 뜨는 현상이 나타남
참고