브라우저란?
일반적으로 사용되는 Chrome, Safari, Firefox 등을 말합니다.
브라우저는 서버에서 사용자가 선택한 리소스를 받아 사용자에게 보여줍니다. 자원은 다양한 형태를 취할 수 있습니다. 나. HTML 문서, PDF, 이미지, 자원의 주소는 URL(Uniform Resource Identifier)로 결정된다.
렌더링이란 무엇입니까?
개발자가 만든 문서(html, css, javascript)를 브라우저에서 그래픽 형식으로 보기
브라우저 렌더링 프로세스
1. 서버에서 받은 HTML, CSS 파일 다운로드
2. 파싱: DOM/CSSOM 생성
- 파싱 단계는 HTML 파일을 해석하여 DOM(Document Object Model) 트리를 구성하는 단계이다.
- 계산 및 관리가 용이하도록 객체 모델로 변환됩니다.
- HTML은 DOM(문서 마크업 속성 및 관계 포함)을 생성합니다.
- CSS는 CSSOM을 생성합니다(요소가 렌더링될 때의 모양)
3. 부록: 렌더 트리 생성
- 렌더 트리는 파싱 단계에서 생성된 DOM 트리와 CSSOM 트리를 매칭하여 구축된다.
- Render Tree : 스타일 정보가 설정되어 있기 때문에 실제로 화면에 표시되는 노드들로 구성되어 있습니다.
(예) 표시: 없음; ☞ 화면 공간을 차지하지 않아 렌더링 트리에서 제외됩니다.
가시성: 보이지 않음; ☞ 요소는 눈에 보이지 않고 공간을 차지하기 때문에 렌더링 트리에 포함됩니다.
4. 레이아웃: 렌더 트리의 배치
- 렌더 트리를 화면에 배치하는 방법을 결정하기 위해 노드의 정확한 위치와 크기를 계산합니다.
- 브라우저의 뷰포트에서 각 노드의 정확한 위치와 크기를 계산합니다.
- 루트에서 노드를 순회하면 노드의 정확한 크기와 위치를 계산하고 렌더링 트리에서 렌더링합니다.
- 다음과 같은 상대 위치 또는 크기 속성 B. %, vh, vw를 계산하여 실제 화면에 그려지는 px 단위로 환산합니다.
+ 뷰포트란?
웹 페이지가 실제로 브라우저 화면에 표시되는 영역
5. 페인트: 렌더 트리 그리기
- 렌더링 트리의 각 노드는 레이아웃 단계에서 계산된 값을 사용하여 화면의 실제 픽셀로 변환됩니다.
- 스타일이 복잡할수록 페인팅 시간이 길어집니다.
6. 합성물
- 페인팅 단계에서 생성된 레이어가 합성되어 실제 화면에 표시됩니다.
- 화면에서 웹 페이지를 볼 수 있습니다.
다시 렌더링
- 흐르다
- 이벤트나 동작으로 인해 HTML 요소의 크기나 위치가 변경되면 영향을 받는 자식/부모 노드를 포함하여 레이아웃 단계가 다시 수행됩니다.
- 창 크기 변경
- 노드 추가 또는 제거
- 요소의 위치 및 크기 변경
- 글꼴 변경, 이미지 크기 변경
- 재장식하다
- 렌더 트리에 그려진 페인팅 프로세스를 다시 그립니다.
자세한 정보는 다음 링크에서!
https://d2.naver.com/helloworld/59361