대용량 CSS 파일 로드를 연기하는 방법: 동적 JavaScript 로드를 사용해야 합니까?

대용량 CSS 파일 로드를 연기하는 방법

CSS 전달 최적화의 일환으로 대용량 CSS 파일의 로드를 연기할 수 있습니다. 페이지가 로드될 때까지. 이는 다음 접근 방식을 사용하여 달성할 수 있습니다.

JavaScript를 사용하여 CSS 파일을 동적으로 로드

한 가지 옵션은 JavaScript를 사용하여 페이지 다음에 CSS 파일을 동적으로 로드하는 것입니다. 로드되었습니다. 예를 들어 jQuery를 사용하면 다음 코드를 사용할 수 있습니다.

<code class="javascript">function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};</code>

페이지가 로드된 후 이 함수를 호출할 수 있습니다.

확인을 위해 JavaScript 비활성화

이 접근 방식이 작동하는지 확인하려면 브라우저에서 JavaScript를 비활성화하고 페이지를 다시 로드하십시오. 페이지가 로드될 때까지 CSS 파일이 로드되지 않는 것을 확인해야 합니다.

비 JavaScript 접근 방식에 대한 참고 사항

순수한 JavaScript 접근 방식을 선호하거나 다른 JavaScript 프레임워크에 대해 아래에서 의견을 보내주시면 추가 솔루션을 제공할 수 있습니다.

특정 사용 사례에 맞는 최적의 솔루션을 찾으려면 항상 다양한 접근 방식을 실험하고 자신의 환경에서 테스트하는 것이 좋습니다.

위 내용은 대용량 CSS 파일 로드를 연기하는 방법: 동적 JavaScript 로드를 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!