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 중국어 웹사이트의 기타 관련 기사를 참조하세요!