용어 사전
밝게
특정 페이지(문서, HTML 등)에서 원하는 데이터를 특정 패턴이나 순서로 추출하여 가공하는 것을 말합니다.
생식
HTML, CSS 및 JS로 작성된 문서를 구문 분석하여 브라우저에 시각적으로 표시하는 것을 말합니다.
이것은 두 가지 큰 단계로 발생합니다.
1) DOM 요소 및 스타일 기반 레이아웃 계산
2) 계산된 요소의 화면 표시
일반적으로 브라우저에 문서를 로드하면 계속해서 DOM 트리를 구성하고 레이아웃을 계산하며 문서에 요소를 그립니다.
렌더링 과정
1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등의 리소스를 서버에 요청하고 응답으로 받습니다.
2. 브라우저 렌더링 엔진은 수신된 HTML 및 CSS 코드를 구문 분석하여 DOM 및 CSSOM을 생성하고 결합하여 렌더링 트리를 생성합니다.
3. 브라우저 JS 엔진은 수신된 JS를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행합니다.
4. 렌더링 트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산합니다.
5. 화면에 HTML 요소를 그립니다.
1. 서버에 리소스를 요청하고 응답 받기
브라우저는 URL을 수신하면 DNS(도메인 서버)를 통해 URL을 IP 주소로 변환하고 해당 IP 주소가 있는 서버로 요청을 전달합니다.
2. HTML과 CSS를 파싱한 후 DOM과 CSSOM을 생성하고 이를 결합하여 렌더트리를 생성한다.
HTML서버에서 바이트 의 형태로 배송됩니다. 선~로 변환하다
모든 HTML 코드는 문자열로 변환됩니다. 징후로 분해된다
토큰으로 분류된 HTML 마디 객체로 분해되고 각 노드 객체는 트리와 같은 데이터 구조인 부모-자식 관계를 형성합니다. 돔모양
또한 CSS에서 구문 분석 프로세스는 바이트 → 문자열 → 토큰 → 노드로 구성됩니다.
각 노드는 부모-자식 관계를 형성하고 트리와 같은 데이터 구조인 CSSOM을 형성합니다.
HTML 파싱이 CSS를 의미하는 링크 태그나 스타일 태그를 찾으면 차단하고 CSSOM 생성을 계속합니다.
CSSOM 생성이 완료되면 차단 지점부터 다시 HTML 파싱을 수행한다.
렌더 트리 = 렌더링에 필요한 트리 데이터 구조.
DOM과 CSSOM으로 구성되어 있습니다.
화면에 렌더링된 노드로만 구성됩니다. 화면에 반영되지 않음 “디스플레이: 없음” 또는 “메타”태그 등은 렌더 트리를 형성하지 않습니다.
3. JS 파싱 후 AST 생성
AST = 추상 구문 트리. 이를 기반으로 인터프리터는 바이트코드를 생성합니다.
HTML을 구문 분석할 때 JS를 의미하는 스크립트 태그를 만나면 차단되고 제어가 JS 엔진에 전달되어 JS 구문 분석을 계속합니다.
AST 생성 과정
1. JS 코드는 각 의미를 가진 토큰으로 나뉩니다.
2. 각 토큰은 함께 결합되어 AST를 형성합니다.
3. AST는 바이트코드로 변환되어 인터프리터에 의해 실행됩니다.
4. 렌더링 트리를 기반으로 HTML 요소의 레이아웃 계산
렌더링 트리에는 요소의 위치와 크기에 대한 정보가 포함되어 있습니다. 그러나 이 정보는 각 항목에 대한 정보일 뿐이며 전체 화면에서 정확히 어디에 표시될지는 아직 알 수 없습니다. 이러한 계산을 수행하는 단계가 레이아웃 단계입니다. 브라우저는 렌더링 트리의 상단에서 하단까지 계산하여 각 요소를 전체 화면에 배치해야 하는 위치와 크기를 파악합니다. 모든 값은 절대 단위인 px 값으로 변환됩니다.
5. 화면에 HTML 요소 그리기
이제 화면에 보여줄 차례입니다. 브라우저 화면은 픽셀이라는 작은 점으로 구성되어 있습니다. 정보가 있는 모든 픽셀은 하나의 이미지 또는 화면으로 결합됩니다. 화면에 색상을 지정하고 특정 요소를 표시하려면 이 픽셀에 대한 정보가 필요합니다.
페인팅 = 그 픽셀을 채우는 과정
따라서 이러한 과정은 이미지의 형태로 브라우저 화면을 통해 볼 수 있습니다.
다시 칠하다, 다시 칠하다
리플로우: 레이아웃 계산 반복
다시 그리기: 새 렌더링 트리를 기반으로 다시 그리기.
만약) 사용자가 브라우저 화면의 크기를 조정하거나 버튼을 눌러 화면에 항목을 추가하거나 삭제하는 경우 항목의 위치나 크기가 변경될 수 있습니다. 당연하게 받아들일 수 있지만, 화면에서 모습을 바꾸려면 모든 요소의 위치와 크기를 다시 계산하고 다시 그려서 표시해야 합니다. 그만큼 다시 칠하다, 다시 칠하다말하다
JS 구문 분석에 의한 HTML 차단
3번 항목에서 설명한 것처럼 스크립트 태그에 도달하면 HTML 구문 분석이 차단되므로 렌더링 엔진에서 JS 엔진으로 제어가 전달됩니다.
스크립트는 동기적으로(위에서 아래로) 파싱되기 때문에 스크립트 태그의 위치에 따라 HTML 파싱이 지연될 수 있습니다.
If) JS 코드가 HTML 노드를 생성하면 HTML 파싱이 완료되어야 합니다.
=> 따라서 가능하면 body 태그 아래에 script 태그를 배치하는 것이 좋습니다.
스크립트 태그의 async 및 defer 속성
body 태그 끝에 script 태그를 넣어도
사용자가 JS 코드를 구문 분석하는 동안 웹과 상호 작용(버튼 누르기, 텍스트 입력)을 시도하면 제대로 작동하지 않습니다.
DOM 렌더링 차단은 async 및 defer 속성을 통해 JS 코드를 비동기식으로 호출하여 피할 수 있습니다.
비동기
JS 파일의 비동기 로드를 처리합니다.
JS 파일이 로드되는 순서대로 파싱 및 실행이 이루어지며,
이 경우 HTML 파싱이 차단되어 순서가 보장되지 않습니다.
연기하다
async와 마찬가지로 JS 파일의 비동기 로드를 처리합니다.
JS 코드의 구문 분석 및 실행은 DOM 생성 후에 수행됩니다.
요약
브라우저의 렌더링 엔진은 HTML 및 CSS 파일에서 DOM 및 CSSOM을 생성합니다.
이 둘은 렌더 트리로 결합되며, 이 렌더 트리는 요소의 크기와 위치를 계산하는 레이아웃 작업과 실제로 픽셀 단위로 화면에 그리는 작업인 페인팅 단계에 사용됩니다.
여기까지의 프로세스를 완료하면 사용자는 웹 페이지를 볼 수 있습니다.
또한 DOM은 DOM API를 제공하기 때문에 이미 구축된 DOM을 자바스크립트로 조작할 수 있다고 소개했다. 이러한 조작으로 인해 요소가 변경되면 이전 작업이 반복됩니다. 레이아웃 단계를 다시 반복하는 것을 리플로우라고 하고 페인팅 단계를 다시 반복하는 것을 다시 페인팅이라고 합니다.
이렇게 우리는 단순히 주소창에서 주소를 찾는데 내부 프로세스를 살펴보면 매우 복잡한 프로세스가 빠르게 수행되는 것을 볼 수 있습니다.