지연 로딩 JavaScript_javascript 팁 정보

JavaScript 지연 로딩은 해결책을 찾는 데 열중하게 만드는 웹상의 문제 중 하나입니다.

많은 사람들이 "그런 다음 연기를 사용하세요" 또는 "비동기화를 사용하세요"라고 말하고 일부는 "그런 다음 페이지 코드 하단에 자바스크립트 코드를 입력하세요"라고 말하기도 합니다.

위 방법 중 어느 것도 웹페이지가 완전히 로드된 후 외부 js를 로드하는 문제를 해결할 수 없습니다. 위의 방법을 사용하면 Google의 페이지 속도 테스트 도구에서 '자바스크립트 로드 지연' 경고가 표시되는 경우도 있습니다. 따라서 여기의 솔루션은 Google 도움말 페이지에서 권장되는 솔루션이 될 것입니다.

자바스크립트를 지연 로드하는 방법

다음은 구글에서 추천하는 코드입니다. 이 코드는 HTML 파일 하단 근처의 태그 앞에 배치되어야 합니다. 또한 외부 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. HTML의 태그 앞에 코드를 붙여넣습니다(HTML 파일 하단 근처).

3. "defer.js"를 외부 JS 파일 이름으로 수정합니다

4. 파일 경로가 올바른지 확인하세요. 예: "defer.js"만 입력하는 경우 "defer.js" 파일은 HTML 파일과 동일한 폴더에 있어야 합니다.

이 코드는 어디에 사용될 수 있나요? (그리고 사용할 수 없는 곳은 있나요?)

이 코드는 문서가 로드될 때까지 지정된 외부 JS 파일을 로드하지 않습니다. 따라서 일반적인 페이지 로딩에 의존하는 JavaScript 코드는 여기에 배치하면 안 됩니다. 대신 JavaScript 코드는 두 그룹으로 분리되어야 합니다. 한 그룹은 페이지에 필요하기 때문에 즉시 로드되는 자바스크립트 코드이고, 다른 그룹은 페이지가 로드된 후 작동하는(예: 클릭 이벤트 추가 등) 자바스크립트 코드입니다. 실행되기 전에 페이지가 로드될 때까지 기다려야 하는 JavaScript 코드는 외부 파일에 배치한 다음 가져와야 합니다.

예를 들어 이 페이지에서는 Google 분석, Viglink(돈 버는 방법), 하단에 표시되는 Google 배지(내 소셜 미디어) 등 지연 로딩을 위해 위 파일을 사용합니다. 나에게는 초기 단계에서 위의 관련 없는 콘텐츠를 로드할 필요가 없기 때문에 초기 페이지 로드 시 이러한 파일을 로드할 이유가 없습니다. 어쩌면 페이지에 동일한 성격의 파일이 있을 수도 있습니다. 그렇다면 사용자가 웹 페이지의 콘텐츠를 보기 전에 이러한 파일이 로드될 때까지 기다리도록 하시겠습니까?

다른 방법을 사용해 보는 것은 어떨까요?

코드를 직접 삽입하고, 스크립트를 맨 아래에 배치하고, "defer" 또는 "async"를 사용하는 것은 페이지를 먼저 로드한 다음 JS를 로드하는 목적을 달성할 수 없으며 확실히 브라우저 전체에서 일관되게 수행되지 않습니다.

왜 중요한가요?

Google이 페이지 속도를 순위 요소 중 하나로 사용하고 사용자도 페이지가 빠르게 로드되기를 원한다는 사실이 중요합니다. 모바일 검색 엔진 최적화에도 매우 중요합니다. Google은 페이지가 처음 로드되는 데 걸리는 시간을 기준으로 페이지 속도를 측정합니다. 이는 페이지의 로드 이벤트를 최대한 빨리 가져와야 함을 의미합니다. 초기 페이지 로드 시간은 Google이 웹페이지의 품질을 평가하는 방법입니다(사용자가 페이지가 로드되기를 기다리고 있다는 점을 잊지 마세요). Google은 위와 관련 없는 콘텐츠를 중요도에 따라 정렬하고 모든 리소스(js, CSS, 이미지 등)를 중요한 렌더링 경로에서 제외하는 것을 적극적으로 장려하고 권장하며 그렇게 하는 것은 그만한 가치가 있습니다. 사용자를 기쁘게 하고 Google을 기쁘게 한다면 그렇게 해야 합니다.

사용예

이 코드가 사용되는 모습을 볼 수 있는 페이지를 만들었습니다.

테스트용 샘플 파일

알겠습니다. 설명을 위해 테스트할 수 있는 몇 가지 샘플 페이지를 만들었습니다. 모든 페이지는 동일한 작업을 수행합니다. 이것은 2초 동안 기다렸다가 "hello world"를 출력하는 자바스크립트 스크립트가 포함된 일반 HTML 페이지입니다. 이러한 파일을 테스트해 보면 메서드가 하나만 있고 로드 시간에서 2초의 대기 시간이 제외된다는 것을 알 수 있습니다.

스크립트를 직접 삽입할 수 있는 페이지 – 여기를 클릭

"defer"를 사용하는 외부 스크립트가 있는 페이지 – 여기를 클릭
위 추천코드를 사용하는 페이지 – 여기를 클릭

핵심사항

가장 중요한 우선순위는 콘텐츠를 사용자에게 최대한 빨리 전달하는 것입니다. 그리고 우리는 자바스크립트 코드를 어떻게 처리할지 생각해본 적이 없습니다. 그러나 사용자가 일부 중요하지 않은 스크립트에 대한 콘텐츠를 기다리도록 강요해서는 안 됩니다. 바닥글이 아무리 멋지더라도 바닥글로 스크롤하지 않는 사용자가 바닥글을 멋지게 만드는 JavaScript 파일을 로드할 이유가 없습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.