브라우저 렌더링 방식에 대해 설명
렌더링 방식은 렌더링 과정으로도 볼 수 있습니다.
- HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만듭니다.(Parsing)
- 두 Tree를 결합하여 Rendering Tree를 만듭니다. (Style)
- Rendering Tree에서 각 노드의 위치와 크기를 계산합니다. (Layout)
- 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만듭니다. (Paint)
- 레이어를 합성하여 실제 화면에 나타냅니다. (Composite)
리플로우와 리페인트에 대해 설명
리플로우: 생성된 DOM 노드의 레이아웃 수치 변경 시 영향 받은 모드 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정입니다. DOM 요소의 기하학적 속성이 변경될 때, 브라우저 사이즈가 변할 때, 스타일시트가 로딩되었을 때 발생하는 변화들을 다시 계산해주는 과정을 뜻하며, 레이아웃이라고도 합니다.
리페인트: 리플로우 과정이 끝난 후 생성된 렌더 트리를 다시 그리는 과정, 변경된 요소를 실제로 화면에 그려주는 작업을 뜻합니다. 리플로우가 발생하면 필연적으로 리페인트가 실행됩니다. 리플로우보다는 상대적으로 훨씬 가벼운 작업입니다.
예상 꼬리질문 "웹 인터랙션이란?"
인터랙션은 움직임이 있는 있는 화면 및 액션입니다.
예를 들어 화면에 있는 사물들을 터치하거나 기울이면 화면이 바뀌거나 안에 있는 사물들이 즉각 반응을 합니다. 그리고 언어도 선택할 수 있어서 다른 나라의 언어도 함께 배울 수 있고 단어는 물론 음성까지도 들으면서 텍스트를 읽을 수 있습니다. 즉 웹 상에서 움직임이 있거나 유저와 상호 작용을 할 수 있는 화면 및 액션을 웹 인터랙션이라고 합니다.
반응형 웹은 무엇이고 장단점에 대해 설명
반응형 웹의 장점으로는 검색엔진(SEO) 최적화 유리, 효율적인 유지 보수를 들 수 있으며, 단점으로는 사이트의 속도 저하, 웹브라우저 호환성 문제등이 있습니다.
반응형 웹 디자인이란 하나의 사이트에서 브라우저의 다양한 종류의 기기에 최적화된 화면을 보여주는 것을 말합니다.
자바스크립트 엔진의 콜 스택이 무엇인지 설명
콜 스택이란 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트(Execution Context)를 저장하는 자료구조입니다.
만약 함수를 실행한다면, 해당 함수는 콜 스택의 가장 상단에 위치합니다. 함수의 실행이 끝난다면 해당하는 함수는 콜 스택의 가장 상단에 위치하고 있기 때문에 바로 제거할 수 있게 됩니다.
꼬리질문 "왜 가장 상단에 위치할 수 있죠?"
스택이라는 자료구조가 후입선출이라는 구조를 가지고 있기 때문에 가능한 일입니다.
