CS/브라우저 13

브라우저 렌더링 원리 /edited by.혜경

아래의 글은 여러 좋은 글들을 발췌해 모아 편집한 내용입니다. 발췌의 출처는 제일 하단에 모아놓았습니다. 렌더링 엔진 렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다. 브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합한다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타낸다. ➕ 웹킷(WebKit)이란? 브라우저 렌더링 엔진의 일종. 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크. 각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다. 접두어로 붙는 css속성으로 브라우저..

CS/브라우저 2023.06.18

브라우저 렌더링 - 이도영

브라우저 렌더링 브라우저 렌더링이란? 웹페이지를 HTML, CSS, JS 등의 웹 리소스를 파싱하고 처리, 렌더링을 통해 브라우저를 유저들에게 시각적으로 보여주는 과정이다. 브라우저 렌더링 방법 1. CSR(Client Side Rendering) 클라이언트 영역에서 렌더링을 수행하는 방식이다.사용자가 웹브라우저를 통해서 웹사이트에 방문 했을 때 웹사이트에서 제공하는 웹페이지에 대한 HTML, CSS, JavaScript와 같은 리소스들을 클라이언트 단에서 다운로드 받고 브라우저에서 페이지 전환을 처리하여 보여주는 방식이다. CSR rendering 방식에서 서버의 역할은 페이지가 그려질 때 웹리소스 파일을 제공하는 역할과 페이지가 모두 로딩이 되었을 때 클라이언트에서 요청하는 데이터를 전송해주는 역할..

CS/브라우저 2023.06.18

브라우저와 렌더링에 대하여

[ 브라우저 ] 브라우저는 우리 접속하는 크롬, 사파리, 파이어폭스 등을 말함 브라우저는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램임. 웹 브라우저는 동기적으로 HTML, CSS, JS 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어(소프트웨어는 컴퓨터를 비롯한 시스템에서 특정 작업을 수행하게 하는 프로그램의 집합) 동기적으로 하는 이유는 DOM 트리가 완성되기 전에 script가 DOM을 조작하면 에러가 발생하게 되고, 화면에는 우선적으로 HTML 요소들로 이루어진 레이아웃 화면이 렌더링 되고, 그 다음에 script를 읽어서 사용자와 상호작용하는 순서로 이루어지기 때문임 브라우저는 유저가 선택한 자원을 서버로 부터 받아와서 유저에..

CS/브라우저 2023.06.18