브라우저 렌더링 과정을 알아보았으니 최적화시키는 방법을 알아보자. 위와 같은 렌더링 과정에서 Reflow와 Repaint는 둘다 비용이 많이 드는 작업이다. 먼저 이 두 과정에 대해 알아보자. Reflow(Layout)이란? 화면구조(Layout)이 변경되었을 때 뷰 포트 내에서 렌더 트리상 노드의 정확한 위치과 크기를 계산하는 과정이다. element의 reflow는 DOM에 있는 모든 하위, 상위 요소의 후속 리플로우를 유발한다. - 모든 엘리먼트의 위치나 길이, 크기 등등을 다시 계산하는 과정 - 상위 엘리먼트를 변경시키면 하위 엘리먼트에도 영향을 끼침 - render tree를 재생성하므로 부하가 크고 레이아웃에 영향을 줌 - DOM노드를 추가, 제거 , 업데이트하는 경우 발생 Repaint(Re..
웹페이지는 브라우저를 통해 보여지게되는데 이때 이 브라우저가 웹페이지를 그리는 방법에 대해 알아보자. 브라우저가 하나의 화면을 그려내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부른다. 이를 수행하는 주체는 렌더링 엔진이다. 렌더링 엔진은 요청받은 내용을 브라우저 화면에 나태내는 일을 담당하는데, HTML, CSS, JavaScript등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀단위로 나타낸다. 브라우저마다 사용하는 렌더링 엔진이 다르고 이 때문에 같은 소스가 브라우저마다 다르게 그려지는 크로스 브라우징이슈가 발생한게 된다. (크로스 브라우징이슈는 자바스크립트 엔진이 달라 발생하기도 한다.) 다시 렌더링 과정으로 돌아와서 위의 그림을 요약하자면 아래와 같은..
1. 웹 브라우저란 WWW을 기반으로 한 인터넷의 컨텐츠(HTML문서와 그림, 멀티미디어 파일등)를 검색,열람하기 위한 응용 프로그램의 총칭. 5대 브라우저 : Internet Explore(혹은 Microsoft Edge), Chrome, Firefox, Safari, Opera 2.브라우저의 주요 기능 :사용자가 선택한 자원을 서버에 요청(Request)하고 서버의응답(Response)을 받아 브라우저에 표시하는 것. 자원(HTML /Javascript /CSS / PDF/ 이미지 파일...)의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World ..
