반응형
- 브라우저 작동 원리
- 브라우저의 구조
- 사용자 인터페이스: 주소표시줄, 버튼 등
- 브라우저 엔진: UI와 랜더링 엔진 사이의 동작을 제어
- 랜더링 엔진: 요청한 콘텐츠를 표시
- 통신: 네트워크 호출
- JS 해석기
- UI 백엔드
- 자료 저장소: 로컬 저장
- 통신 과정
- 사용자가 브라우저에 URL 입력
- URL 정보를 DNS로 보냄
- DNS에서 IP주소를 받아 정보를 받아올 컴퓨터(웹서버) 정보 확인
- URL 정보를 http프로토콜을 통해 요청 메시지 전송
- TCP/IP 이용
- http프로토콜을 통해 다시 URL정보로 변환되어 웹서버에 전송
- 웹서버에서 URL에 맞는 정보를 찾음
- http를 통해 응답 메시지로 전송
- TCP/IP 이용
- http를 통해 해당 정보를 브라우저로 전달
- 브라우저 엔진을 통해 사용자가 볼 수 있는 정보로 변화되어 화면에 출력
- 랜더링 과정
- DOM, CSSOM 생성
- html과 css는 단순 텍스트인데 parser를 통해 object model로 변환
- Render tree 생성
- Layout 그리기
- paint: layout 계산 후 요소들을 실제 화면에 그림. 이때 텍스트, 색, 이미지 등이 완성
- DOM, CSSOM 생성
- 브라우저의 구조
반응형
'개발이야기 > 웹개발' 카테고리의 다른 글
[코드잇 스프린트 풀스택 4기] 렉시컬 스코프(Lexical Scope) (0) | 2024.11.25 |
---|---|
[코드잇 스프린트 풀스택 4기] 자바스크립트의 this (0) | 2024.11.25 |
[코드잇 스프린트 풀스택 4기] 자바스크립트의 var, let, const (0) | 2024.11.25 |
[코드잇 스프린트 풀스택 4기] 시멘틱 태그란 무엇이며 어떤 장점이 있는가? (0) | 2024.10.27 |
[코드잇 스프린트 풀스택 4기] CSS의 Cascading이란? (0) | 2024.10.27 |