웹사이트 성능 향상을 위해 대용량 CSS 파일 로딩을 연기하는 방법은 무엇입니까?

CSS 전달 최적화: 대용량 CSS 파일 로드 연기

웹사이트 성능 최적화를 추구하는 일반적인 기술 중 하나는 대용량 CSS 파일 로딩을 연기하는 것입니다. 페이지의 초기 콘텐츠가 로드될 때까지의 CSS 파일입니다. 이 전략은 페이지 렌더링 시간을 줄이고 인지 성능을 향상시키는 데 도움이 됩니다.

jQuery를 사용한 지연 로딩

jQuery 사용에 익숙하다면 다음을 사용하여 지연 CSS 로딩을 구현할 수 있습니다. 다음 코드 조각:

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

$(document).ready() 내에서 이 함수를 호출하기만 하면 됩니다. 이벤트 핸들러를 사용하여 CSS 파일 로드를 연기합니다.

대체 방법

또는 jQuery를 사용하지 않으려는 경우 수동으로 링크 요소를 생성하여 추가할 수 있습니다. 문서 머리. 예는 다음과 같습니다.

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "large.css";
document.head.appendChild(link);

Javascript 없음

페이지 로드 후 CSS 파일을 로드하려면 HTML 코드를 수정해야 합니다. 브라우저에서 JavaScript가 비활성화된 경우 지연된 CSS 파일이 로드되지 않습니다. 따라서 중요한 CSS를 HTML 내에 인라인하거나 대체 최적화 기술을 고려하는 것이 중요합니다.

위 내용은 웹사이트 성능 향상을 위해 대용량 CSS 파일 로딩을 연기하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!