브라우저 렌더링 과정은 다음과 같다.
1. HTML 파일 다운로드 : 브라우저는 HTML 파일을 서버로부터 다운로드합니다.
2. HTML 파싱 : 브라우저는 다운로드한 HTML 파일을 파싱 하여 DOM(Document Object Model) 트리를 생성합니다.
3. CSS파일 다운로드 및 처리 : 브라우저는 HTML 파싱 중에 CSS파일을 만나면 해당 파일을 다운로드하고 처리합니다. CSS 파일을 처리하여 스타일 규칙이 생성되고, DOM 요소에 스타일 규칙이 적용됩니다. 이 단계에서 이미지의 크기와 위치등의 계산이 이루어집니다.
4. JavaScript 파일 다운로드 및 실행 : 브라우저는 HTML파싱 중에 script태그를 만나면 해당 JavaScript파일을 다운로드하고 실행합니다.
결론은 이미지의 렌더링이 완료된 이후에 JavaScript파일을 다운로드합니다.
그렇다면 HTML파일에서 <script></script> 태그는 어디에 위치하는 게 맞는 걸까?
JavaScript 파일의 <script> 태그를 <body> 태그의 끝에 넣는 것이 일반적인 권장 방법입니다.
이는 브라우저가 HTML을 파싱 하는 동안 JavaScript 파일을 다운로드하고 실행하는 시간을 최대한 미룰 수 있기 때문입니다.
하지만 때에 따라 <script> 태그를 <head> 태그 내에 위치시키는 경우도 있습니다. 예를 들어, 특정 JavaScript 코드가 페이지의 초기 설정이나 필수적인 기능과 관련되어 있을 때는 <head> 태그 내에 위치시키는 것이 유용할 수 있습니다. 이 경우에는 defer 속성을 사용하여 JavaScript 파일의 다운로드와 실행 시점을 조정할 수도 있습니다.
defer속성 적용 예시 <head> 태그 안에 적용
<script src="파일경로.js" defer></script>'지식 정리 📝' 카테고리의 다른 글
| Excel 워크시트에 이미지 삽입 (0) | 2023.10.04 |
|---|---|
| Closures - 클로저 (0) | 2023.06.19 |
| 'getStaticProps'와 'getServerSideProps'의 차이 (0) | 2023.06.12 |
| 타입스크립트 기본 타입 복습 (0) | 2023.05.25 |
| Network, OS, CS (0) | 2023.05.24 |