HTML/CSS 심화

브라우저 

웹 서버에서 양방향으로 통신 

html 문서 및 그림. 멀티미디어 등의 컨텐츠를 열람하는 GUI기반의 소프트웨어 프로그램 

현존하는 브라우저 간 공통점: 동작방식

사용자가 선택한 자원(resource)을 서버에 요청(request), 서버의 응답(response)을 브라우저에 띄움(rendering) 방식

브라우저의 구조 

 

 

자바스크립트 해석기

Rhino	모질라 재단이 운영, 자바로 개발
SpiderMonkey	최초의 엔진, 넷스케이프 내비게이터 지원, 현재 파이어폭스 지원
V8	구글이 개발한 오픈 소스 엔진, 구글 크롬의 엔진임
JavascriptCore	애플에서 개발, 현재 사파리와 react native app지원
Chakra	마이크로소프트 개발 엔진. Edge브라우저 지원

크게 heap memory와 call stack으로 구성

힙 메모리: 동적 메모리 할당에 사용되는 자료구조 

콜스택: 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조 

한정된 메모리 공간을 넘어가면 스택오버플로(Stack overflow)를 일으킴 

 

 

자료저장소

웹스토리지: 웹 브라우저가 직접 데이터를 저장할 수 있게 함 

사용자측에서 더 많은 양의 정보를 안전하게 저장할 수 있도록 함 

서버로 정보가 전송되지 않으므로 저장된 데이터가 클라이언트에만 존재하여 네트워크 트래픽 비용 또한 줄여준다는 특징 보유 

웹 스토리지는 두가지 용도의 저장소 객체를 제공

1. 로컬스토리지: 보관 기한이 없는 데이터 저장

2. 세션스토리지: 하나의 세션만을 위한 데이터를 저장 

 

 

브라우저 렌더링

렌더링 과정

1. 사용자가 브라우저를 통해 웹 사이트에 접속

2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 

3. 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를 만듦

4. 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만듦

5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축

6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정

7. 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그림. 이 과정을 paint라고 함

 

 

리플로우와 리페인트

리플로우: 어떤 웹 인터랙션으로 인해 렌더링 과정의 레이아웃을 반복해서 수행하는 것

리페인트: 페인트 과정을 반복해 수행하는 것

const div = docuemnt.createElement('div');
document.body.append(div);
div.textContent = 'hello world';

최적화하는 방법

- 불필요한 레이아웃을 줄이기

- 리플로우 시 리페인트는 필연적으로 일어남, 리플로우가 발생하는 속성보다 리페인트만 발생하는 속성을 사용

- position, absolute, fixed를 사용하여 영향을 받는 주변 노드들을 줄이기