기억은 변하지만 기록은 변하지 않는다.

브라우저8

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

[브라우저] 다중 프로세스 아키텍처(feat. Chrome) 참고 자료 : https://d2.naver.com/helloworld/2922312 목차 ◆ CPU : Central Processing Unit : 중앙처리장치 ◆ GPU : Graphics Processing Unit : 그래픽처리장치 ◆ 프로세스와 스레드로 프로그램 실행 ◆ 브라우저 아키텍처 : 프로세스, 스레드 관점 ◆ 다중 프로세스 아키텍처의 장점 ** 프로세스는 서로 데이터를 주고 받기 위해 IPC를 사용해야한다. Thread는 동일 영역에 있는 프로세스 내부에서 실행되기 때문에, 자원을 공유한다. ◆ CPU : Central Processing Unit : 중앙처리장치 컴퓨터의 두뇌. 똑똑한 일꾼 한명. 여러 종류의 작업을 하나씩 순서대로 처리할 수 있다. ◆ GPU : Graphics P.. 브라우저 2023. 3. 1.

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

[브라우저] CSS 파싱(문맥 자유 문법 O); ◆ CSS파싱 ■ 특징 - 문맥 자유 문법이다. = 규칙이 딱 정해져 있다. = 파서(상향식 또는 하향식)를 통해서 파싱이 가능하다. - 웹킷은 CSS 문법 파일로부터 자동으로 파서 생성을 위해 플렉스와 바이슨 파서 생성기를 활용한다. - 파이어 폭스는 직접 작성한 하향식 파서를 사용한다. - CSS 규칙 객체는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다. ■ 스크립트와 스타일 시트 진행 순서 - 스크립트 : 이전 글 브라우저의 동작 원리에서 설명한 것과 같이, 태그를 만나면 문서의 파싱은 중단된다. 네트워크로부터 자원을 가져오는 단계 또한 실시간으로 처리(동기)되고 자원 받을 때까지 파싱은 중단된다. 비동기로 처리하기 위해서는 async, defer옵션을 적절히 사용한다. .. 브라우저 2023. 2. 27.

[브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) ◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환. ■ 특징 - HTML 어휘 및 문법은 W3C 에 명세되어 있음. HTML 5까지 나왔다. - HTML 정의를 위한 공식적인 형식으로 DTD(문서 형식 정의)가 있지만 문맥 자유 문법이 아니다. △ 언어가 유연함 △ HTML 오류에 대한 브라우저의 관대함. △ 변경에 의한 재파싱. 스크립트의 document.write는 토큰을 추가할 수 있기 때문에, 입력 과정에서 파싱이 수정될 수 있따. ■ DOM : Document Object Model : 문서 객체 모델 DOM은 마크업과 1:1의 관계를 맺는다. 예시) DOM은 W3C에 의해 명세가 정해져 있다.(https://www.w3.org/DOM/DOMTR) * HTML 정의 : https://ww.. 브라우저 2023. 2. 26.

[브라우저] 파싱이란?(Parsing이란?) - 파싱의 과정(어휘 분석, 구문 분석) ■ 파싱 특정 데이터에서 원하는 데이터만 추출해내는 과정을 '파싱'이라 알고 사용해왔다. 또는 특정 양식의 문서를 원하는 양식으로 변환하는 것을 파싱이라 사용했다. (뇌피셜...) 여기서는 '문서 파싱'은 브라우저가 이해할 수 있는 구조로 코드를 변환하는 작업을 말한다. 파싱의 결과로는 노드트리(=파싱트리=문법트리)가 도출된다. 예시) 2+3-1 와 같은 식은 다음과 같은 트리가 된다. 식은 표현식과 숫자로 이루어져 있으며, 각각은 노드가 된다. △ 문법(파싱의 문법) 문맥 자유 문법 : 파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데, 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다. (쉽게 말해서, 특정 규칙에 따라 작성된 문서들만 파싱이 가능하다. 대부분의 프로그래밍 언어.. 브라우저 2023. 2. 26.

[브라우저] 브라우저의 동작 원리 ◆ 브라우저의 동작 원리 브라우저를 켜고, 웹 사이트에 접속하면 일어나는 일에 대해서 알아보겠습니다. ■ 서버로부터 데이터 요청(주로 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.

이전 1 다음

티스토리툴바