[TIL] 23년 8월 24일 목요일

23년 8월 24일 목요일

오늘의 목표 : 브라우저의 작동방식에 대해서 설명

 

오늘 공부한 내용🤓

· 브라우저란?

→ 웹 페이지를 표시하고 인터넷을 탐색하는 데 사용되는 소프트웨어

 

· 브라우저의 작동 방식

1. 사용자 입력 및 주소 해석: 사용자가 주소창에 웹 주소(Uniform Resource Locator, URL)를 입력하면, 브라우저는 해당 URL을 해석하여 어떤 웹 페이지를 로드해야 하는지 결정하고 URL은 프로토콜(일반적으로 'http' 또는 'https')과 웹 서버의 주소, 경로 등의 정보를 포함

2. 서버 연결 및 데이터 요청: 브라우저는 입력받은 URL을 기반으로 해당 웹 서버에 연결을 시도하고, 웹 서버로부터 웹 페이지의 내용을 요청하고 이 요청은 HyperText Transfer Protocol(HTTP) 또는 보안된 경우 HTTPS를 통해 이루어짐

3. HTML 다운로드 및 파싱: 웹 서버로부터 받은 응답은 주로 HTML(HyperText Markup Language)이며, 이는 웹 페이지의 구조와 내용을 기술하는 언어로 브라우저는 이 HTML 코드를 다운로드하고, 내용을 파싱하여 웹 페이지의 구조를 이해

4. DOM 생성 및 CSS 처리: 브라우저는 파싱된 HTML을 기반으로 Document Object Model(DOM)을 생성합니다. DOM은 웹 페이지의 요소들을 트리 구조로 표현한 것으로, 각 요소는 프로그래밍적으로 조작 가능한 개체로 변환되며, 브라우저는 또한 웹 페이지에 포함된 CSS(Cascading Style Sheets)도 해석하여 요소의 스타일을 적용

5. 렌더링: DOM과 CSS 스타일이 결합되어 화면에 웹 페이지가 표시됩되며, 이 과정을 렌더링이라고 한다. 브라우저는 각 요소의 크기와 위치를 계산하여 화면에 배치합니다. 또한 이미지, 동영상 등의 미디어도 로드하여 표시

6. 자바스크립트 실행: 웹 페이지가 자바스크립트(JS) 코드를 포함하고 있는 경우, 브라우저는 해당 코드를 실행하고 JS는 웹 페이지의 동적인 기능과 상호작용을 구현하는 데 사용되며, DOM을 변경하거나 서버와 데이터를 주고받는 등의 작업이 가능

7. 사용자 상호작용 처리: 사용자의 클릭, 입력 등의 상호작용은 이벤트로 감지되며, 이벤트 핸들러를 통해 적절한 동작이 수행

예를 들어, 버튼 클릭에 따른 페이지 전환이나 입력 양식의 제출과 같은 동작이 여기에 해당

8. 캐싱 및 네트워크 관리: 브라우저는 이미지, 스타일 시트, 스크립트 등을 로컬 캐시에 저장하여 다음에 같은 웹 페이지를 방문할 때 더 빠른 로딩을 가능케 함 또한 네트워크 속도나 연결 상태를 모니터링하여 최적의 경험을 제공하기 위해 조치를 취할 수 있음

 

브라우저는 이러한 단계들을 조합하여 사용자가 웹 페이지를 원활하게 탐색하고 상호작용할 수 있는 환경을 제공

어려웠던 내용😵‍💫

 

궁금&부족한 내용❓

 

느낀 점💡