프론트엔드
-
웹 브라우저에서 스크립트 및 리소스 로딩 최적화프론트엔드 2025. 3. 21. 13:32
1. async와 defer (스크립트 로딩 최적화)주로 defer동작 방식:HTML 파싱과 병렬적으로 스크립트를 다운로드합니다.스크립트 실행은 HTML 파싱이 완료된 후(DOMContentLoaded 이벤트 전)에 순차적으로 진행됩니다.여러 defer 스크립트는 HTML에 작성된 순서대로 실행됩니다.사용 사례:DOM에 의존하거나 다른 스크립트와 순서가 중요한 경우.예시: async vs defer 비교특성asyncdefer실행 시점다운로드 완료 즉시 실행HTML 파싱 후 실행실행 순서보장되지 않음HTML 작성 순서 보장DOM 의존성DOM 미완성 시 오류 가능DOM 완성 후 실행 안전2. preload와 prefetch (리소스 미리 가져오기)리소스(이미지, 폰트, 스크립트 등)를 미리 다운로드하여 성능..
-
[1원의 팁] CSS에서 Base64 인코딩은 피하라프론트엔드 2024. 1. 7. 19:42
일반적으로 Base64 인코딩된 이미지를 CSS에 넣는 것은 성능 측면에서 권장되지 않습니다. 이로 인해 스타일 시트의 크기가 증가하고, 페이지 로딩이 느려질 수 있습니다. 폰트 아이콘이나 HTML에 직접 내장된 SVG와 같은 대안은 더 나은 최적화와 사용자 경험을 제공할 수 있습니다. 이러한 방법들은 브라우저에게 필요한 리소스를 효율적으로 처리하고, 필요한 경우에만 로드하여 초기 로딩 성능을 향상시킬 수 있습니다. 1. 폰트 아이콘 사용 폰트 아이콘 라이브러리 중 하나인 Font Awesome를 사용하는 예시입니다. 이 라이브러리는 아이콘을 폰트로 제공하므로, 하나의 요청으로 여러 아이콘을 사용할 수 있습니다. 2. HTML에 직접 내장된 SVG 사용 SVG 이미지를 직접 HTML에 내장하여 사용하는 ..
-
<script> 속성의 defer 와 async프론트엔드 2024. 1. 7. 18:32
defer와 async 속성은 둘 다 스크립트를 비동기적으로 다운로드하게끔 하는 속성들이지만, 몇 가지 중요한 차이점이 있습니다. 실행 시점: defer: 문서의 파싱이 완료된 후, DOMContentLoaded 이벤트가 발생하기 직전에 스크립트가 실행됩니다. async: 스크립트가 다운로드되면 즉시 실행됩니다. 다만, 문서의 파싱을 차단하지 않으므로 스크립트의 실행이 완료되지 않아도 페이지의 로딩은 계속됩니다. 문서 파싱 차단 여부: defer: 스크립트의 다운로드가 비동기적으로 이루어지지만, 실행이 차단됩니다. 따라서 파싱은 중단되지 않지만 스크립트의 실행이 완료될 때까지 기다립니다. async: 스크립트의 다운로드와 실행이 모두 비동기적으로 이루어지므로, 다운로드가 진행되는 동안에도 문서의 파싱은 ..