- 4월 20일(수)
- 브라우저 렌더링 과정에 대해 설명해보세요
- 웹팩과 바벨에 대해 설명해보세요
- CSR과 SSR의 차이가 무엇인가요?
- CORS가 무엇이고 이를 처리해본 경험을 말씀해주세요
- 웹사이트 성능 최적화에는 어떤 방법이 있는지 설명해보세요
- 쿠키, 세션, 웹스토리지의 차이를 설명해보세요
웹사이트 성능최적화도 여기같이
브라우저는 어떻게 구성되어 있는가
사용자 인터페이스(UI) 레이어는 브라우저에서 볼 수 있는 거의 모든 것으로, 요청한 페이지를 보여주는 창 외의 모든 UI를 의미합니다. 주소창, 뒤로가기, 앞으로 가기, 새로고침, 북마크, 환경설정과 같은 UI가 있습니다. 일종의 '틀'
브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이에서 중재자 역할을 합니다. 만약 여러분들이 사용자 인터페이스 레이어에 있는 새로고침 버튼을 눌렀다면, 브라우저 엔진은 이를 이해하고 새로고침 명령을 수행합니다.
렌더링 엔진은 HTML과 CSS, JavaScript를 파싱하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 합니다. 각 브라우저는 다양한 엔진을 사용하는데,
Chrome과 Opera, Edge는 Blink를, Firefox는 Gecko를, Internet Explorer는 Trident를, Safari는 WebKit을 사용합니다.
네트워크 레이어는 HTTP나 HTTPS 같은 프로토콜을 이용해 외부의 리소스를 얻어오고, 서버에 요청을 보낼 때 사용되는 레이어입니다.
JavaScript 인터프리터(해석기) 는 JavaScript를 해석하고 실행하는 역할을 합니다. 가장 유명한 엔진으로 Chrome에 탑재된 구글의 V8이 있습니다.
UI 백엔드는 브라우저가 동작하고 있는 운영체제의 인터페이스를 따르는 UI들을 처리합니다. 얼럿(alert)이나 셀렉트 박스(select)가 운영체제 별로 다르게 동작하는 것을 쉽게 확인할 수 있죠.자료 저장소는 브라우저 자체에서 하드디스크와 같이 데이터를 로컬에 저장하기 위한 레이어로, 쿠키나 로컬 스토리지, 세션 스토리지, indexedDB, 웹 SQL, 파일시스템 등에 접근하고 데이터를 저장하는데 사용됩니다.
렌더링 엔진의 동작하는 과정 = 중요 렌더링 경로(Critical Rendering Path) = HTML/CSS/JS 파싱 및 그려내기
요약하자면, 파싱한 다음에 HTML/CSS를 통해 렌더 트리를 만들고 플로우, 레이아웃 하고 페인팅
리플로우는 레이아웃 과정이 다시 실행되는 부분을 말하는데 윈도우 리사이징시, 노드가 추가되거나 삭제될때,요소의 위치나 크기가 변경될때 발생합니다. reflow가 실행된 렌더트리를 다시 화면에 뿌려주는 것을 repaint라고 합니다.
리플로우가 일어나는 속성들 - position, width, height, left, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, text-align …
리페인트가 일어나는 속성들 - background, background-image, background-position, border-radius, box-shadow, color, visibility …
transform, opacity -> 리플로우, 리페인트가 일어나지 않음
리플로우/리페인트
브라우저를 사람이라고 생각해봅시다.지어 놓은 건물 부수고 다시 측량하라고 하면 힘들고(리플로우), 다시 인테리어(리페인트)하라고 하면 힘듭니다.가급적 이런 일은 필요하지 않으면 안하는게 좋겠지만, 괜찮아 보이는 웹을 만들려면 리플로우/리페인트 둘 다 일어납니다.솔직히 말해서, 리플로우를 안 일어나게 작성하면 웹페이지가 너무 밋밋하고, 인터렉션 자체가 없어집니다.언제 일어나는지는 알아두고, 오용하는 것을 막는 정도로 타협을 봐야겠죠.
리플로우는 다음과 같은 경우에 발생합니다.외우기보다, 상식적으로 "아, 브라우저가 다시 DOM을 그려야겠구나"라는 생각이 들면 그겁니다.
- DOM 추가, 삭제
- DOM의 위치, 크기, 패딩, 마진 등 기하적인 속성의 변경 (hover 스타일성애자들이 주로 씀)
- 폰트 변경, 이미지 변경
- window.resize 이벤트시 영향 받는 여러 DOM들
- 애니메이션 (DOM 지우고, 옮긴 좌표에 새로 그리고의 반복이니까)
리페인트는 언제 일어나는가?
우선, 리플로우가 일어나면 자연스레 리페인트도 다시 일어나게 됩니다.화면 전체의 가시성을 모두 확인해야 해서 값비싸다고 하다는데그러나, 리플로우 없이도 리페인트가 발생할 때가 있는데 가시성과 관련된 css 속성이 변화할 때 일어납니다.대표적으로
opacity, background-color, visibility, outline이 있겠습니다.
- 리페인트보다 리플로우가 훨씬 값비싼 동작이라고 합니다. 우선 리플로우를 줄입시다.
- visibility, display, opacity에 대해
visibility는 화면에 안 보이는 것일 뿐, 이미 위치를 차지하고 있다. 따라서 visibility가 변경되면 리플로우가 일어나게 된다.
display가 none이면 화면 자체에 공간을 차지 하지 않으므로 리플로우를 줄일 수 있습니다.만약 단순히 보이지 않게 만들고 싶다면 opacity를 쓰면 리플로우없이 리페인트만 발생합니다.
- 애니메이션
애니메이션은 DOM을 지우고, 옮기고의 반복이니 리플로우겠죠.
애니메이션이 발생하는 DOM은 position을 fixed, absolute로 설정하는게 좋습니다. 다른 DOM에 영향을 안 미치니까 리플로우는 안 일어나겠죠.
