브라우저 렌더링 1

Title

브라우저 렌더링 1

Tags

browserweb렌더링

Aliases

브라우저 렌더링 1파싱(Parsing)파싱(Parsing) 단계

DOM(Document-Object-Model)script의-async와-defer-속성파싱(Parsing)

Created

2 years ago

Updated

6 months ago

입력 : HTML 문자열 출력 : DOM 트리

HTML 데이터를 받기 시작할 때부터, 메인 스레드는 HTML 문자열을 파싱하기 시작하고 이를 통해 DOM(Document Object Model) 트리를 구성한다.
추가 리소스 로딩
- 이미지나 CSS(<img> , <link>)가 있는 경우 브라우저 프로세스에 있는 네트워크 스레드에 요청을 보낸다.
  - <link rel="preload"> 는 브라우저에게 해당 리소스가 가능하면 빨리 다운로드하고 싶다는 것을 알려주는 방법이다.
    - 스크롤을 내리지 않아도 바로 보이는 이미지, CSS 내의 폰트 등에 적용
- 자바스크립트(<script>)는 파싱을 중단할 수 있다.
  - 왜냐하면 자바스크립트는 전체 DOM 구조를 바꾸는 document.write() 와 같은 방법으로 문서의 구성을 바꿀 수 있기 때문이다.
  - 이러한 동작 방식은 두 가지 중요한 이슈를 만든다.
    1. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다.
    html
```
<p>... 스크립트 앞 콘텐츠 ...</p>
<script src="https://www.foo.com/index.js"></script>

<p>... 스크립트 뒤 콘텐츠</p>
```
```
<p>... 스크립트 앞 콘텐츠 ...</p>
<script src="https://www.foo.com/index.js"></script>

<p>... 스크립트 뒤 콘텐츠</p>
```
    1. 페이지 위쪽에 큰 스크립트가 있는 경우, 스크립트가 페이지를 막아버린다.
  - 이를 막기 위해 스크립트를 <body> 태그의 맨 아래에 놓는 방법이 있다.
    - 하지만 이 방법 역시 완벽한 해결책이 아니다.
    - HTML 문서 전체를 다운로드한 다음 스크립트를 다운 받게 된다.
  - 따라서 더 효율적으로 스크립트를 로드하기 위해 async 혹은 defer 속성을 사용할 수 있다.
    - 이 속성을 사용하면 브라우저는 HTML 파싱을 막지 않고 비동기적으로 스크립트를 로드한다.
    - script 태그의 async와 defer 속성

파싱(Parsing)

References

모던 웹 브라우저 들여다보기 (파트 3) | Web | Google Developers

브라우저 렌더링 1

Related #

References #

Related

References