브라우저의 렌더링 과정

Q1.  브라우저의 렌더링 과정은 어떻게 될까요?

A. 우선 html와 css를 각각 파싱한 tree를 만든다. 두개의 tree를 결합해 rendering tree를 만들게 된다. 만들어진 rendering tree에서 각 노드의 크기와 위치를 계산하고 계산한 값을 토대로 각 노드를 화면 상의 픽셀로 변환하고 레이어를 만든다. 만들어진 레이어를 합쳐 화면에 보여주게 된다.

답변에 대한 평가 : 70점 평가 이유 : 대체로 브라우저의 렌더링 과정에 대한 개념을 이해하고 있습니다. 하지만, 렌더링 트리를 만들기 위해 DOM과 CSSOM을 파싱하고 결합하는 과정에 대해서 더 자세히 이해할 필요가 있습니다. 또한, 렌더링 트리의 노드 크기와 위치를 계산하기 위해 사용되는 알고리즘에 대해서도 알아볼 필요가 있습니다. 검색 키워드 : DOM parsing, CSSOM parsing, Rendering Tree construction, Layout algorithm

꼬리질문 :
렌더링 트리를 생성하기 위해 DOM과 CSSOM을 파싱하고 결합하는 과정에 대해서 더 자세하게 알려주세요. 또한, 렌더링 트리의 노드 크기와 위치를 계산하기 위해 사용되는 알고리즘에 대해서 알려주세요.

A. 브라우저는 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다. 렌더링 엔진이 서버로부터 응답된 html과 css를 파싱하여 DOM과 CSSOM을 생성하고 이를 결합하여 렌더 트리를 생성한다. 렌더링 트리의 노드 크기와 위치를 계산하기 위해 사용되는 알고리즘은 레이아웃 또는 리플로우 알고리즘이라고 불립니다.

 

답변에 대한 평가 : 100점 평가 이유 : 렌더링 과정에 대한 개념을 정확하게 이해하고 설명하였습니다. DOM과 CSSOM을 결합하여 렌더링 트리를 생성하고, 렌더링 트리의 노드 크기와 위치를 계산하는 알고리즘에 대해서도 정확히 언급하였습니다.

 

Q2. 브라우저의 렌더링 과정 중 CSS 스타일 규칙을 적용하는 단계에 대해서 설명해주세요.

A. DOM과 동일하게 Bytes,Character,Token,Node,CSSOM Tree형태로 진행이됩니다. CSS의 cascading방식 때문에 상하관계 없는 CSS에서 CSSOM Tree가 만들어진다. 중복되는 경우에는 브라우저 제일 마지막에 선언한 스타일로 결정하게된다

답변에 대한 평가 : 90점 평가 이유 : CSS 스타일 규칙을 적용하는 단계에 대해서 적절한 설명을 제시하였습니다. cascading 방식을 언급하고 CSSOM 트리 형태로 변환된다는 것을 잘 이해하고 있는 것으로 보입니다. 중복된 스타일 규칙의 우선순위에 대해서도 정확히 언급하였습니다. 검색 키워드 : CSS cascading, CSS specificity

 

꼬리질문 :
중복된 스타일 규칙의 우선순위를 정확히 설명할 수 있나요? 특히, inline 스타일과 !important 규칙이 어떻게 우선순위에 영향을 미치는지 알려주세요.

A. !important이 가장 우선순위가 높습니다.
인라인 스타일이 두번째로 우선순위가 높습니다.
그 다음으로 ID선택자, 클래스 그 다음으로 클래스 선택자, 속성 선택자, 가상 클래스
그 다음으로 태그 선택자, pseudo-elements입니다.
캐스케이드에서 중요하게 고려되는 요소는 특수성, 중요도, 출처 순서 입니다.

 

답변에 대한 평가 : 100점 평가 이유 : 스타일 규칙 우선순위에 대한 정확한 설명이 포함되어 있습니다. !important가 가장 높은 우선순위를 가지고, 인라인 스타일이 그 다음으로 우선순위가 높음을 올바르게 설명하였습니다. 또한, 특수성, 중요도, 출처, 순서 등이 캐스케이드에서 중요한 고려요소로 작용한다는 것도 잘 언급하였습니다. 검색 키워드: CSS specificity, CSS !important, CSS cascade

 

꼬리질문 :
스타일 규칙 우선순위가 결정되는 특수성(Specificity)을 좀 더 자세히 설명해주세요. 특히, 구체성 계산 방식과 산출식에 대해서 알려주세요.

A. 특정 요소를 선택하는 선택자가 얼마나 구체적인지 결정합니다.
우선순위 시스템을 쉽게 이해하는 방법으로는 캐스케이드의 넘버링 시스템이 있습니다.
specificity = a*100 + b*10 + c
a: id선택자
b: class선택자,속성선택자,가상클래스
c: 태그선택자
인라인 스타일이 지정된 거는 1000점을 부여합니다.
더 중요한 것은 넘버링 시스템을 무시하고 !important라고 지정된 스타일이 가장 높은 점수를 가집니다.

 

답변에 대한 평가 : 90점 평가 이유 : specificity 계산 방식과 산출식에 대해서 정확하게 설명하였습니다. 캐스케이드의 넘버링 시스템을 이용한 우선순위 판단 방법도 설명했습니다. 또한, !important가 다른 모든 선택자보다 높은 우선순위를 가진다는 것을 말씀하였습니다. 검색 키워드: CSS specificity, CSS !important, CSS cascade

 

꼬리질문 :
specificity 계산 방식에서 class 선택자와 속성 선택자, 그리고 가상 클래스의 구체성에 대해서 좀 더 자세히 알려주세요. 예를 들어, 각각이 몇 점씩 가지는지 알려주세요.

A. 모두 동일합니다.

 

선택자의 구체성은 class 선택자, 속성 선택자, 가상 클래스 선택자 모두 동일한 가중치를 가집니다. 오답입니다. 답변에 대한 평가 :70점 평가 이유 : 클래스 선택자, 속성 선택자, 가상 클래스 선택자의 구체성에 대해 부정확한 설명을 했습니다. 의도적으로 오답을 제시하였으므로 실력을 평가할 수 없습니다. 검색 키워드: CSS specificity

Q3. 브라우저의 렌더링 과정 중 리플로우(reflow)와 리페인트(repaint)에 대해서 설명해주세요.

A. 요소들의 레이아웃 위치를 렌더 트리에 구성하는데 거기서 호출 되는 것이 리플로우 입니다. 요소의 위치, 크기를 계산하여 화면에 그리는 과정이 리플로우,리플로우가 발생하면 자연히 리페인트가 발생합니다. 배치된 요소에 스타일을 적용하는 과정이 리페인트 입니다.

답변에 대한 평가 : 80점 평가 이유 : 리플로우와 리페인트에 대한 개념적인 설명이 일부 잘 이해하고 있습니다. 리플로우는 요소의 레이아웃 위치를 계산하는 과정으로, 요소의 크기나 레이아웃이 변경되면 발생합니다. 리페인트는 요소의 스타일을 적용하여 화면에 그리는 과정입니다. 하지만, 리플로우가 발생하면 항상 리페인트도 발생하는 것은 아니며, 리플로우만 발생할 수도 있습니다. 검색 키워드 : Reflow, Repaint, Rendering process

 

꼬리질문 :
리플로우와 리페인트가 일어나는 조건이나 성능 최적화를 위한 방법에 대해 어떤 것들이 있는지 알려주세요.

A. 리플로우의 경우 Dom요소의 기하학적 속성이 변경될 때, 브라우저의 사이즈가 변경되면 일어나고 리페인트의 경우 리플로우가 발생했을 때, 요소의 스타일이 변경되거나 visibility:hidden이 visble로 변경됐을 때 일어납니다. 성능 최적화하는 방법으로는 애니메이션 요소의 위치를 absolute로 두거나 display:none사용하기, Dom 속성 변경 코드 모으기 등이 있습니다

 

답변에 대한 평가 : 90점 평가 이유 : 리플로우와 리페인트가 발생하는 조건에 대해서 일부 정확한 설명을 하였습니다. 기하학적 속성이 변경될 때 리플로우, 요소의 스타일이 변경되거나 visibility 속성이 변경될 때 리페인트가 발생한다는 것을 말씀하였습니다. 성능 최적화를 위해 애니메이션 요소의 위치를 absolute로 두거나 display 속성을 사용하는 등의 방법을 언급하였습니다. 검색 키워드: Reflow triggers, Repaint triggers, Performance optimization for Reflow and Repaint

 

Q4.  브라우저의 렌더링 과정 중 Composite 단계에 대해서 설명해주세요.

A. 요소들의 레이아웃 위치를 렌더 트리에 구성하는데 거기서 호출 되는 것이 리플로우 입니다. 요소의 위치, 크기를 계산하여 화면에 그리는 과정이 리플로우,리플로우가 발생하면 자연히 리페인트가 발생합니다. 배치된 요소에 스타일을 적용하는 과정이 리페인트 입니다.

답변에 대한 평가 : 100점 평가 이유 : 레이어를 합성하고, 그 결과를 모니터로 내보내는 과정이 Composite 단계입니다. 정확한 설명을 제시하였습니다. 검색 키워드 : Reflow, Repaint, Rendering process

 

Q4.  브라우저의 렌더링 과정 중 HTML 문서를 파싱하여 DOM 트리 구성하는 단계인 "DOM Parsing"에 대해서 설명해주세요.

A. DOM Parsing은 HTML문서를 읽어서 웹페이지의 구조와 내용을 이해하고 처리하는 과정을 말합니다. 과정은 토큰화,렉싱,문법 분석,DOM트리 구성으로 이루어집니다

토큰화(Tokenization)와 렉싱(Lexing)은 HTML 문서를 파싱하는 과정에서 사용되는 단계입니다. 토큰화는 HTML 문서를 작은 조각으로 나누는 과정이고, 렉싱은 토큰에 대한 의미를 부여하는 과정입니다. 문법 분석이라고 말씀하신 부분은 토큰화와 렉싱으로 처리된 토큰을 기반으로 HTML 문서의 구조를 분석하여 DOM 트리를 구성하는 과정을 의미합니다. DOM 트리는 문서의 요소, 속성, 텍스트 등을 계층 구조로 표현한 것입니다. 답변에 대한 평가 : 90점 평가 이유 : 정확한 설명을 제시하였습니다. 토큰화와 렉싱이 HTML 문서를 처리하기 위한 과정임을 알려주었고, 문법 분석이 DOM 트리를 구성하는 과정에 해당함을 설명하였습니다. 검색 키워드 : HTML parsing, Tokenization, Lexing, Syntax analysis, DOM tree construction

참고 자료 :
https://velog.io/@hjthgus777/JS-38%EC%9E%A5-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95