* 브라우저 동작 방식
1. DOM 트리 구축, CSSOM 트리 구축
: HTML 파싱하여 DOM(Document Object Model) 트리를 만든다.
브라우저는 "위"에서 "밑"으로 HTML 태그들을 읽어나간다.
* 여기서 <script> 코드를 만나면?
: 파싱을 중단하고 javascript 파일을 로드 후 javascript 코드를 파싱!
이 과정이 완료되면 그 후에 나머지 html 파싱
* 그렇다면 script의 위치는 어디가 제일 좋을까?
정답 : body 태그 최하단
HTML태그 사이에 script 태그가 위치하면 두가지 문제 발생.
1. HTML 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 DISPLAY에 표시되는 것이 지연됨.
2. DOM 트리가 생성되기 전에 자바스크립트가 생성되지 않은 DOM의 조작을 시도할 수 있음.
추가로 스크립트 내부에서 로딩 순서도 알아보자
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
console.log("위에서부터 첫번째");
</script>
<title>index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
window.onload = function(){
console.log("위에서부터 두번째");
}
</script>
<body>
<script>
console.log("위에서부터 세번째");
</script>
"hellooooooooooooooooooo"
</body>
<script>
$(function(){
console.log("위에서부터 네번째");
});
</script>
<script>
console.log("위에서부터 다섯번째");
</script>
</html>어떤 차례대로 실행될것 같은가?
위에서 부터 내려올거라고 계쏙 설명했으니 차례대로라고 생각할 수 있지만 제이쿼리 펑션은 DOM이 완성되면 실행되기에 아래의 결과가 나온다.
- 위에서부터 첫번째: <head> 태그 안에서 스크립트가 실행됩니다. <head> 안에 있는 스크립트는 HTML 파싱 과정 중 가장 먼저 실행됩니다.
- 위에서부터 세번째: <body> 태그 안에서 스크립트가 실행되기 때문에 두번째로 출력됩니다.
- 위에서부터 다섯번째
- 위에서부터 두번째: window.onload 이벤트는 문서의 모든 리소스가 로드된 후에 실행됩니다. 따라서 모든 스크립트가 실행된 후 실행됩니다.
- 위에서부터 네번째: jQuery의 $(function(){})은 문서가 로드된 후 실행되는 코드입니다. 따라서 문서가 로드된 후에 실행되므로 가장 늦게 실행됩니다.
CSS를 파싱하여 CSSOM(CSS Object Model)트리를 만든다.
* 정리 *
1. 서버는 브라우저로부터 요청받은 HTML 파일을 읽음 -> 메모리에 저장 -> 메모리에 저장된 바이트를 응답.
2. 브라우저는 응답받은 바이트 형태의 문서를 META태그의 CHARSET 어트리뷰트에 지정된 인코딩방식(UTF-8)에 따라 문자열로 반환.
3. 문자열로 변환된 HTML문서를 문법적 의미를 갖는 코드의 최소 단위인 토큰(TOKEN)으로 분해.
4. 토큰들의 내용에 따라 객체로 변환하여 노드 생성
5.HTML은 요소 간의 부자 관계인 중첩 관계를 갖는데 이를 반영하여 모든 노드들을 트리 구조로 구성하여 DOM을 만든다.
6. CSSOM도 같은 로직으로 구성
2. 렌더트리 구축 (Attachment)
: CSSOM 트리와 DOM 트리를 결합하여 표시해야 할 순서로 내용을 그려낼 수 있도록 하기위해 렌더 트리 형성.
이 과정을ATTACHMENT 라고 한다.
렌더트리를 구성하기 위해서는? 브라우저는 아래와 같이 작업을 수행한다!
1. DOM 트리의 루트부터 노드 각각을 탐색.
- 화면에 표시되지 않는 일부 노드들(script, meta 태그 등등)은 렌더트리에서 제외
2. 화면에 표기되는 각 노드에 대해 적절히 일치하는 CSSOM 규칙을 찾아 적용
3. 화면에 표시되는 노드를 콘텐츠 및 계산된 스타일과 함께 렌더트리로 생성
3. 렌드 트리 배치
: 렌더 트리 생성 후 노드가 정확한 위치와 크기를 계산한다.
CSS의 상대적인 값들이(%등) 절대적값인 PX단위로 변환됨.
이 과정을 배치(Layout) 또는 Reflow라고 한다.
4. 렌더 트리 그리기
: 렌더 트리의 각 노드를 화면의 실제 픽셀로 나타낼 때 Painting 메소드가 호출됨.
Painting 과정 후 브라우저 화면에 UI가 나타나게 된다.
'언어 > 자바스크립트' 카테고리의 다른 글
| [JavaScript] 시간 카운트 다운 (0) | 2023.05.18 |
|---|---|
| [IE] NaN 오류 (0) | 2023.05.18 |