js에서 지연 로딩을 구현하는 방법은 몇 가지입니까? js의 6가지 지연 로딩 방법 소개-JS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-08-22 11:37:01

원래의

2571명이 탐색했습니다.

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

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

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

1 defer 속성
HTML 4.01은 <script> 태그는 defer 속성을 정의합니다. <script>标签定义了 defer属性。 <br/>用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。</script></p> <p>在<code><script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" defer="defer"></script>
    <script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

로그인 후 복사

说明：虽然<script> 元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行。

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

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

2、async属性

HTML5 为 <script>标签定义了 async属性。与defer목적: 스크립트가 실행될 때 페이지 구조에 영향을 미치지 않음을 나타냅니다. 즉, 실행 전에 전체 페이지가 구문 분석될 때까지 스크립트가 지연됩니다. <script> 요소에 defer 속성을 설정하세요. 이는 브라우저에 즉시 다운로드하되 실행은 지연시키라고 지시하는 것과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

로그인 후 복사

참고: <script> 요소가 <head> 요소 내에 배치되어 있지만 포함된 스크립트는 브라우저에서 < /html> 태그를 실행하기 전에.

HTML5 사양에서는 스크립트가 나타나는 순서대로 실행되어야 합니다. 실제로 지연된 스크립트가 반드시 순서대로 실행되는 것은 아닙니다.

defer 속성은 외부 스크립트 파일에만 적용됩니다. HTML5를 지원하는 구현은 포함된 스크립트에 의해 설정된 지연 속성을 무시합니다.

2.async 속성

HTML5은 <script> 태그에 대한 async 속성을 정의합니다. defer 속성과 유사하게 스크립트 처리 동작을 변경하는 데 사용됩니다. 다시 말하지만

외부 스크립트 파일에서만 작동합니다. 목적: 페이지의 다른 콘텐츠를 비동기적으로

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

비동기 스크립트는 페이지 로드 이벤트 전에 실행되어야 합니다.

스크립트가 순서대로 실행된다는 보장은 없습니다.

//这些代码应被放置在</body>标签前（接近HTML文件的底部）
<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",downloadJAAtOnload);    
        else
        window.onload = downloadJSAtload;</script>

로그인 후 복사

Async는 defer와 마찬가지로 다른 리소스의 다운로드를 차단하지 않으므로 페이지 로딩에 영향을 미치지 않습니다.

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

3. DOM 메서드를 동적으로 생성합니다

$.getScript("outer.js",function(){  
//回调函数，成功获取文件后执行的函数
    console.log("脚本加载完成")
});

로그인 후 복사

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

5. JS를 마지막에 로드하도록 하세요