브라우저 렌더링 과정을 알아보았으니 최적화시키는 방법을 알아보자. 위와 같은 렌더링 과정에서 Reflow와 Repaint는 둘다 비용이 많이 드는 작업이다. 먼저 이 두 과정에 대해 알아보자. Reflow(Layout)이란? 화면구조(Layout)이 변경되었을 때 뷰 포트 내에서 렌더 트리상 노드의 정확한 위치과 크기를 계산하는 과정이다. element의 reflow는 DOM에 있는 모든 하위, 상위 요소의 후속 리플로우를 유발한다. - 모든 엘리먼트의 위치나 길이, 크기 등등을 다시 계산하는 과정 - 상위 엘리먼트를 변경시키면 하위 엘리먼트에도 영향을 끼침 - render tree를 재생성하므로 부하가 크고 레이아웃에 영향을 줌 - DOM노드를 추가, 제거 , 업데이트하는 경우 발생 Repaint(Re..
웹페이지는 브라우저를 통해 보여지게되는데 이때 이 브라우저가 웹페이지를 그리는 방법에 대해 알아보자. 브라우저가 하나의 화면을 그려내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부른다. 이를 수행하는 주체는 렌더링 엔진이다. 렌더링 엔진은 요청받은 내용을 브라우저 화면에 나태내는 일을 담당하는데, HTML, CSS, JavaScript등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀단위로 나타낸다. 브라우저마다 사용하는 렌더링 엔진이 다르고 이 때문에 같은 소스가 브라우저마다 다르게 그려지는 크로스 브라우징이슈가 발생한게 된다. (크로스 브라우징이슈는 자바스크립트 엔진이 달라 발생하기도 한다.) 다시 렌더링 과정으로 돌아와서 위의 그림을 요약하자면 아래와 같은..
GraphQL이란 API에 대한 쿼리 언어이며 기존 데이터로 이러한 쿼리를 수행하기 위한 런타임이다. 크게 아래와 같은 특징들이 있다. 1. 필요한 것을 구체적으로 요청. GraphQL 쿼리를 API로 전송하여 필요한 것을 얻을 수 있는데, 이때 GraphQL 쿼리는 항상 예측 가능한 결과를 반환한다. GraphQL을 사용하는 앱은 서버가 아닌 앱이 반환 받을 데이터를 제어하기 때문에 빠르고 안정적이다. 2. 단일 요청으로 많은 데이터 확보 GraphQL 쿼리는 한 리소스의 속성뿐만 아니라 리소스 간의 참조를 원활하게 접근할 수 있다. 일반적인 REST API는 여러 URL 로딩이 필요한 반면, GraphQL API는 앱이 필요로 하는 모든 데이터를 하나의 요청으로 가져오기 때문에 GraphQL을 사용하..
프로젝트에서 사용하는 웹폰트 용량이 커서 화면 렌더링 속도가 지연되는 경우가 있다. 이를 최적화 하는 방법을 알아보자. 웹폰트란? 온라인상의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트로 방문자의 로컬 컴퓨터에 폰트 설치여부와는 관련 없이 동작한다. 웹 폰트는 font-family 속성을 사용하고, @font-face를 통해 웹 브라우저에게 해당 서체를 다운로드할 것임을 알리면서 사용할 수 있다. - font-family 사용할 웹 폰트의 이름을 지정한다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없지만 비슷하게 설정하는 것이 유지보수에 좋다. - src 폰트 파일의 경로와 폰트의 형식을 지정한다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의..
SVG(Scalable Vector Graphics) 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어. 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL (en-US) 등 다른 웹 표준과도 잘 동작하도록 설계되어있고 HTML과 텍스트의 관계를 그래픽에 적용한 것. JPEG와PNG등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서 쉽게 처리할 수 있다. SVG: Scalable Vector Graphics | MDN SVG(Scalable Vector Graph..
PWA란 무엇인가? PWA(Progressive Web Apps)는 웹과 네이티브 앱 기능 모두의 이점을 갖도록 개발된 웹앱이다. 웹은 접근이 쉽고, 링크로 공유하는것이 용이하다. 네이티브 앱은 좀더 부드러운 사용자 경험(브라우저를 사용하지 않고 아이콘을 눌러 이동)을 제공할 수 있고, 설치가능하여 오프라인에서 동작이 가능하다. PWA로 구현된 웹앱인지 아닌지 어떻게 판단하나? 바로 알기는 쉽지않다. 앱이 "오프라인에서 동작, 설치가능, 쉬운동기화. 푸시알람" 등의 기능이 구현되어 있는 경우 PWA라고 볼 수 있다. Discoverability 웹 앱이 검색 엔진에서 더 잘 표현되고 노출, 분류 및 순위를 매기기 쉬우며 브라우저에서 사용할 수 있는 메타데이터를 갖추어 특별한 기능을 제공하는 것 Insta..
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 ..
