홈페이지가 사용자에게 보이는 순서(브라우저 렌더링 과정)
홈페이지가 사용자에게 보이는 순서 (브라우저 렌더링 과정)
- 주소창에 입력된 주소를 통해 서버를 찾아간다.
- 이후 DNS가 연결해줄 곳을 찾는다.(실제 서버)
- 서버에서 HTML 파일을 클라이언트로 보낸다.
- HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식)
- 중간에 css를 로드한ㄴ link 혹시 style 태그를 만나면 DOM 생성을 중지한다.
- CSS를 파싱하고 CSSOM을 생성한다.
- 이렇게 만들어진 DOM과CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌더 트리로 결합된다.
- 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다.
- 이후 JS엔진을 실행하고 JS코드를 파싱한다.
자바스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다.
리플로우: 레이아웃 계산을 다시 하는 것 리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것
여기서 script태그를 만날때마다 파싱이 중단되는 문제를 script 태그 뒤에 async 혹은 defer를 붙여줌으로써 해결할 수 있다.
async: HTML 파싱, JS 파일 로드가 동시에 진행 defer: DOM 생성이 완료된 직후, JS의 파싱과 실행이 진행된다.
Author And Source
이 문제에 관하여(홈페이지가 사용자에게 보이는 순서(브라우저 렌더링 과정)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jjiglet/홈페이지가-사용자에게-보이는-순서브라우저-렌더링-과정저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)