[매일메일] 웹 어플리케이션의 성능을 최적화 하는 방법? (FE.250107/250102)

• 코드 스플리팅: 자바스크립트 번들을 여러 개로 분리해서 필요한 시점에 필요한 코드만 로드함
  
  • 대규모 SPA에서 유리함. 초기 로딩 시간을 단축시켜 줌.
  • Webpack, Vite, Parcel 같은 모듈 번들러에서 코드 스플리팅을 지원
  • Dynamic Import: import()를 사용해 특정 페이지나 기능이 필요하면 해당 모듈을 로드함
  • Route-based Splitting: React Router의 lazy와 Suspense를 활용해 라우트 단위로 코드 분리
• 레이지 로딩: 무거운 리소스(이미지, 비디오)를 사용자가 실제로 볼 때만 로드
  
  • 현재 화면에 보이는 만큼만 불러오고, 스크롤 이벤트가 발생하면 추가적으로 로딩.
  • <img loading="lazy"/> 브라우저가 이미지의 뷰포트 진입 시점에 로드함
  • React.lazy() 동적 컴포넌트 로딩
• 이미지 최적화: 파일의 물리적인 크기를 적절히 줄이거나, WebP처럼 가벼운 포맷으로 변환
  
  • CDN(Content Delivery Network): 사용자와 가까운 서버에서 이미지를 제공해 속도 높임
  • 브라우저의 srcset 속성을 사용해 화면 해상도에 따라 적절한 크기로 이미지 로드
• 캐싱: 브라우저에 캐시된 데이터를 재사용해서, 한 번 로딩된 리소스는 다시 다운로드 하지 않음
  • 브라우저 캐싱: HTTP 헤더에 Cache-Control 및 ETag 설정해 리소스를 캐싱하도록 지시
  • 서비스 워커: Progress Web App 에서 서비스 워커를 사용해 네트워크 요청을 가로채 캐싱 데이터 제공
  • CDN 캐싱: 지리적으로 가까운 서버에서 캐싱 데이터 제공해 로딩 속도 높
• 비동기 로딩(Async), 지연 로딩(Defer): 자바스크립트가 DOM을 차단하지 않도록.
  
  • 자바스크립트가 DOM을 차단한다는 건?
    • 자바스크립 파일의 로딩과 실행이 완료될 때까지 브라우저가 DOM 파싱/렌더링을 중단함
    • <script> 태그를 만나면 서버에서 js 파일을 다운로드/실행하고, 그 이후에 HTML을 파싱하고 DOM을 생성
  • 페이지가 로딩되는 동안 자바스크립트 파일을 병렬로 불러오거나, 적절한 타이밍에 로드함.
  • async
    
    • 스크립트를 비동기적으로 다운로드
    • 다운로드가 완료되면 즉시 실행
    • HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단
    • 여러 async 스크립트가 있으면 다운로드가 완료되는 순서대로 실행
  • defer
    
    • 스크립트를 비동기적으로 다운로드
    • HTML 문서 파싱이 완전히 끝난 후에 실행
    • DOMContentLoaded 이벤트 발생 직전에 실행
    • 여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행
  • 실행 순서가 중요한 스크립트나 메인 애플리케이션의 로직을 담고 있는 스크립트는 defer
  • 독립적으로 실행되는 스크립트(Google Analytics 같은 분석 도구)는 async

 

---

출처

1. 매일메일. 250107 웹 애플리케이션의 성능을 최적화할 수 있는 방법들에 대해서 아는대로 설명해주세요. 40번

https://maeil-mail.kr

2. gpt에게 웹 애플리케이션 성능 최적화에 대해 묻다

3, 매일메일. 250102. script 태그에서 async와 defer의 차이점에 대해서 설명해주세요. 37번.

https://maeil-mail.kr