Web8 브라우저 캐싱(HTTP 캐싱, 웹 캐싱) 1. 캐시란? 캐시(cache, 문화어: 캐쉬, 고속완충기, 고속완충기억기)는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있다. 2. 브라우저 캐싱이란? 브라우저 캐시는 웹 캐시의 일종이다. 웹 캐시(영어: web cache) 또는 HTTP 캐시(HTTP cache)는 서버 지연을 줄이기 위해 웹 페이지, 이미지, 기타 유형의 웹 멀티미디어 등의 웹 문서들을 임시 저장하기 위한 정보기술이다. 웹 캐시 시스템은 이를 통과하는 문서들의 사본을 저.. 2021. 6. 4. 브라우저 렌더링의 Reflow와 Repaint, 그리고 렌더링 최적화 렌더링 최적화 Reflow, Repaint 줄이기 브라우저 렌더링에서 웹 성능 최적화를 어떻게 할 수 있을까요? 이를 알려면 Reflow와 Repaint에 대해 먼저 짚고 넘어가야 합니다. Reflow (Layout) 렌더링 과정을 거친 뒤에 최종적으로 페이지가 그려진다고 해서 렌더링 과정이 다 끝난것이 아닙니다. 어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout 과정을 다시 수행하게 됩니다. 이렇게 되면 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 됩니다. 이러한 과정을 Reflow라고 합니다. // reflow 발생 예제 function reflow() { document.getE.. 2021. 6. 3. 렌더링과 Virtual DOM 1. 렌더링 과정 1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성 가장 첫번째 단계는 서버로부터 받은 HTML, CSS를 다운로드 받습니다. 그리고 HTML, CSS파일은 단순한 텍스트이므로 연산과 관리가 유리하도록 Object Model로 만들게 됩니다. HTML CSS 파일은 각각 DOM Tree와 CSSOM으로 만들어집니다. DOM(좌) CSSOM(우)을 시각화 한 그림 - 출처 : http://bit.ly/3137pmh 각 문서(HTML, CSS)가 어떻게 파싱되고 어떻게 DOM Tree가 되는지 자세한 과정은 Google 개발자 문서를 통해 확인할 수 있습니다. 여기서 좀더 TMI를 추가하자면 렌더링 엔진은 더 나은 사용자경험을 위해 가능한.. 2021. 6. 2. 웹소켓(Web socket)이란? 1. 웹소켓이란? 웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다. Transport protocol의 일종, 웹 버전의 TCP 또는 Socket 서버와 클라이언트 간에 Socket Connection을 유지해서 언제든 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술 Real-time web application구현을 위해 널리 사용되어지고 있다. (SNS어플리케이션, LoL같은 멀티플레이어 게임, 구글 Doc, 증권거래, 화상채팅 등) HTTP와 마찬가지로 OSI 제7계층에 속하며, 제4계층 TCP에 의존한다. 2. 사용하는 이유? 웹 어플리케이션에서 기존의 서버와 클라이언트 간의 통신은 대부분 HTTP를 통해 이루어 졌으며 HTTP는 Req.. 2021. 6. 2. AJAX란? 1.AJAX JavaScript의 라이브러리 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml) 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술 Json이나 xml형태로 필요한 데이터만 받아 갱신 2. AJAX의 장단점 Ajax의 장점 1. 웹페이지의 속도향상 2. 서버의 처리가 완료 될 때까지 기다리지 않고 처리 가능하다. 3. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다. 4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Fl.. 2021. 6. 1. 주소 창에 google.com을 검색하면? (브라우저가 웹 페이지를 표시하는 일련의 과정) What happens when you type a URL in the browser and press enter?(브라우저에 google.com을 쳤을 때 일어나는 일) 1. www.google.com을 브라우저 주소창에 친다 2. URL 해석 문법에 맞지 않다면, 기본 검색엔진으로 검색한다. 주소창에 검색어를 입력했을 때 구글, 네이버 등으로 리다이렉트 되어지는 것이다. 문법에 맞다면, URL의 호스트 부분을 인코딩한다. HSTS(HTTP Strict Transport Security) 목록을 확인하고 있으면 HTTPS로 없으면 HTTP로 요청한다. URL 형태 protocol: [//[user:password@]host[:port]][/]path[?query][#fragment] 이 중 host 부.. 2021. 6. 1. 이전 1 2 다음
