study/Web (3) 썸네일형 리스트형 Web - 웹 폰트(Web Font) 최적화 1. 웹 폰트란 무었인가? 2. 웹 폰트의 장, 단점 3. 웹 폰트 확장자 4. 웹 폰트 최적화 방법(폰트 파일사이즈 줄이기, 서브셋 폰트 사용) 웹 성능 최적화 관련 공부를 하다가 네트워크 탭을 보아았는데 폰트 파일의 크기가 무려 3.8MB였다...... OTF 확장자의 폰트를 사용했기 때문이다. 분명 웹페이지 로딩 속도에 상당히 영향을 주었을것이다. 오늘은 이 무지막지한 폰트파일의 사이즈때문에 충격을 먹어 폰트 최적화에 대해 공부하려고 한다. 1. 웹 폰트란 무었인가? 웹 폰트란 웹사이트 방문자의 컴퓨터에 폰트 설치 여부와 상관없이 웹사이트의 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 역할을 한다. 2. 웹 폰트의 장, 단점 장점 웹 폰트를 사용하면 사용자의 컴퓨터에 해당 폰트가 없어도.. Web - 쿠키, 세션 스토리지, 로컬 스토리지 Htttp 프로토콜의 한계를 보안하기 위해 쿠키 또는 웹 스토리지를 이용한다. 비연결성지향(connectionless) Http는 클라이언트가 서버로 요청을 보내면, 서버는 클라이언트에게 그에 맞는 응답을 보내고 Tcp/Ip 연결을 끊는 특성이다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 1. 쿠키(Cookie) 브라우저에 저장되는 키-벨류 형식으로 정보를 저장한다. 4KB의 용량 제한을 가지고 있다. 보안에 취약하기 때문에 중요한 정보를 노출해서는 안된다. 브라우저에 300개까지 쿠키를 저장할 수 있으며, 한 도메인당 20개의 쿠키를 가질 수 있다. Request Header에 자동으로 실려 서버에 전송된다. 쿠키의 종류 영구 .. Web - 브라우저 랜더링 과정 브라우저 랜더링 과정 1. 사용자의 접근 사용자가 브라우저를 통해 웹 사이트에 접속하면, Dns에 연결된 서버로부터 HTML, CSS, font, image 등 웹 사이트에 필요한 리소스를 다운로드 받습니다. 2. Html 파일과 Css 파일 파싱 (Parsing) Html과 Css 파일일을 파싱 하여 DOM(Document Object Model) Tree와 CSSOM(Css Object Model) Tree를 만든다. * 파싱 중 Js Script Tag를 만나면 브라우저는 파싱 작업을 일시 중지하고 Js 엔진에 제어권을 넘긴다. Js 코드를 로드, 파싱, 실행한다고 한다. 왜냐하면 DOM을 변경하는 행위가 있을 수 있기 때문이다. 이것이 HTML 파서가 HTML 문서를 다시 파싱 하기 전에 자바스크.. 이전 1 다음
