1.
[ Q. 브라우저 렌더링 과정 간단하게 설명 ]
- 준혁: HTML과 CSS를 파싱하여 DOMTree와 CSSOM Tree를 생성
- 이 둘을 합쳐 RenderTree 생성
- RenderTree를 바탕으로 화면에 배치하고 그린다.
꼬리질문
- 왜 브라우저 렌더링 과정을 알아야하나요? (배워서 좋은 점)
- 렌더링 과정을 잘 컨트롤하지 않으면 성능상 이슈가 있을 수 있고, 사용자 경험에 중요한 영향을 미치기 때문
- 결국은 프론트엔드는 화면을 출력하는 것을 담당 → 기본 메커니즘의 이해 필요
- 프론트엔드에서 가장 핵심
- 리액트 등장 이유
- 양방향에서 단방향으로 바꾼 것이 핵심
- reconcilation → deep dive → 바닐라로 구현? 팀으로 함께 +
상윤
- 왜 인라인스타일을 지양해야하나요?
- fact / 의견 구분하기
fact: html파서, css파서 병렬적 진행, html 파싱 중 인라인스타일 만나면 Css파서에게 해당 처리 넘겨주게 됨. 이 과정에서 리플로우 발생
- 의견 첨가 방식으로 (reflow → reflow가 왜 발생하는지에 대한 합리적인 추론 필요)
- <link ref=”stylesheet”> 비동기 파싱일 경우 의미 없는게 아닌가?
- (Web) 일반적으로 CSS
<link> 태그를 <head></head> 태그 사이에 위치시키고, JS <script> 태그를 <body> 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요?
자료 아카이빙
브라우저에 URL을 입력하면 발생하는 일
NAVER D2
From GitHub (링크)
1. 브라우저 렌더링 과정을 흐름에 따라 설명해주세요.
HTML파싱(DOM Tree 구성), CSS 파싱(CSSOM Tree 구성) , RenderTree(attachment), Layout(reflow), Paint
- 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다.
- 파싱 과정 : 바이트 -> 문자 -> 토큰 -> 노드 -> DOM/CSSOM
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행합니다. 이 때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM으로 변경할 수 있습니다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다.
- 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅 합니다.
2. Reflow와 Repaint는 무엇이고, 언제 발생하나요?
DOM과 CSSOM이 변경되는 경우에 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저 화면에 다시 렌더링 되는데 이를 리플로우, 리페인트라고 합니다.
리플로우 레이아웃 계산을 다시 하는 것을 말하며, 노드 추가/삭제, 요소의 크기/위치 변경 등 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행됩니다.
input에 값을 변경하는 것도 리플로우, 리페인트가 발생하는지?
리페인트 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것을 말합니다.