TIL: 2022-11-21

⚙️ 오늘 배운 주제

브라우저 작동 원리, 반응형 웹

 

🐹 오늘의 기분

주말에 일정이 있어서 여기저기 다녀왔더니 피곤이 한번에 몰려와서 집중이 다소 힘들었던 하루였다. 오늘 만난 페어분은 전에 한 번 뵀던 분이라 편하게 할 수 있었다. 브라우저 관련 개념 학습은 내용이 정~말 많아서 시간 내에 제대로 공부하기에는 어려웠다. 일단 개념만 알아두고 더 깊은 내용은 차차 살펴봐야겠다.

 

🗝 키워드

브라우저 엔진, 렌더링 엔진, 자바스크립트 해석기, 힙 메모리, 콜 스택, 리플로우, 리페인트, 미디어쿼리

 

🗣 스스로에게 설명

브라우저란?

웹 서버에서 양방향으로 통신하며 html 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 소프트웨어 프로그램

구조

1. 브라우저 엔진
브라우저 엔진과 렌더링 엔진을 묶어서 브라우저 엔진이라고 하기도 함.
웹 브라우저마다 전용 엔진을 쓰고 있음.
DOM을 생성함
Gecko, Webkit, Blink, Trident, EdgeHTML 등

 

2. 렌더링 엔진
요청한 콘텐츠를 화면에 출력하는 역할

 

3. 통신
네트워크 호출, 플랫폼의 독립적인 인터페이스

 

4. 자바스크립트 해석기
힙 메모리와 콜 스택으로 구성됨

힙 메모리: 객체 또는 동적 데이터 저장, 가비지 컬렉션이 발생하는 곳

콜 스택: 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
- 스택 프레임 = 스택에 쌓이는 데이터 하나하나
- 자바스크립트는 싱글 스레드 기반의 언어 (콜 스택이 하나)
- 크기에 제한이 있어 넘치면 스택오버플로우가 발생한다.

 

https://deepu.tech/memory-management-in-v8/
크롬의 V8 엔진 작동 방식을 설명해놓은 칼럼

 

5. UI 백엔드
렌더링 엔진 분석한 렌더 트리를 브라우저에 그리는 역할
명령어 라인 인터페이스(CLI)
일괄 처리 인터페이스(Batch Interface) - 대규모 시스템에서 대량의 데이터를 처리하는데 자주 사용됨.

 

렌더링 과정

사용자가 브라우저로 웹사이트에 접속한다.
브라우저는 서버로부터 HTML, CSS, JavaScript와 같이 필요한 리소스를 다운받는다.
렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 만든다.
도중에 <link> 나 <style> 태그를 만나면 파싱을 잠시 멈추고 CSSOM을 만든다.
<script> 태그도 마찬가지로 HTML 문서 파싱 작업을 일시적으로 중단시킨다. (<script> 태그를 body 끝나기 직전에 써야 하는 이유)
DOM 트리와 CSSOM 트리를 결합해 렌더 트리를 만든다.
레이아웃 과정을 통해 각 요소를 어디에 배치할지 결정한다.
렌더 트리를 화면에 그리기 시작한다 (=paint)

최적화 시 어떤 단계에서 최적화를 시켜야 하는지 알 수 있게 되기 때문에 렌더링 과정을 알아두는 것은 중요하다.

리플로우와 리페인트

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

 

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

 

DOM이 변경되면 렌더 트리를 구축하고 그럴 때마다 리플로우와 리페인트를 다시 해야 한다.
gpu를 많이 차지하기 때문에 프레임드랍과 직접적인 연관이 있다.

이를 방지하기 위해서는 불필요한 상호작용을 줄이는 것이 중요하다!

반응형 웹

기기들의 디스플레이 종류에 반응해 그에 맞도록 요소가 배치되도록 설계하는 것

장점: 유지보수 및 검색엔진 최적화에 유리
단점: 속도 저하와 브라우저 호환성 문제

미디어쿼리의 미디어 타입: all, print, screen, speech

디스플레이 구현에는 screen이 많이 쓰인다.
max-width, min-width 등

@media (조건) {
  적용할 CSS 작성
}
/* 또는 */
@media 미디어타입 and (조건) {
  적용할 CSS 작성
}

 

❓ 막혔던 부분

페어분과 반응형 웹을 구현하는데 미디어쿼리를 적용할 웹사이트부터 만드는 게 힘들었다. 막상 반응형 웹을 만들려니까 아이디어가 잘 안 떠올라서 페어분과 만나기 전에 조금 걱정됐었는데 페어분께서 이것저것 제시해주셔서 과제를 완료할 수 있었다. 시간이 많이 촉박했던게 아쉽다. 다른 분들 과제물을 보니 부트스트랩같은 걸 활용하신 경우도 있었다. 내일은 이어서 애니메이션을 넣어볼건데 어떤 걸 할 지 조금 생각해봐야겠다.

🔎 공부가 더 필요한 부분

머릿속에 개념이 파편화되어있어서 브라우저의 동작 과정을 말로 풀어서 설명하는 연습이 필요하다.