브라우저4

• 

  [브라우저] 네비게이션- 프로세스와 스레드의 동작 참고 그 이상 : https://d2.naver.com/helloworld/9274593 ◆ 네비게이션 : 브라우저 주소 표시줄 부터 렌더링 준비까지... 브라우저의 주소 표시줄에 url을 입력하면 브라우저가 인터넷에서 데이터를 가져와 페이지를 표시한다. 시작은? ■ 브라우저 프로세스 : 탭 영역 밖에 있는 모든 부분 제어 브라우저 프로세스는 UI 스레드와 네트워크 스레드, 스토리지 스레드 등이 있다. 1. UI 스레드 : 브라우저의 버튼과 입력란을 그린다. 2. 네트워크 스레드 : 인터넷에서 데이터를 가져오기 위해 네트워크 스택을 다룬다. 3. 스토리지 스레드 : 파일에 대한 접근 제어 주소 표시줄에 url 입력하면 UI 스레드가 입력을 처리한다. ■ 네비게이션 1. 입력 처리 : 주소창 입력을 분석해.. 브라우저 2023. 3. 1.

• 

  [브라우저] 배치(Layout), Paint(feat 더티비트) ◆ 브라우저 렌더링 순서 * Render Tree : 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리.(display none 이나 meta정보는 포함되지 않음) * 박스모델..(Block , Inline Block, InLine...) ■ 배치 = Layout = Reflow라 불린다. Render Tree에는 보여줄 수 있는 모든 정보가 있다. 이를 실제로 화면에 보여주기 위해서 요소들의 정확한 위치와 크기를 계산하는 과정이다. 화면에서 차지하는 영역, 여백, 스타일 속성이 계산된다. ( %, em 같은 상대적인 단위는 px단위로 변환됨) 이 과정을 통해서 렌더링엔진은 각 요소가 어떻게 생겼고, 어디에 보여줄 지 알게 된다. 구체적으로는 왼쪽에서 오른쪽으로, 위에서 아래로 배치.. 브라우저 2023. 2. 27.

• 

  [브라우저] 브라우저의 동작 원리 ◆ 브라우저의 동작 원리 브라우저를 켜고, 웹 사이트에 접속하면 일어나는 일에 대해서 알아보겠습니다. ■ 서버로부터 데이터 요청(주로 network 모듈) 1. 브라우저는 DNS서버에 호스트에 해당하는 ip를 요청 2. DNS 서버는 ip를 브라우저에 응답. 3. 웹 브라우저와 서버는 비밀 key를 통해 3Way- Handshake로 데이터 주고 받기 위한 준비 완료. 4. 데이터 요청 : HTTP Reqeust 5. 응답 : HTTP Response ■ 사용자에게 데이터 출력 HTML, CSS, javascript 를 parsing하고 화면에 표시한다. -------------------- Contstruction ---------------------- 1. HTML 파싱 → DOM Tree 생성 2.. 브라우저 2023. 2. 26.

• 

  [브라우저] 브라우저의 구조 ◆ 브라우저란? 선택한 자원을 서버에 요청하고, 전송 받은 자원을 사용자에게 표시해주는 tool이다. ※ 전송 받은 자원 : HTML, CSS, Javascript, PDF, Image, WASM 등등 - 좀 더 구체적으로 설명하자면, 1. 사용자 인터페이스 영역의 주소창에서 URI(Unified Resource Identifier : 자원 식별자)를 입력한다. 2. 네트워킹 모듈을 통해 HTTP 요청을 보내고, 응답을 받는다.(응답은 자원을 포함한다.) 3. 전송받은 자원은 렌더링 엔진을 통해서 사용자에게 볼 수 있는 형태의 오브젝트로 변환된다.(렌더링) - 브라우저 엔진은 이 때 전송받은 자원을 렌더링 엔진으로 넘겨주는 역할을 한다. * 필요한 경우 자바스크립트 해석기를 통해 자바스크립트 코드를 해석.. 브라우저 2023. 2. 23.