브라우저는 다음 프로세스를 통해 렌더링합니다.
1. 브라우저는 HTML, CSS, JavaScript, 그림, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.
2. 브라우저의 렌더링 엔진은 서버에서 반환된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 조합을 통해 렌더링 트리를 생성합니다.
3. 브라우저의 JavaScript 엔진은 서버에서 반환된 JavaScript를 파싱하여 ASTAbstract Syntax Tree를 생성하고 이를 바이트코드로 변환하여 실행합니다.
이때 JavaScript는 DOM API를 통해 DOM 또는 CSSOM을 변경할 수 있습니다.
수정된 DOM 및 CSSOM은 렌더 트리로 다시 결합됩니다.
4. 렌더링 트리에 따라 HTML 요소의 레이아웃(위치 및 크기)을 계산하고 브라우저 화면에 HTML 요소를 그립니다.
38.1 요청 및 응답
브라우저의 핵심 기능은 서버에서 필요한 리소스(HTML, CSS, JavaScript, 그림, 글꼴 또는 서버에서 동적으로 생성된 데이터와 같은 정적 파일)를 요청하고 서버에서 응답을 받아 시각적으로 렌더링하는 것입니다.
브라우저. 즉, 렌더링에 필요한 리소스는 모두 서버측에 존재하므로 서버측에서 필요한 리소스를 요청하고 서버측에서 반환한 리소스를 파싱하여 렌더링해야 한다.
서버에 요청을 보내기 위해 브라우저는 주소 표시줄을 제공합니다.
브라우저의 주소 표시줄에 URL을 입력하고 Enter 키를 누르면 URL의 호스트 이름이 DNS에 의해 IP 주소로 변환되고 해당 IP 주소를 사용하여 서버로 요청이 전송됩니다.
서버에서 리소스를 받은 후 브라우저가 작동하는 방식
- 브라우저는 응답으로 서버에서 HTML, CSS, Javascript 및 이미지 파일을 받습니다.
- HTML 및 CSS 파일 렌더링 엔진HTML 파서와 CSS 파서에 의해 파싱되어 DOM 및 CSSOM 트리로 변환되고 렌더링 트리로 결합됩니다.
이것 렌더 트리이를 기반으로 브라우저는 웹 페이지를 표시합니다. - 자바스크립트는 자바스크립트 엔진HTML 파서가 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 제어권을 JavaScript 엔진에 전달하여 JavaScript 코드를 실행합니다.
제어권을 넘겨받는 JavaScript 엔진은 script 태그 내의 스크립트 코드 또는 script 태그의 src 속성에 정의된 스크립트입니다.
JavaScript 파일 로드, 구문 분석 및 실행하다.
JavaScript 실행이 완료되면 제어가 HTML 파서로 다시 전달되고 브라우저가 중단된 지점에서 DOM 생성이 다시 시작됩니다.
HTML 구문 분석 및 DOM 생성
서버로부터 받은 응답 HTML 문서는 문자열로 구성된 일반 텍스트입니다.
브라우저의 시각적 픽셀로 렌더링하려면 HTML 문서를 브라우저가 이해할 수 있고 메모리에 저장할 수 있는 데이터 구조(객체)로 변환해야 합니다.
노드는 아래 다이어그램의 각 토큰을 객체로 변환하여 생성됩니다.
즉, DOM은 HTML 문서를 구문 분석한 결과입니다.
CSS 구문 분석 및 CSSOM 생성
link 태그의 href 속성에 지정된 CSS 파일을 서버에 요청하고, 로드된 CSS 파일 또는 style 태그의 CSS는 HTML과 동일한 파싱 과정을 거친다(바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM). CSS 객체 모델을 얻기 위해.생성하다
렌더 트리 만들기
렌더링 트리는 각 HTML 요소의 레이아웃(위치 및 크기)을 계산하는 데 사용되며 브라우저 화면에서 픽셀을 렌더링하는 드로잉 프로세스에 입력됩니다.
완성된 렌더링 트리는 각 HTML 요소의 레이아웃(위치 및 크기)을 계산하는 데 사용되며 브라우저 화면에서 픽셀을 렌더링하는 페인트 프로세스에 제공됩니다.
JavaScript 구문 분석 및 실행
JavaScript 엔진은 JavaScript 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환하고 실행합니다.
엔진은 JavaScript를 해석하고 추상 구문 트리를 생성합니다.
이를 바탕으로 인터프리터가 실행할 수 있는 중간 코드인 바이트코드가 생성되고 실행된다.
토큰화_tokenization
JavaScript 소스 코드는 문법적 의미를 지닌 가장 작은 코드 단위인 어휘 분석에 의해 토큰으로 분해되는 간단한 문자열입니다.
이 프로세스를 어휘 분석이라고도 하지만 단어 분할과는 미묘하게 다릅니다.
분석_분석
일련의 토큰에 대한 구문 분석은 ASTA추상 구문 트리(Abstract Syntax Tree)를 생성합니다.
AST는 문법적 의미와 구조를 마크업에 반영한 트리 구조의 데이터 구조입니다.
바이트코드 생성 및 실행
파싱 후 생성된 AST는 바이트코드, 즉 인터프리터에서 실행 가능한 중간 코드로 변환되어 인터프리터에서 실행된다.
리플로우 및 리페인트
리플로우는 노드 추가/제거, 요소의 크기/위치 변경 및 창 크기 조정과 같이 레이아웃에 영향을 미치는 변경 사항이 있을 때 수행되는 레이아웃 재계산입니다.
다시 그리기는 재구성된 렌더링 트리를 기반으로 다시 그리는 것을 말합니다.
38.8 JavaScript 파싱을 통한 HTML 파싱 중단
렌더링 엔진과 JavaScript 엔진은 병렬이 아닌 직렬로 구문 분석을 수행합니다.
따라서 브라우저는 위에서 아래로 HTML, CSS 및 JavaScript를 동시에 구문 분석하고 실행합니다.
즉, 스크립트 태그의 위치에 따라 HTML 파싱이 차단되고 DOM 생성이 지연될 수 있습니다.
따라서 스크립트 태그의 위치는 매우 중요합니다.
위의 예에서 DOM 생성은 app.js가 구문 분석되고 실행될 때까지 일시 중지됩니다.
이때 JavaScript 코드(app.js)에서 DOM API를 이용하여 DOM이나 CSSOM을 변경했다면 DOM이나 CSSOM이 생성되어 있어야 합니다.
DOM을 변경하는 DOM API를 사용하는 경우 DOM이 생성되지 않으면 문제가 발생할 수 있습니다.
질문
해결하다
JavaScript가 실행되면 렌더링 엔진은 모든 HTML 요소를 구문 분석하고 DOM 생성을 완료합니다.
따라서 DOM이 완료되지 않은 상태에서 JavaScript가 DOM을 잘못 조작할 위험이 없습니다.
또한 JavaScript가 실행되기 전에 DOM 생성이 완료되고 렌더링되기 때문에 페이지 로드 시간이 단축됩니다.
– 알라딘 전자책에서