WordPress가 페이지 렌더링 속도를 높이기 위해 JavaScript를 지연 로드하도록 하는 방법은 무엇입니까?

워드프레스(WordPress)페이지 렌더링 방법의 속도를 높이기 위해 JavaScript를 느리게 로드합니다.

JavaScript의 Defer 속성은 무엇입니까?

누구나 다음과 같은 상황에 직면했을 것입니다.

헤드에는 N개의 스크립트가 있으며 스크립트가 로드되면 일반적으로 비어 있는 페이지 렌더링을 차단합니다.

물론 소스 코드의 스크립트를 바닥글에 넣으면 이 문제를 해결할 수 있습니다.

그러나 일부 복잡한 개발 환경은 이 간단한 작업을 특히 복잡하게 만들 수 있습니다.

이 시점에서 우리는 JavaScript에서 비교적 드문 속성인 Defer 속성을 사용할 수 있습니다.

당신은 그것을 사용하지 않을 수도 있지만, 이 소개를 읽은 후에, 나는 당신이 그것을 떠나지 않을 것이라고 확신합니다.

주요 기능은 로드 시 구문 분석하는 대신 전체 페이지가 로드된 후 스크립트를 구문 분석하도록 하여 이벤트 트리거 JavaScript만 포함하는 스크립트에 대해 전체 페이지 로드 속도를 제공합니다.

네, 스크립트 태그에 defer 속성이 있으면 HTML 페이지를 head에 넣어도 파싱 후 실행되는데, 이는 스크립트를 페이지 하단에 넣는 것과 유사합니다.

물론 지연 사용도 제한적이므로 일반적으로 다음 2가지 사항에 주의하십시오.

1) 지연 유형 스크립트 블록에서 document.write 명령을 호출하지 마십시오.

• document.write가 직접 출력 효과를 생성하기 때문입니다.

2) 즉시 실행 스크립트를 포함하여 Defer 스크립트에서 전역 변수나 함수를 사용하지 마십시오.

WordPress에서 사용되는 스크립트에 Defer 속성 추가

WordPress에서 WordPress에서 사용하는 스크립트에 Defer 속성을 어떻게 자동으로 추가할 수 있습니까?

현재 테마의 functions.php 파일에 다음 코드를 추가할 수 있습니다 ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• 위의 코드는 다음과 같이 작동합니다.WordPress에서 도입한 JavaScript 코드효과적일 것입니다.

注意 事项

실시간 미리보기 관리가 공백으로 표시될 수 있습니다.

위의 코드를 사용할 경우 실시간 미리보기 관리(외모 → 사용자 지정)를 열면 공백으로 표시될 수 있으므로 적절하게 사용하시기 바랍니다.

실시간 미리보기 관리가 필요한 경우 위의 코드를 주석처리 하고, 커스터마이징 완료 후 주석 처리된 코드를 삭제합니다.

PHP 주석 코드 예:

/*

这里是代码 

*/