저장을 습관화
230823 TIL - 브라우저의 작동방식 본문
브라우저(Browser)란
사용자가 웹 브라우저를 통해 웹 서버에 웹 페이지를 요청하면 웹 서버는 웹 페이지 정보를 응답한다.
웹 브라우저는 웹 서버로부터 웹 페이지 정보(HTML, CSS, JavaScript)를 받아 해석하고, 사용자에게 보여준다.
브라우저의 기본 구조
브라우저의 주요 구성 요소는 다음과 같다.
1. 사용자 인터페이스: 사용자가 접근할 수 있는 영역이다. URI를 입력할 수 있는 주소 표시줄 - 이전/다음 버튼, 북마크 메뉴 등, 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
3. 렌더링 엔진: 웹 서버에 요청한 컨텐츠를 표시한다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.
4. 통신: HTTP 요청과 같은 네트워크 호출에 사용된다. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다.
5. UI 백엔드: 콤보 박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.
6. 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행한다.
7. 자료 저장소: 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
렌더링 엔진과 동작 과정
HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다.
렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작한다.
1. HTML 문서를 파싱하고 "컨텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다.
2. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다.
3. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리로 생성한다.
렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있으며, 정해진 순서대로 화면에 표시된다.
4. 렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.
5. UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이 진행된다.
예시 1) 모질라가 제작한 Gecko 엔진과 파이어폭스 브라우저
예시 2) 오픈 소스 엔진 웹킷을 사용하는 사파리, 크롬
자바스크립트
HTML+CSS의 파싱, 렌더 트리 구축, 배치, 그리기 작업은 렌더링 엔진에서 완료되었지만,
자바스크립트의 처리는 렌더링 엔진이 아닌 브라우저의 자바스크립트 엔진이 담당한다.
HTML 파서는 <script> 태그를 만나면 JavaScript 코드를 실행하기 위해
DOM 생성 프로세스를 중지하고, 자바스크립트 엔진으로 권한을 넘긴다.
제어 권한을 넘겨받은 자바스크립트 엔진은 <script> 태그 내의 JavaScript 코드 또는 src 속성에 정의된
JavaScript 파일을 로드하고 파싱하여 실행한다.
JavaScript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨 중지했던 시점으로 돌아가
DOM 생성을 재개한다.
이처럼 브라우저는 동기적으로 HTML, CSS, JavaScript를 처리한다.
하지만 자바스크립트 엔진에 제어 권한이 있을때 JavaScript 코드가
아직 완성되지 않는 DOM을 조작하게 된다면 에러가 발생할 것이며,
이것이 일반적으로 HTML 파일에서 JavaScript 코드를 <body> 태그 하단에 위치시키는 이유이다.
만약 HTML 파일의 내용이 너무 커서 파싱과 JavaScript의 실행에 너무 오랜 시간이 걸린다면
JavaScript의 코드 내용이 들어갈 <script> 태그를 <head> 태그 안에 위치하되,
defer 속성을 부여하여 HTML의 파싱과 JavaScript의 불러오기를 병렬적으로 수행할 수도 있다.
<head>
<p>HTML head의 내용</p>
<script defer src="jsfile.js"></script>
</head>
<body>
<p>HTML body의 내용</p>
</body>JavaScript의 실행은 HTML의 파싱이 모두 완료될때까지 기다린 후 같이 진행된다.
병렬 처리로 시간도 절약하고 HTML-JS 순서대로 실행되기 때문에 의존적인 문제를 보완할 수 있다.
[참조]
https://d2.naver.com/helloworld/59361
https://bbangson.tistory.com/87
[CS] 웹 브라우저는 어떻게 작동하는가?
웹 브라우저 작동 원리 주소창에 https://www.naver.com 혹은 https://www.youtube.com 등 다양한 URL을 검색하여 해당 웹 페이지에 접속한 경험이 있을 겁니다. 그렇다면 어떤 동작 원리로 우리가 입력한 웹
bbangson.tistory.com
https://ddangjiwon.tistory.com/140
브라우저의 작동 원리
웹브라우저가 웹서버에 웹페이지 요청을 하면 웹서버는 웹페이지 응답을 한다. 즉, 서버가 브라우저에게 HTML문서를 전달하고 브라우저는 이를 읽고 해석한 후 Client에게 보여준다. HTML 및 CSS를
ddangjiwon.tistory.com
https://ctrs.tistory.com/16 - 6. HTML에서 <script>는 <head>, <body> 어디에 들어가야할까?
230602 TIL
1. input 입력값 가져와서 출력하기 https://hianna.tistory.com/411 https://velog.io/@woosungkim0123/%EB%B6%84%EA%B8%B0%EC%B2%98%EB%A6%AC-%EA%B8%B0%EB%8A%A5 https://wikidocs.net/112349 2. getElementbyId https://kyounghwan01.github.io/blog/JS/JSbasi
ctrs.tistory.com
'공부 > TIL' 카테고리의 다른 글
| 230828 TIL - 객체 지향 프로그래밍이란 (0) | 2023.08.28 |
|---|---|
| 230824 TIL - 쿠키와 세션, 둘의 차이점 (0) | 2023.08.24 |
| 230822 TIL - CORS란 (0) | 2023.08.22 |
| 230821 TIL - HTTP 메소드란 (0) | 2023.08.21 |
| 230819 TIL - Primary Key, Foreign Key (0) | 2023.08.19 |