[2023-12-30 2차]
논리구조 스터디 공부를 위해 학습한 글입니다.
브라우저에 naver.com을 입력하는순간 어떤일이 벌어질까?
1. IP 주소 찾는 과정
사용자가 웹에 네이버 닷컴을 검색하면 어떤 일이 벌어질까?
브라우저가 검색어 (naver.com) 을 인식하게 된다.
하지만 컴퓨터가 찾는 주소는 아이피 주소를 찾게 된다.
고로 네이버를 검색했네? → 그래서 아이피 주소가 뭔데? 라고 질의를 던지게 되고
질의를 던지는건 DNS 즉, domain name service 로 아이피 주소를 찾기 위해 찾아가게 된다.
DNS 에서 주소를 던져주게 되면 해당 아이피 주소를 기반으로 찾고자 하는 웹사이트를 방문하게 된다.
1-1. 심층 탐구
조금더 심층적으로 들어가보자면 DNS server에도 단계가 있는데
처음엔 검색 주소를 받으면 root domain 에게 너 네이버 닷컴 아니? 라고 질의를 하게 된다.
그러면 .com(닷컴) ? 그럼 닷컴 쪽으로 가볼래? 라고 응답을 하게 되고 반복적으로 또 네이버 아니?
라고 질문과 응답을 통해 성공적으로 주소를 찾게 되면 정상적인 주소를 응답 받게 된다.
그리고 네이버에 재방문하게 되면 DNS cache 에서 이전에 저장해두었던 주소를 바로 가지고 오게 된다.
2. 리소스 요청 - IP 주소와 서버 방문
아이피 주소를 가지고 서버에 방문하게 되면 html 파일을 주게 되는데
2진수로 되어있는 바이트 스트림 형태로 받게 된다.
2진수로 바이트 스트림 파일을 받게되면 html 형식으로 인코딩을 하게 되는데
utf-8 인코딩으로 해석을 진행하게 된다.
<!doctype html>
<html lang="en">
<head>
<mata charset="utf-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
</body>
</html>
위의 html 파일을 보면 <mata charset="utf-8"> 라고 쓰여 있는 걸 확인 할 수 있는데
적혀있는 이유가 해당 html 파일이 무엇으로 인코딩 되어있는지 명시해주기 위해서 작성 해놓는 것이라고 볼 수 있다.
자 여기까지가 기존 Bytes (2진수) 형에서 characters(문자)형으로 로 변환한 과정까지를 나타낸 것이다.
3. Tokens (토큰화)
그렇다고 브라우저가 해당 문서의 내용을 이해할까? 당연히 아니다.
컴퓨터도 문서를 읽어야 이해할 수 있기 때문에 Tokens (토큰화)를 진행하게 된다.
< h t m l > < b o d y> < / b o d y > < / h t m l >
이해하기 쉽게 띄워쓰기를 해서 표현해봤는데
위의 형식으로 characters 문자형을 하나씩 읽게 된다.
읽은 뒤에 위의 형식을 < > 꺽쇠 기준으로 묶게 되는데 그걸 바로 Start Tag Token 이라고 부른다.
4. Nodes (object) 화
{ tag : div
attribute :
...
}
이후 토큰화가 완료 된 파일은 위와 같은 의미가 있는 객체 (object)로 만들게 된다.
의미있는 객체로 구조화를 시킨다.
5. DOM (Document Object Model 관계 삽입)
우리가 노드에게 관계라는 것을 추가하게 되면 위와 같은 dom tree 가 형성되게 된다.
여기까지가 바로 html 의 목표가 되는 부분이다.
6. css 파일 받아오기
네이버 경우 위와 같이 css 파일을 삽입해 주었고
마찬가지로 css 파일의 경우도 앞서 설명했던 doc 문서를 받아오는 것과
함께 받아오는 것을 개발자 도구 > 네트워크 탭에서 확인할 수 있다.
바이트 스트림 → 인코딩하여 캐릭터화 → 토큰화 → 노드 → CSSOM tree 방향으로 진행되게 된다.
7. JavaScript 받아오기
특이점은 javascript 를 가져오는 도중에는 DOM 을 멈춘다.
왜냐면 js 입장에서는 html dml node 도 변경이 가능하고 css 도 변경할 수 있는
요청사항이 많은 언어이기 때문에 js 실행전에 DOM 으로 모든 html 과 css 를 완성해버리게 된다면 ?
js 가 중복적으로 해당 작업을 명령대로 다시 업데이트 하게 된다.
이런 이중 작업을 하지 않기 위해 js 파일이 실행되면 작업하던 DOM 을 잠시 멈추고
js가 바꾸고 싶은게 있는지? 확인을 한 뒤 요청사항을 모아서 한번에 모아서 그리게 된다.
7-1. 심층 탐구
만약 대용량의 자바스크립트를 실행해야 된다며?
코드의 길이 만큼 javascript 를 읽는 시간도 늘어나겠지?
그러면 DOM 을 멈춘 시간도 늘어나게 되겠지
그렇게 되면 사용자는 네이버를 검색한 후 대기하는 시간이 길어지기 때문에
개발자들은 자바스크립트가 해당 DOM 멈춰있는 하는 것을 무조건 선호하게 되는 것은 아니다.
그렇기 때문에 해당 dom 이 멈춰있는 것을 방지할 수 있는 옵션이 존재하게 되는데
<script src="main.js" defer> </script>
스크립트 파일에 defer라는 키워드가 오게 된다. (async 로 대체해서 사용가능하다.)
그렇게 되면 스크립트 파일이 본문이 되는 코드의 위에 오게 되어도 js는 DOM 의 정지를 막지 못하게 된다.
그렇다면 ? 코드 작성을 할 때 css 는 상위에 선언해도 될까?
CSS는 DOM의 생성을 막지 않는다.
하지만 DOM은 CSSOM 이 완성되어야 다음 스탭으로 진행할 수 있게 된다.
HTML입장에서 CSSOM을 최대한 빨리 만드는 것이 중요하게 된다.
<link href ="style.css" rel="stylesheet" media="screen">
위의 코드는 웹 개발을 접해봤던 사람이라면 한번은 봤을 코드이다.
해당 코드는 css 파일의 크기를 유동적으로 그려주기 위한 코드라고 보면 된다.
media="screen" 미디어 쿼리의 경우 스크린 사이즈에 따라 다른 사이즈를 가져올 수 있다.
예를 들어 나는 데스크 탑으로 웹을 보고 있는데 굳이 모바일 화면 css 까지 만들 필요가 없기 때문에 필요한 코드라고 볼 수 있다.
8. The Render Tree
자 이제 모든 재료(DOM, CSSOM )가 준비되었으면 합치게 되면
웹사이트를 그리기 위한 최종 설계도가 완성된다.
render tree의 특징은 쓸데 없는 노드들은 제외하게 된다.
예를 들어 화면에 보이지 않는<head> 태그 또는 <mata> 태그 등등
위의 이미지를 보면 DOM 안의 span 태그가 X처리 된 것이 보인다면 정상이다.
왜냐면 CSSOM 안의 span 태그의 속성이 display: none 이라는 값을 가지고 있기 때문에 Render Tree 에는 P태그만 남게 된다.
결론적으로 Render tree 에서는 필수적인 요소만 가져와 DOM 과 CSSOM 을 비로소 한 페이지에 렌더링 하게 되는 것이라는 사실을 알 수 있다.
HTML 에서 DOM 을 생성하고, CSS 에서는 CSSOM 을 생성하게 된다.
이 두가지가 완성되면 JS 를 불러오게되어 최종버전 Render Tree 를 만들게 된다.
자그러면 우리는 다음으로 무엇을 해야할까?
바로 그리기다
그리기의 과정은 바로 3가지로 이루어지게 되어있는데
Layout, Paint, Composite 과정이 존재하게 되는데 Layout 부터 살펴보겠다.
사진상에 Composite 는 안나와있는 점 양해부탁한다.
9. Layout
responsive 웹의 가장 큰 특징은 화면 사이즈에 따라서 화면에 렌더링 되는
요소들의 크기도 유동적으로 변경된다는 뜻이다.
Layout 단계에서는 이런 반응형 웹을 위해 정확한 px 값을 계산하는 단계라고 보면 될 것 같다.
10. Paint
layout 단계가 마무리 되었다면 Paint 단계로 이동하게 되는데
말 그래로 px 값을 layout에서 받아온 값을 기준으로 그리게 된다.
특징은 한페이지에 다 그리는게 아니라 한 화면을 여러개의 레이아웃으로 나눠서 그린다고 보면 된다.
그럼 도대체 왜? 나눠서 그릴까?
만약 내가 한 페이지에 요소들을 전부 그려 넣게 된다면
요소의 작은 속성이 변경 될 때 마다 paint는 매번 새로운 페이지를 처음부터 다시 그리게 될 것이다.
그래서 여러개의 layout 으로 나눠서 그리게 되는 것이다.
11. Composite
paint 단계에서 여러 레이아웃으로 나눠 그린 부분을 합치게 되면 Composite 단계에 도달하게 된다.
해당 단계에서 우리가 흔히 보는 웹사이트가 보여지게 되는 것이다.
11-1. 추가 탐구
웹사이트를 사용하게 되면서 어떤 요소의 변경사항이 있을 때 마다
Layout 단계에서 계산하여 Compoite 단계로 도출하는 반복 작업을 가장 많이 하게 되면서 reflow 되는데
reflow 될 때가 언제인지 구체적으로 알아보자
- 페이지 초기 렌더링 시 (최초 Layout 과정)
- 윈도우 리사이징 시 (Viewport 크기 변경 시)
- 노드 추가 또는 제거
- 요소의 위치, 크기 변경
- 폰트와 이미지 변경
웹사이트 성능을 좋게 하려면 어떻게 해야할까?
즉 렌더링의 성능을 좋게 하려면 어떻게 해야할까?
- 소스의 사이즈 줄이기 (바이트 수 줄이기)
- 외부에서 가져오는 리소스양 줄이기 (media 쿼리, 불필요한 파일 나중에 )
- 외부에서 가져오는 횟수 줄이기 (인라인)
- Reflow, RePaint 줄이기
이전글 👇
웹 브라우저의 동작원리 (1) - 브라우저의 구조
[2023-12-30 2차] 논리구조 스터디 공부를 위해 학습한 글입니다. 브라우저의 구조 사용자 인터페이스 : 뒤로가기 홈으로 버튼 등등 사용자가 사용하는 부분 렌더링 엔진 : 웹 사이트를 그려주는 부
solfany.tistory.com
'IT 스터디 > 논리 구조 스터디' 카테고리의 다른 글
| 단일 API / 복수 API 어떻게 설계해야 최대의 효율을 낼까? [API Gateway Pattern] (0) | 2024.04.04 |
|---|---|
| 웹 브라우저의 동작원리 (1) - 브라우저의 구조 (0) | 2023.12.04 |
| spring boot, JPA 요청과 응답 (0) | 2023.12.04 |