집 > 기사 > 웹 프론트엔드 > js_javascript 기술을 비동기적으로 로드하는 4가지 방법에 대해 설명하기

js_javascript 기술을 비동기적으로 로드하는 4가지 방법에 대해 설명하기

WBOY원래의: 2016-05-16 15:24:101212검색

JS를 비동기적으로 로드하는 4가지 방법, 리뷰가 시작됩니다.

옵션 1: $(document).ready

<!DOCTYPE html>
<html>
    <head>
        <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
        <script type="text/javascript">
            $(document).ready(function() {
              alert("加载完成！");
            });
        </script>
    </head>
    <body>
        <img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

댓글:

1. jquery를 인용해야 합니다

2. 모든 브라우저와 호환됩니다.

옵션 2: 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 async="async" 속성

비동기의 정의와 사용법(HTML5의 속성)

비동기 속성은 스크립트를 사용할 수 있게 되면 비동기적으로 실행되도록 지정합니다.

예:

<script type="text/javascript" src="xxxxxxx.js" async="async"></script>

댓글:

1. HTML5의 새로운 속성은 Chrome, FF, IE9 및 IE9에서 지원됩니다(IE6~8은 지원되지 않음). 또한 이 접근 방식은 스크립트가 순서대로 실행된다는 것을 보장하지 않습니다.

2. async 속성은 외부 스크립트에만 적용됩니다(src 속성을 사용하는 경우에만).

옵션 3: 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그

defer 속성은 페이지가 로드될 때까지 스크립트 실행을 연기할지 여부를 지정합니다.

일부 자바스크립트 스크립트는 document.write 메서드를 사용하여 현재 문서 콘텐츠를 생성하지만 다른 스크립트는 그렇지 않을 수도 있습니다.

스크립트가 문서의 내용을 변경하지 않는 경우 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 defer 속성을 추가하여 문서 처리 속도를 높일 수 있습니다. 브라우저는 스크립트를 실행하지 않고도 문서의 나머지 부분을 안전하게 읽을 수 있다는 것을 알고 있으므로 문서가 사용자에게 표시될 때까지 스크립트 해석을 연기합니다.

예:

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

댓글: 모든 브라우저와 호환됩니다. 또한 이 접근 방식을 사용하면 defer 속성을 설정하는 모든 스크립트가 순서대로 실행됩니다.

옵션 4: 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 동적 생성

예:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            (function(){
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                var tmp = document.getElementsByTagName('script')[0];
                tmp.parentNode.insertBefore(s, tmp);
            })();
        </script>
    </head>
    <body>
        <img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

댓글: 모든 브라우저와 호환됩니다.

위 내용은 JS 비동기 로딩의 4가지 방법에 대한 차별화된 소개입니다. JS 비동기 로딩을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.

성명：

이전 기사：자바스크립트 객체 이해 객체 질문의 함정_자바스크립트 기술다음 기사：자바스크립트 객체 이해 객체 질문의 함정_자바스크립트 기술

js_javascript 기술을 비동기적으로 로드하는 4가지 방법에 대해 설명하기

관련 기사