웹 페이지 렌더링 메커니즘

제목과 같이, 본고는 브라우저가 페이지를 과장하는 과정을 소개할 것이다.
한 웹 페이지에는 주로 세 개의 큰 덩어리, Html/CSS/JavaScript가 포함되어 있다.
하나.먼저 몇 가지 개념을 말하다.
1. DOM: Document Object Model DOM: 브라우저는 HTML을 트리 형식의 데이터 구조로 해석하여 DOM이라고 부른다.
2. CSSOM: CSS Object Model, 브라우저는 CSS 코드를 트리 데이터 구조로 해석합니다.
3. Render Tree: DOM 트리와 CSSOM 트리가 연결되어 생성됩니다(렌더 트리라고도 함).
3. Layout: Render Tree 각 노드의 특정 위치를 계산합니다.
4. Painting: 그래픽을 통해 Layout 뒤의 노드 내용을 각각 화면에 표시합니다.
둘.브라우저 렌더링 프로세스
1. Create/Update DOM And request css/image/js: 브라우저가 HTML 코드를 요청한 후 DOM을 생성하는 첫 번째 단계(Bytes→characters 후)에서 css, 그림, js 요청을 병행하여 시작합니다. 그들이 HEAD에 있든 없든.
2. Create/Update Render CSSOM: CSS 파일 다운로드가 완료되어 CSSOM 구축이 시작됩니다.
3. Create/Update Render Tree: 모든 CSS 파일 다운로드가 완료되고 CSSOM 구축이 끝난 후 DOM과 함께 Render Tree를 생성합니다. Render Tree는 모든 보이는 DOM 내용을 설명하고 CSSOM 스타일 정보를 노드에 추가합니다.
렌더링 트리를 형성하기 위해 브라우저가 하는 작업은 다음과 같습니다.
(1) DOM 트리 루트 노드에서 시작하여 표시되는 각 노드를 이동합니다.

일부 노드는 완전히 보이지 않는다(예를 들어script 라벨,meta 라벨 등). 이 노드들은 과장된 출력에 영향을 주지 않기 때문에 무시될 것이다

일부 노드는 CSS 스타일을 통해 숨겨졌고 이런 노드는 무시되었다. 예를 들어 어떤 요소의 스타일이 디스플레이:none으로 지정되었다.무시됩니다.

주의:'visibility:hidden'과'display:none'사이의 차이:'visibility:hidden'은 요소를 보이지 않게 설정하지만 레이아웃에 일정한 공간을 차지한다(예를 들어 빈 상자로 렌더링된다).'display:none'의 요소는 전체 Render Tree에서 노드를 제거하기 때문에 레이아웃의 일부분이 아니다.

(2) 보이는 모든 노드에 적합한 일치하는 CSSOM 규칙을 찾고 스타일을 적용한다
(3) 가시 노드를 표시합니다(노드는 내용과 계산된 스타일을 포함합니다).
4.Layout: Render Tree가 있으면 브라우저는 웹 페이지에 어떤 노드, 각 노드의 CSS 정의와 그들의 종속 관계를 알 수 있습니다.Layout, 말 그대로 각 노드가 화면에 있는 위치를 계산하는 것이다.
5. Painting: Layout 이후 브라우저는 어떤 노드가 표시될 것인지(which nodes are visible), 각 노드의 CSS 속성이 무엇인지(their computed styles), 각 노드가 화면에 있는 위치가 어디인지(geometry)를 알고 있습니다.마지막 단계에 들어간다. 페인팅은 계산된 규칙에 따라 그래픽카드를 통해 내용을 화면에 그린다.

상기 5단계 전 3단계의 모든'Create/Update'를 사용하는 것은 DOM, CSSOM, Render Tree가 첫 번째 Painting 이후에 여러 번 업데이트될 수 있기 때문이다. 예를 들어 JS가 DOM이나 CSS 속성을 수정했기 때문이다.

Layout과 Painting도 중복 실행된다. DOM, CSSOM 업데이트 원인 외에 사진 다운로드가 끝난 후에도 Layout과 Painting을 호출하여 웹 페이지를 업데이트해야 한다.

셋.CSS 및 JavaScript 기능:
1. CSS 동시 로드: 브라우저 해석 http response 다운로드 html 파일은 위에서 아래로 로드되며 로드 과정에서 해석 렌더링이 진행됩니다. 로드 과정에서 외부 css 파일을 만나면 브라우저가 css 파일을 가져오는 요청을 따로 보냅니다. 여기서 css 해석은 rule tree(규정 트리)를 생성하고 나중에 업데이트됩니다.
2.JavaScript는 단독으로만 불러올 수 있습니다. 문서를 불러오는 과정에서 js 파일을 만나면 html 문서는 렌더링(불러오기 해석 렌더링 동기화)의 라인을 끊습니다. 문서에서 js 파일이 불러오기를 기다릴 뿐만 아니라 해석이 실행되기를 기다려야 html 문서의 렌더링 라인을 복구할 수 있습니다.
넷.JavaScript의 형식은 무엇입니까?

외부 도입...

Html 내장

...
<br> alert(1);<br>

주의: 페이지 렌더링 원리와 자바스크립트가 단독으로 불러오는 특성에 따라 상기 두 가지 형식은 모두 탭 안에서 닫힌 탭에 가까운 곳에 두어야 한다(head 내의 js는 페이지 내용의 표현과 렌더링을 막고 뒷부분의 다운로드를 막아'화이트 스크린'현상을 초래할 수 있다)
오.비동기 로드

키워드 defer나 async를 추가하면 브라우저는 지정한 스크립트를 즉시 불러오고 실행합니다.'즉시'는 후속 문서가 불러오기를 기다리지 않고 읽으면 불러오고 실행하는 것을 말합니다.

1. async, 후속 문서 요소를 불러오고 렌더링하는 과정과script.js의 불러오기와 실행을 병행합니다. (비동기)

2. defer, 후속 문서 요소를 불러오는 과정과script.js의 불러오기는 병렬 (비동기) 이지만,script.js의 실행은 모든 요소 해석이 끝난 후에 DOMContentLoaded 이벤트가 터치되기 전에 완료됩니다.

defer와 async 역할: 페이지가 다른 사이트 코드를 도입하고 도입한 코드는 현재 페이지의 표현에 영향을 주지 않습니다.
주의: defer: 스크립트는 문서의 해석과 표시로 지연되며 순서가 있습니다.async: 순서를 보장하지 않습니다.

本文配图及部分内容来自于饥人谷，版权归饥人谷_海瀚和饥人谷所有，转载需说明来源