브라우저의 렌더링 과정.
1. Loading - HTTP 모듈 또는 파일 시스템으로 전달 받은 리소스 스트림을 읽는 과정
2. DOM Tree - HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)
3. CSSOM Tree - CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)
4. Rendering Tree - DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)
5. Layout - 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.)
6. Paint - 개별 노드를 화면에 페인트한다.(or 래스터화)
++
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춤
HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행
(<script> 요소는 등장과 함께 실행)
<script> 태그를 추가하는 두 가지 대표적인 사례가 존재합니다.
- <head> 태그에 추가하는 방법
- </body> 가 끝나기 전에 추가하는 방법
// Js파일
console.log(Js 연결?");
let msgElement = document.querySelector("#msg");
console.log(msgElement);
<head>태그에 추가하는 방법
- html요소 정보를 읽어 오지 못함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>// console.log
Js연결?
null
</body> 가 끝나기 전에 추가하는 방법
- 정보를 잘 불러옴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</body>
</html>// console.log
Js연결?
<div id="msg">Hello JavaScript!</div>
'언어(JS,TS) > 그룹스터디' 카테고리의 다른 글
| 그룹스터디 [Browser: BOM] (0) | 2022.05.07 |
|---|---|
| 그룹스터디 [Browser: DOM] (0) | 2022.05.07 |
| 그룹스터디 [Browser: Window, DOM, BOM] (0) | 2022.05.07 |
| 그룹스터디 [보안 : SOP과 same origin] (0) | 2022.05.05 |
| 그룹스터디 [보안 : CORS란?] (0) | 2022.05.05 |
