defer 속성을 사용하여 외부 라이브러리 최적화: 페이지 속도 향상

개발자는 웹사이트를 구축할 때 기능 향상을 위해 외부 라이브러리에 의존하는 경우가 많습니다. 이러한 라이브러리는 필수적이지만 각 외부 스크립트에는 추가 HTTP 요청이 필요하고 구문 분석, 평가 및 실행으로 인해 페이지의 기본 콘텐츠 렌더링이 차단될 수 있으므로 성능에 영향을 미칠 수 있습니다. 이러한 스크립트가 렌더링 프로세스를 차단하는 것을 방지하기 위해 개발자는 외부 스크립트를 연결할 때 async 또는 defer 속성을 사용할 수 있습니다.

연기의 역할
defer 속성은 HTML 구문 분석이 완료될 때까지 스크립트가 실행되지 않도록 합니다. 이는 페이지의 초기 렌더링 속도를 높이는 데 도움이 됩니다. 그러나 지연된 외부 라이브러리를 사용할 때 특정 기능(예: 초기화 슬라이더, 캐러셀 또는 애니메이션)이 예상대로 실행되지 않는 경우가 발생할 수 있습니다. 이는 연기된 스크립트 내부의 코드가 HTML이 완전히 구문 분석된 후에만 실행되기 때문에 발생하지만 때로는 필요한 외부 라이브러리를 제때 사용하지 못할 수도 있습니다.

DOMContentLoaded 및 이벤트 로드 이해
외부 라이브러리에 의존하는 사용자 정의 코드가 올바르게 실행되도록 하려면 코드가 실행되는 타이밍을 주의 깊게 관리해야 합니다. 두 가지 JavaScript 이벤트는 지연된 스크립트를 처리할 때 특히 유용합니다

DOMContentLoaded: 이 이벤트는 스타일시트, 이미지 또는 기타 외부 리소스가 로드될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되면 시작됩니다. 코드가 준비된 DOM 구조에만 의존하는 경우 유용합니다.

document.addEventListener('DOMContentLoaded', function() { 
// Initialize your script once the DOM is fully parsed 

console.log("DOM is ready, but external resources might still be loading."); 
});

load: 로드 이벤트는 스타일시트, 이미지, 외부 스크립트 등 모든 종속 리소스를 포함한 전체 페이지가 완전히 로드되면 실행됩니다. 이 이벤트는 코드를 실행하기 전에 필요한 모든 외부 리소스를 사용할 수 있는지 확인합니다.

window.addEventListener('load', function() { 
// Execute code when the entire page and resources are loaded 

console.log("All resources including external scripts are fully loaded."); 
});

<script defer src="https://example.com"></script>
<script defer src="https://example2.com"></script>
<script>
    // Wait for the entire page, including scripts, to load
    window.addEventListener('load', function() {
        // Initialize example2 library with predefined configuration after all resources are fully loaded
        example2(somePredefinedConfig).functionCall();
    });
</script>

위 내용은 defer 속성을 사용하여 외부 라이브러리 최적화: 페이지 속도 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!