프런트엔드 성능 최적화에 대한 심층적인 이해: 네트워크에서 렌더링까지

1. 네트워크 최적화

HTTP 요청 줄이기

• 리소스 병합: CSS와 JavaScript 파일을 병합하여 요청 수를 줄입니다.

• 인라인 리소스: 소규모 CSS 및 JavaScript의 경우 HTML에 직접 인라인하세요.

HTTP/2 사용

• HTTP/2는 멀티플렉싱을 지원하고 요청 차단을 줄이며 로딩 속도를 높입니다.

GZIP 압축 활성화

서버측 구성, 텍스트 리소스 압축, 전송량 감소

캐시 전략

Cache-Control과 같은 HTTP 캐시 헤더를 사용하여 적절한 캐시 전략을 설정하세요.

2. 리소스 로딩 최적화

지연 로딩

이미지, 비디오 등에 적합한 리소스가 뷰포트에 들어가려고 할 때만 로드하세요.

<img  src="placeholder.jpg" data-src="real-image.jpg" alt="프런트엔드 성능 최적화에 대한 심층적인 이해: 네트워크에서 렌더링까지" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

강제 동기 레이아웃 방지

• 복잡한 JavaScript 애니메이션 대신 requestAnimationFrame 또는 CSS 애니메이션을 사용하여 리플로우와 다시 그리기를 줄입니다.

이미지 최적화

• 올바른 이미지 형식(예: WebP)을 선택하고 올바른 크기와 해상도를 사용하세요.

4. 서비스워커와 오프라인 저장공간

• 서비스 워커를 사용하여 오프라인 캐싱 및 리소스 업데이트를 구현합니다.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(error => console.error('SW registration failed:', error));
    });
}

5. 성능 모니터링 및 분석

• 성능 테스트 및 분석을 위해 Lighthouse, WebPageTest 또는 Chrome DevTools와 같은 도구를 사용하세요.

6. 코드 분할 및 지연 로딩

동적 가져오기

동적 가져오기(import() 표현식)를 사용하여 요청 시 코드 블록을 로드하고 초기 로드 시간을 줄입니다.

button.onclick = async () => {
    const module = await import('./lazyModule.js');
    module.default();
};

경로 수준 코드 분할

SPA 애플리케이션에서는 Vue Router의 지연 로딩과 같이 프레임워크에서 제공하는 경로 수준 코드 분할 기능을 사용하세요.

// Vue Router example
const Foo = () => import('./Foo.vue');

const routes = [
{ path: '/foo', component: Foo },
];

7. 이미지 최적화

반응형 이미지

요소 또는 srcset 속성을 사용하여 기기 픽셀 비율이나 뷰포트 크기에 따라 다양한 해상도의 이미지를 제공합니다.

<picture>
<source srcset="img/low-res.jpg" media="(max-width: 600px)">
<source srcset="img/high-res.jpg" media="(min-width: 600px)">
<img src="img/fallback.jpg" alt="프런트엔드 성능 최적화에 대한 심층적인 이해: 네트워크에서 렌더링까지">
</source></source></picture>

8. 웹 작업자

시간이 많이 걸리는 컴퓨팅 작업을 Web Worker로 옮겨 메인 스레드를 차단하지 않고 UI의 응답성을 유지하세요.

// main.js
const worker = new Worker('worker.js');
worker.postMessage([1024, 512]);

// worker.js
self.onmessage = function(e) {
    const result = e.data[0] * e.data[1];
    self.postMessage(result);
};

9. 메모리 누수 방지

사용하지 않는 타이머, 이벤트 리스너, 대규모 데이터 구조를 정기적으로 정리하여 메모리 누수를 방지하세요.

<img  src="placeholder.jpg" data-src="real-image.jpg" alt="프런트엔드 성능 최적화에 대한 심층적인 이해: 네트워크에서 렌더링까지" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

10. 웹 바이탈 모니터링

사용자 경험을 측정하기 위한 핵심 지표인 LCP(최대 콘텐츠 페인트), FID(첫 번째 입력 지연), CLS(누적 레이아웃 이동)와 같은 웹 바이탈 측정항목에 중점을 둡니다.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(error => console.error('SW registration failed:', error));
    });
}

위 내용은 프런트엔드 성능 최적화에 대한 심층적인 이해: 네트워크에서 렌더링까지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!