[HTML / CSS] 브라우저

FE 개발자 신상오·2022년 7월 21일
0

HTML/CSS

목록 보기
2/2

chap.1 브라우저

힙 메모리(heap memory)

동적 메모리 할당에 사용되는 자료구조
V8 JS엔진은 객체, 동적 데이터를 힙 메모리에 저장

콜 스택(call stack)

함수를 실행하면 탑 쌓듯이 해당 함수는 콜 스택에 쌓임
후입선출 구조로 마지막에 호출된 함수가 가장 먼저 실행
가장 먼저 호출된 함수가 가장 마지막에 실행된다

스택 오버플로우(stack overflow)

스택 프레임을 벗어날 때까지 함수를 무한정으로 호출을하면 웹 브라우저는 동작을 멈춤

UI 백엔드

자료 저장소

쿠키 저장과 같이 모든 자원의 자원을 하드 디스크에 저장하기 위해 존재
웹 브라우저가 직접 데이터를 저장할 수 있게 해줌
데이터가 서버에는 저장 x 클라이언트에만 존재한다
➡️ 네트워크 트래픽 비용을 줄여줌

chap.2 브라우저 렌더링

브라우저 렌더링이란 HTML, CSS, JS가 브라라우저에 출력되는 과정

브라우저 렌더링 과정

파싱

프로그래밍된 파일을 실행시키기 위해 구문 분석하는 단계
파싱은 파서가 담당 일종의 인터프리터나 컴파일러 구성 요소 가운데 하나

1. DOM Tree
HTML 문서 기반으로 구성
2. CSSOM Tree
CSS 문서 기반으로 구성
3. Render Tree
만들어진 DOM, CSSOM을 합친 Tree 구성
4. Layout
브라우저에서 각 요소들이 어떤 위치에 들어가야하는지 파악
5. Paint
실제로 브라우저에 띄우는 과정

리플로우와 리페인트

DOM은 변경되면 렌터 트리를 다시 구축하기 때문에 변경이 될 때마다
리플로우와 리페인트를 다시 해야함

불필요한 레이아웃 줄이기

CSS에서 레이아웃, 페인트 발생 속성

  • 위치, 너비와 관련된 속성 많음

영향을 주는 노드 줄이기 fixed 사용

chap.3 반응형 웹

여러 기기에서 사용가능한 웹만들기
스크린 사이즈에 따라 레이아웃 유동적으로 보여줌

UX디자인 시 모바일에 우선 초점을 맞추는 모바일 퍼스트개념이 등장함

반드시 하나의 URL로 데스트탑, 모바일에 맞춰 변경되는 경우 반응형 웹이라고 함

장점

  • 효율적인 유지보수
  • 검색엔진 최적화 유리

단점

  • 사이트 속도 저하
  • 웹브라우저 호환성 문제

미디어 쿼리

단말기 종류에 따라 각각 다른 스타일 적용

profile
주간 회고용 블로그입니다 (개발일지와 정보글은 티스토리에 작성합니다.)

0개의 댓글