본문 바로가기
반응형

브라우저렌더링3

브라우저 렌더링 과정_(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.
브라우저 렌더링 SSR, CSR 브라우저 렌더링 가져온 페이지 정보를 브라우저가 어떻게 출력할까? 브라우저 종류: 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등 브라우저 주요기능: HTML 페이지, PDF, 이미지등 서버에게 요청해서 보여주는 것 브라우저가 화면에 나타나는 요소를 렌더링 할 때 렌더링 엔진을 사용한다. 렌더링 엔진을 사용해서 유저가 요청한 컨텐츠를 표시해준다. EX) 크롬: 블링크, 사파리: 웹킷 HTML회면 요청 => HTML, CSS 파싱 => 화면에 표시 파싱이란? 브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것이다. 파싱의 결과: DOM트리, NODE 트리로 표현된다. DOM트리: HTML페이지를 구조화해서 계층으로 표현한 개념으로 최상단 루트 태그를 시작으로 페이지에 대한 각 요소가 노드로 만.. 2022. 10. 31.
728x90
반응형

티스토리툴바