웹폰트 최적화 방법
[React] 리액트 웹폰트 적용 방법과 최적화 방법 (feat. 2022년)
[React] 리액트 웹폰트 적용 방법과 최적화 방법 (feat. 2022년)
2022.02.25🎯 리액트 웹폰트 적용 방법과 최적화 방법 윈도우와 맥에서 동일한 폰트를 보여주기 위해 웹폰트를 적용하기로 결정했다. 웹폰트는 용량이 커서 다운로드 시간만큼 로딩 속도가 느려진다. 따라서 최적화 작업을 해주는 것을 권장한다. 📝 웹 폰트를 다운로드해 웹 페이지를 렌더링 하는 과정 브라우저는 HTML 문서를 요청 브라우저는 HTML 응답을 구문 분석하고 DOM을 구성하기 시작 브라우저는 CSS, JS 및 기타 리소스를 검색하고 요청을 발송 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 구성하고 이를 DOM 트리와 결합하여 렌더링 트리를 구성 페이지에서 지정된 텍스트를 렌더링 하는데 필요한 글꼴 변형을 렌더링 트리가 표시한 후 글꼴 요청이 전달 브라우저는 레이아웃을 수행하고 콘텐츠를 화면에 그린다...