주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

Bfcache (Back-Forward Cache)브라우저 페이지 이동 시 페이지의 상태를 완전히 캐싱해 사용자가 할때, 빠르게 로드할 수 있도록 하는 매커니즘Bfcache는 페이지를 새로 로드하지 않고 캐시에서 복원하기 때문에 더 빠른 페이지를 탐색하게 하기 때문에 사용자 경험에 중요하다. 주요 특징1. 전체 페이지 상태 저장DOM 상태, Javascript 메모리(힙 메모리 영역까지 포함), 스크롤 위치 등을 완전한 상태로 저장 (페이지를 메모리에 보관, = 스냅샷 보관)새로 데이터를 요청하거나 렌더링하지 않고 (Javascript 재실행하지 않음) 이전 페이지의 상태를 그대로 복원네트워크 요청이 감소되어 서버 부담이 줄어듬Task Queue에서 Timer나 Promise도 일시 정지되었다가, 복원..

사용자 동작을 나열하며 간략히 공부해보자. >>> 사용자 동작 시작 1. https://okayoon.tistory.com/ 를 검색한다. 2. DNS(Domain Name System)에서 주소를 검색, 해당 ip 주소를 찾아서 사용자가 입력한 URL과 함께 전달한다. - 이때 캐싱된 DNS 기록이 있는지 먼저 확인한다. 3. 전달받은 ip 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트의 리소스를 요청하고 해상 웹 서버는 리소스를 전달한다. >>>> 전달받은 리소스를 통해 브라우저 렌더링 과정 시작 4. DOM Tree 구축을 위해 HTML을 파싱한다. - DOM Tree는 문서 객체 모델로 모든 요소, 속성, 텍스트 등 (문서노드, 요소노드, 속성노드, 텍스트노드)을 트리 구조로 표현한 ..

브라우저 구조에 대해 간략히 공부해보자. 1. User Interface (사용자 인터페이스) 사용자가 접근할 수 있는 모든 영역을 말한다. 즉, 페이지를 보여주는 창(사이트)을 제외한 나머지 모든 부분을 말한다. ex: 주소표시줄, 이전이나 다음 혹은 새로고침 버튼등. 2. Browser Engine (브라우저 엔진) User Interface와 Rendering Engine 두 사이의 동작을 제어한다. (연결 부분이 된다.) 자료 저장소(Data Storage)를 참조하고 있어서 로컬에 데이터 저장 및 읽기 등의 작업을 할 수 있다. 3. Rendering Engine (렌더링 엔진) 웹 서버로 부터 받은 자원을 브라우저 상에 표시하기 위한 작업을 한다. 즉, *HTML과 CSS을 파싱하는 동작을 한..

Javascript DOM(Document Object Model)과 BOM(Browser Object Model) 일단 DOM(Document Object Model)과 BOM(Browser Object Model)을 알기 전에 Window 객체를 알아야합니다. Window Object 모든 브라우저로부터 지원을 받으며 브라우저 전체를 담당하는 객체이자 최상위 객체입니다. Window 객체에는 DOM, BOM 그리고 Javascript Core가 있습니다. 문서 객체 모델(DOM, Document Object Model) 객체 지향의 모델로서 구조화된 문서를 표현하는 방식입니다. 프로그래밍언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 동적으로 문서의 내용, 구조, 스타일을 변경할 수 있습니다. ..