더 빠른 웹 페이지를 위한 JavaScript 개념을 알아야 합니다.

요즘 우리 대부분은 React나 기타 고급 TypeScript 코드를 작성하지만 F12 콘솔과 브라우저의 JavaScript 런타임이라는 어두운 영역을 탐험해야 할 때가 있습니다.

이 기사에서는 훨씬 더 빠른 페이지를 구축하는 데 도움이 될 수 있고 이해해야 할 몇 가지 주요 개념을 다룰 것입니다.

1) ? 이벤트 루프

JavaScript는 단일 스레드이므로 언어 ​​자체는 한 번에 하나의 작업만 수행할 수 있습니다. 이러한 제한을 해결하기 위해 브라우저는 "이벤트 루프" 메커니즘을 제공합니다.

예를 들어 "setInterval" 함수를 사용하면 브라우저는 백그라운드에서 타이머를 유지하고 간격이 만료되면 콜백 함수가 이벤트 루프로 푸시됩니다.

그동안 비동기 브라우저 API를 사용하지 않는 JavaScript 코드는 위에서 아래로 차례로 실행됩니다. 메인 스레드가 어떤 작업도 수행하지 않으면 브라우저는 이벤트 루프에서 작업을 가져와서 실행합니다.

2)? 백그라운드 작업자

실행하는 데 오랜 시간이 걸리는 집중적인 작업(예: 500ms)을 처리하는 경우 UI가 느려지므로 메인 스레드에서 이 작업을 실행하지 않는 것이 좋습니다.

여기서 웹 작업자가 유용합니다. 웹 작업자는 기본 브라우저 스레드와 별도의 스레드에서 실행되므로 여기에서 실행되는 작업은 페이지 로드 속도에 영향을 미치지 않습니다.

좋은 사용 사례는 예를 들어 구문 분석하고 계산할 수천 개의 레코드가 포함된 복잡한 차트에 대한 시계열 데이터가 있는 경우입니다. 로더를 표시하고 웹 작업자에서 차트 계산을 수행한 다음 DOM이 준비되면 업데이트할 수 있습니다.

3) ⏸️ 중요하지 않은 경우 지연

JavaScript는 단일 스레드이므로 메인 스레드를 확보하려면 최대한 지연해야 합니다. 따라서 시작하기 가장 좋은 곳은 지연될 수 있는 느린 코드를 식별하는 데 도움이 되는 필수 SEO 지표인 핵심 웹 바이탈입니다.

그런 다음 스크롤, 로드, DOMContentLoaded 등과 같은 이벤트 리스너를 사용하여 코드 실행을 지연시킬 수 있습니다.

일반적으로 이는 페이지 추적을 지연하고, 스크롤 가능한 부분 아래에 위젯을 로드하고, 그래프를 로드하고, 기본 폴더 아래에 있는 다른 API 호출을 수행하는 데 사용됩니다.

예:

document.addEventListener('DOMContentLoaded',function() {
 // Slow code here.
});

ℹ️ DOMContentLoaded: 비동기 JS 스크립트를 포함하지 않고 전체 HTML 문서가 먼저 구문 분석될 때까지 기다리지만 이미지, CSS 파일, iframe 등과 같은 외부 리소스는 기다리지 않습니다. "load" 이벤트는 CSS, iframe 및 이미지를 포함한 모든 항목이 로드될 때까지 기다린다는 점을 제외하면 유사합니다.

또 다른 편리한 웹 API는 Intersection Observer입니다. 이를 통해 요소의 가시성을 기반으로 코드를 트리거할 수 있으며, 사용자가 특정 DOM 요소를 스크롤할 때 API 호출을 최소화하는 데 매우 유용합니다(무한 페이지 매김을 생각해 보세요).

4) ?️ 오프스크린캔버스

웹 작업자와 마찬가지로 "OffscreenCanvas"라는 브라우저 API를 사용하여 집약적인 캔버스 관련 작업을 자체 스레드에 백그라운드 작업으로 푸시할 수 있습니다.

실시간 시각화, 이미지 조작, 게임, 영상 편집 등에 유용합니다...

5) ⏳ 브라우저가 사용 중이지 않을 때 작업 실행

"requestIdleCallback"으로 실행되는 작업의 우선순위가 매우 낮으므로 브라우저가 유휴 상태일 때만 실행된다는 점을 제외하면 이벤트 루프와 매우 유사합니다.

PWA에서 오프라인 액세스를 위한 로깅 및 캐싱과 같은 중요하지 않은 작업을 실행하는 데 적합합니다.

? MDN 웹 문서 [보너스 - 유용한 리소스]

https://developer.mozilla.org/en-US/
이를 위해 Claude나 LLM을 사용하실 수도 있겠지만 AI 환각은 문제가 되고 때로는 잘못된 정보를 제공할 수도 있으므로 신뢰할 수 있는 탄탄한 서면 참조 가이드를 갖는 것이 항상 좋습니다.

MDN은 오픈 소스이며 Mozilla에서 관리하며 다양한 JavaScript, CSS 및 HTML 브라우저 API를 학습할 수 있는 최고의 웹 리소스입니다. 저는 경력 전반에 걸쳐 이 방법을 자주 사용했으며 오늘날에도 여전히 사용하고 있습니다.

PS: 더 자세한 웹 개발, AI, Linux 튜토리얼 및 가이드를 보려면 KevinCoder에서 제 블로그를 확인하세요

위 내용은 더 빠른 웹 페이지를 위한 JavaScript 개념을 알아야 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!