페이지가 로드된 후 큰 CSS 파일을 어떻게 로드할 수 있습니까?

CSS 전달 최적화: 지연된 CSS 로딩 기술 이해

웹사이트 성능을 개선하기 위해 개발자는 CSS 전달을 최적화하는 경우가 많습니다. Google 개발자 문서에 언급된 전략 중 하나는 페이지가 로드될 때까지 원본 CSS 파일 로드를 연기하는 동안 섹션을 참조하세요. 이 접근 방식은 초기에 필수 스타일 표시를 우선시하여 렌더링을 최적화합니다.

그러나 이로 인해 페이지가 로드된 후 대용량 CSS 파일을 어떻게 로드할 수 있는지에 대한 의문이 남습니다.

해결책: 큰 CSS 파일 로드 연기

큰 CSS 파일 로드를 연기하려면 간단한 jQuery 코드 조각을 활용할 수 있습니다.

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

이를 호출하여 $(document).ready() 또는 window.onload 함수 내에서 함수를 사용하면 페이지 로드가 완료된 후 CSS 파일을 동적으로 로드할 수 있습니다.

메서드 확인

이 방법이 작동하는지 확인하려면 브라우저에서 JavaScript를 비활성화한 다음 페이지를 다시 로드해 보십시오. 스타일시트가 적용된 상태에서 페이지가 여전히 올바르게 로드되면 CSS 로드가 성공적으로 지연된 것입니다.

대체 방법

CSS 로드를 연기하는 대체 방법이 있습니다.

위 내용은 페이지가 로드된 후 큰 CSS 파일을 어떻게 로드할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!