반응형 CS/브라우저7 크롬 브라우저 아키텍쳐 각각의 브라우저 크롬, 파이어폭스, 사파리 등의 아키텍쳐는 표준이 없다는 특징을 갖고 있다. 그 중 크롬 브라우저 아키텍쳐의 프로세스 구성을 알아보려고 한다. [크롬 브라우저 Process의 구성] Browser Process : 상단 탭구성, 앞뒤로 가기, 새로고침 아이콘 URL 입력창의 부분을 말한다. 입력이 일어나면 브라우저 프로세스의 UI스레드가 처리를 한다. 만일 특정 주소가 입력된 토대로 네트워크 스레드가 새로운 요청을 보낸다. GPU Process: 모든 프로세스가 담긴 전체 화면 Plugin Process: 플러그인 당 하나씩 표현 Renderer Process: 탭 하나에 표현되서 그리는 브라우저의 화면을 담당. Utility Process * Renderer Process, Render.. 2023. 5. 28. 브라우저 아키텍쳐 이해하기_프로세스 스레드 GOAL - 프로세스 안에 스레드란? - 스레드와 하드웨어와의 연관성? - 멀티 프로세스 내부의 구조? 멀티 프로세스를 이해하기 위해서는 하드웨어와 소프트웨어의 연관성에 대해서 알아야 할 필요성이 있다. 프로세스도 추상적인 개념이다. [브라우저에서 화면이 그려지는 큰 과정] 1. 브러우저에 URL을 입력했을 때, 브라우저가 화면을 그리기 위해서 파일을 가져옴 2. 렌더링 프로세스: 가져온 파일을 브라우저가 렌더링 하는 과정 먼저 브라우저가 화면을 그리기 위해서 어떠한 일들이 일어나는지에 대해서 간단하게 살펴보려고 한다. 브라우저가 실행이 됐을 때 데이터는 메모리에 보관이 된다. 그런데 하드웨어인 메모리와 브라우저에는 어떤 연관이 있을까? 라는 질문이 꼬리를 물고 물어 드디어 CS 공부의 필요성이나 브라우.. 2023. 5. 26. 브라우저 렌더링 과정_(2) [html 파싱 DOM 생성] 브라우저의 요청에 의해서 서버가 응답한 HTML문서는 문자열로 이루어진 텍스트이다. 해당 텍스트 문서를 브라우저에 시각적으로 렌더링을 하기 위해서는 브라우저가 이해할 수 있는 자료구조로 변환을 해야 한다. 브라우저 렌더링 엔진은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조 (DOM)을 생성한다. rendering engine working process 렌더링 엔진은 URI를 통해 요청을 받아 해당하는 데이터를 렌더링 하는 역할을 한다. 크롬의 경우 webkit이라는 렌더링 엔진을 사용한다. [render tree] 렌더링을 위한 트리 구조의 자료구조이다. 브라우저 화면에 렌더링 되지 않는 NODE(script, meta tag등)와 display:none등 .. 2023. 1. 2. 브라우저 렌더링 과정_(1) browser rendering process 브라우저를 구성하는 각각의 elements는 어떤 기능을 하는 것일까? html, css: 화면을 렌더링을 하는 주된 자료 javascript: html태그를 동적으로 만드는 역할을 하는 프로그래밍 언어 [browser elements] 사용자 인터페이스 브라우저창에서 보이는 주소창, 홈, 새로고침, 이전 버튼 등을 말한다. 사용자 인터페이스는 사용자가 컨트롤 할 수 있는 보여지는 페이지를 말한다. 브라우저 엔진 사용자가 주소 표시줄에 url을 입력했을 때 uri를 렌더링 엔진에게 전달해주는 역할을 한다. 홈을 눌렀을 때 홈페이지로 이동 시켜줄 수 있도록 렌더링 엔진에게 전달하는 역할을 한다. 자료 저장소로 자료를 찾기위해 전달을 한다. 렌더링 엔진 uri에.. 2023. 1. 2. 이전 1 2 다음 728x90 반응형
