js에서 지연 로딩을 구현하는 방법은 몇 가지입니까? js의 6가지 지연 로딩 방법 소개

이 글의 내용은 js에서 지연 로딩을 구현하는 방법의 수에 관한 것입니다. js 지연 로딩의 6가지 방법에 대한 소개는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

JS 지연 로딩. 이는 JavaScript 파일을 로드하기 전에 페이지가 로드될 때까지 기다리는 것을 의미합니다. JS 지연 로딩은 페이지 로딩 속도를 향상시키는 데 도움이 됩니다. 일반적인 방법은 다음과 같습니다.

defer 속성 async 속성 DOM 메서드의 동적 생성 jQuery의 getScript 메서드 사용 setTimeout 지연 메서드 사용 JS를 마지막으로 로드

1 defer 속성 HTML 4.01은 태그는 defer 속성을 정의합니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签定义了 defer属性。 用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

在 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。

说明：虽然 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素放在了 93f0f5c25f18dab9d176bd4f6de5d30e 元素中，但包含的脚本将延迟浏览器遇到 73a6ac4ed44ffec12cee46588e518a5e 标签后再执行。

HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。

defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。

2、async属性

HTML5 为 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签定义了 async 属性。与 defer 목적: 스크립트가 실행될 때 페이지 구조에 영향을 미치지 않음을 나타냅니다. 즉, 실행 전에 전체 페이지가 구문 분석될 때까지 스크립트가 지연됩니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소에 defer 속성을 설정하세요. 이는 브라우저에 즉시 다운로드하되 실행은 지연시키라고 지시하는 것과 같습니다. 참고: 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소가 93f0f5c25f18dab9d176bd4f6de5d30e 요소 내에 배치되어 있지만 포함된 스크립트는 브라우저에서 081a934c7ac7a6b28b4ef3b648acdd09 태그를 실행하기 전에.

HTML5 사양에서는 스크립트가 나타나는 순서대로 실행되어야 합니다. 실제로 지연된 스크립트가 반드시 순서대로 실행되는 것은 아닙니다. defer 속성은 외부 스크립트 파일에만 적용됩니다. HTML5를 지원하는 구현은 포함된 스크립트에 의해 설정된 지연 속성을 무시합니다.

2.async 속성

HTML5은 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 대한 async 속성을 정의합니다. defer 속성과 유사하게 스크립트 처리 동작을 변경하는 데 사용됩니다. 다시 말하지만 외부 스크립트 파일에서만 작동합니다. 목적: 페이지의 다른 콘텐츠를 비동기적으로

로드할 수 있도록 스크립트가 다운로드되어 실행될 때까지 페이지가 기다리지 않도록 합니다. 비동기 스크립트는 페이지 로드 이벤트 전에 실행되어야 합니다.

스크립트가 순서대로 실행된다는 보장은 없습니다. //这些代码应被放置在 标签前（接近HTML文件的底部） 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",downloadJAAtOnload); else window.onload = downloadJSAtload; Async는 defer와 마찬가지로 다른 리소스의 다운로드를 차단하지 않으므로 페이지 로딩에 영향을 미치지 않습니다.

단점: 로딩 순서를 제어할 수 없습니다

3. DOM 메서드를 동적으로 생성합니다 $.getScript("outer.js",function(){ //回调函数，成功获取文件后执行的函数 console.log("脚本加载完成") });

4. jQuery의 getScript() 메서드를 사용합니다 rrreee

5. JS를 마지막에 로드하도록 하세요 관련 권장 사항:

🎜🎜JavaScript의 지연 로딩🎜🎜🎜🎜🎜Javascript에서 이미지의 지연 로딩에 대한 자세한 설명🎜🎜🎜🎜🎜JavaScript 이미지 지연 로딩 라이브러리 Echo.js_javascript 팁🎜🎜