지연 로딩 자바스크립트

JavaScript를 지연 로드하는 방법

JavaScript의 진정한 지연 로딩이란 페이지 콘텐츠가 완전히 로드된 후에만 JavaScript를 로드하거나 구문 분석하는 것을 의미합니다(즉, JavaScript는 페이지 속도나 중요도에 영향을 줄 수 없음). 길).

• "onload" 이벤트를 사용하여 외부 JavaScript 리소스 호출

• 페이지 콘텐츠가 로드되기 전에는 외부 JavaScript 리소스를 로드할 수 없습니다

• 외부 JavaScript 리소스가 실행되기 시작하고 콘텐츠가 로드된 후 페이지에 영향을 미칩니다

설명

인터넷의 초점은 종종 사람입니다. 다양한 솔루션에 대한 열광을 찾으려고 노력하면서 JavaScript 지연 로딩이 초점 중 하나입니다.

많은 사람들이 "그냥 연기를 사용하세요", "그냥 비동기를 사용하세요", "그냥 페이지 하단에 JavaScript를 넣으세요"라고 말하지만 해결되지 않습니다. 문제 - 페이지를 완전히 로드한 다음 ( 완전히 로드한 후에만) 외부 JS를 로드합니다. 또한 이러한 방법을 사용하면 Google Page Speed ​​​​도구에서 얻은 "JavaScript 로드 지연" 경고를 통과할 수 없습니다(번역자는 테스트 중에 위의 세 가지 방법으로 이 경고를 제거할 수 있다는 사실을 발견했기 때문에 이에 대해 약간의 의구심을 갖고 있습니다).

이 솔루션이 답해 드립니다.

외부 JavaScript 파일을 호출하는 스크립트

이 코드는 HTML 문서의 </body> 태그 앞에 위치합니다(HTML 문서 하단 근처). 외부 스크립트의 이름은 defer.js입니다.

<script type="text/javascript">function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild( element );}if ( window.addEventListener ) {
    window.addEventListener( "load", downloadJSAtOnload, false );} else if ( window.attachEvent ) {
    window.attachEvent( "onload", downloadJSAtOnload );} else { 
    window.onload = downloadJSAtOnload;}
</script>

이 스크립트의 기능은 무엇인가요?

문서가 완전히 로드될 때까지 기다린 후 외부 파일 "defer.js"를 로드하라는 코드입니다.

자세한 안내

• 1. 위의 코드를 복사하세요.

• 2. </body> 태그

• 3. defer.js을 외부 파일 이름으로 변경합니다.

• 4. 맞습니다. 예: "defer.js"를 사용하는 경우 "defer.js" 파일은 HTML 파일과 동일한 폴더에 있어야 합니다.

어떤 용도로 사용할 수 있나요(또는 할 수 없는 것)

이 코드는 페이지가 완전히 로드될 때까지 외부 링크 파일을 로드하지 않습니다. JavaScript를 두 그룹으로 나누어야 합니다. 하나는 페이지를 로드해야 하는 그룹이고 다른 하나는 페이지 로드 후 작업(예: 클릭 이벤트 또는 기타 작업 검색)을 수행하는 그룹입니다. 페이지가 로드될 때까지 기다릴 수 있는 JavaScript는 외부 파일에서 호출되어야 합니다.

예를 들어 이 페이지에서는 위 스크립트를 사용하여 Google 통계, Viglink 및 하단의 Google 플러스 아바타를 지연 로드했습니다. 이 파일들은 위에서 언급한 내용과 관련이 없고 로드할 필요도 없기 때문에 페이지 시작 부분에 이러한 파일을 로드할 이유가 없습니다. 페이지에 동일한 유형이 있을 수도 있습니다. 사용자에게 사용자 콘텐츠를 표시하기 전에 해당 리소스가 로드될 때까지 기다리게 하시겠습니까?

다른 방법은 어떨까요?

인라인 처리, 스크립트 하단에 넣기, defer, async 사용 등은 모두 페이지를 먼저 로드한 후 JS를 로드한다는 목적을 달성하지 못하는 방법이며 실제로 이러한 방법은 보편적이지 않습니다. 그리고 교차 기능 브라우저.

이것이 왜 중요한가요?

Google에서는 페이지 로딩 속도를 순위 요소로 사용하고, 사용자는 페이지 로딩 속도를 더 빠르게 하기를 원하기 때문입니다. 이는 모바일 SEO에도 좋습니다. Google은 페이지가 호출된 시점부터 페이지의 초기 로딩이 완료될 때까지 페이지 로딩 속도를 측정합니다. 이는 페이지의 load 이벤트를 최대한 빨리 완료해야 한다는 의미이기도 합니다. Google은 홈페이지 로드 시간을 기준으로 페이지를 평가합니다. 사용자는 페이지가 로드되기를 기다리고 있습니다.

Google의 적극적인 프로모션 및 추천스크롤 없이 볼 수 있는 콘텐츠 우선(화면 콘텐츠가 우선). 따라서 화면 밖의 리소스(js, CSS, 이미지 등)를 기본 렌더링 경로에서 제외하는 것은 노력할 가치가 있습니다. 그것이 당신의 사용자를 행복하게 하고, 구글도 행복하게 만든다면 그렇게 하지 않으시겠습니까?

사용 예

페이지를 생성한 후 여기를 클릭하면 여기에서 위의 코드 스니펫을 사용한 것을 볼 수 있습니다.

테스트 샘플 파일

글쎄, 설명을 위해 테스트할 몇 가지 테스트 페이지를 작성했습니다. 각 페이지는 동일한 작업을 수행합니다. 순수 HTML 페이지는 스크립트를 사용하여 "hello world"를 출력하기 위해 2초를 기다립니다. 이러한 페이지를 테스트하여 콘텐츠를 즉시 표시하는 방법은 단 한 가지뿐임을 확인할 수 있습니다(페이지 로드 시간에는 2초의 대기 시간이 포함되지 않음).

• 스크립트 인라인 - 보기를 클릭하세요

• 외부 스크립트를 로드하려면 "defer" 사용 - 보려면 클릭

• 위의 권장 코드 사용 - 클릭 보기

핵심

가장 중요한 점은 콘텐츠를 사용자에게 최대한 빠르게 제시하는 것입니다. 우리는 자바스크립트를 처리하는 방식으로는 그렇게 하지 않았습니다. 일부 스크립트는 시각적 콘텐츠 아래에서 작업을 수행하기 때문에 사용자는 콘텐츠를 확인해야 합니다. 페이지 하단이 아무리 멋져도 사용자가 페이지 하단으로 스크롤하지 않으면 페이지 하단을 멋지게 만들기 위해 스크립트를 로드할 이유가 없습니다.

도구

자바스크립트 사용 도구를 사용하여 페이지에서 JavaScript가 어떻게 사용되는지 테스트하세요.

---

보조 확장

1. Defer 및 async

두 속성 모두 페이지 최적화 목적으로 사용할 수 있지만 차이점은 무엇인가요? 하나의 사진으로 답할 수 있습니다:

2. Below the Fold

wordstream의 정의에 따르면:

Below the fold은 스크롤만 있음을 의미합니다. 웹페이지에만 보이는 영역.

Above the Fold은 페이지를 스크롤하지 않고도 보이는 콘텐츠 영역을 말합니다.

일반적으로 스크롤 없이 화면에 표시되는 콘텐츠는 더 많은 관심을 받고, 스크롤이 필요한 콘텐츠는 덜 주목을 받습니다. fold뉴스 출판 업계에서 이러한 견해가 나옵니다.