js 비동기 로드

더 읽 기
기본 적 인 상황 에서 자 바스 크 립 트 는 동기 적 으로 불 러 옵 니 다. 즉, 자 바스 크 립 트 의 불 러 올 때 막 힌 것 입 니 다. 뒤의 요 소 는 자 바스 크 립 트 가 불 러 온 후에 야 다시 불 러 옵 니 다. 일부 의미 가 큰 자 바스 크 립 트 는 페이지 에 놓 으 면 불 러 오 는 것 이 느 리 고 사용자 체험 에 심각 한 영향 을 줄 수 있 습 니 다.
이 문 제 를 어떻게 해결 하 는 지 다음 에 비동기 로 js 세 가지 실현 방안 을 상세 하 게 소개 할 것 입 니 다. 관심 이 있 는 것 은 참고 하 셔 도 됩 니 다.

(1) defer, IE 만 지원
(iE9 및 이하 지원, IE 10 및 이상 은 이 속성 을 지원 하지 않 습 니 다. 개인 적 으로 사용 하지 말 것 을 권장 합 니 다. 현대 브 라 우 저 를 껴 안 으 세 요)
defer 속성의 정의 와 용법 (w3 school 사이트 에서 따 서 알 아 보면 됩 니 다)
defer 속성 은 페이지 가 불 러 올 때 까지 스 크 립 트 실행 을 지연 시 킬 지 여 부 를 규정 합 니 다.
현재 문서 내용 을 만 드 는 javascript 스 크 립 트 document. write 방법 이 있 습 니 다. 다른 스 크 립 트 가 꼭 그렇지 는 않 습 니 다.
스 크 립 트 가 문서 의 내용 을 바 꾸 지 않 는 다 면 defer 속성 을 탭 에 추가 하여 문 서 를 처리 하 는 속 도 를 빠르게 할 수 있 습 니 다.lt;/p>
<p> 브 라 우 저 는 스 크 립 트 를 실행 하지 않 고 문서 의 나머지 부분 을 안전하게 읽 을 수 있다 는 것 을 알 고 있 기 때문에 문서 가 사용자 에 게 표 시 될 때 까지 스 크 립 트 에 대한 설명 을 늦 출 것 입 니 다.lt;/p>
<p> 예제: & lt; /p>
<p> </p>
<p> 코드 는 다음 과 같 습 니 다: & lt; /p>
<p> </p>
<p> <script type="text/javascript" defer="defer"></p>
<p> alert(document.getElementById("p1").firstChild.nodeValue);</p>
<p>

(2) async: (IE9 및 이하 지원 되 지 않 음)
async 의 정의 와 용법 (HTML 5 의 속성)
async 속성 은 스 크 립 트 가 사용 가능 하면 비동기 로 실 행 됩 니 다.
예시:
코드 는 다음 과 같 습 니 다:

설명: async 속성 은 외부 스 크 립 트 에 만 적 용 됩 니 다 (src 속성 을 사용 할 때 만 적 용 됩 니 다). < /p>

설명: 외부 스 크 립 트 를 실행 하 는 여러 가지 방법 이 있 습 니 다: < / p >

•async = "async": 스 크 립 트 가 페이지 의 나머지 부분 에 비해 비동기 적 으로 실 행 됩 니 다 (페이지 가 계속 분석 되면 스 크 립 트 가 실 행 됩 니 다) < / p >

async 를 사용 하지 않 고 defer = "defer": 스 크 립 트 는 페이지 해석 이 끝 날 때 < / span > < span style = "color: \ # ff 0000;" > (개인 적 으로 defer 를 사용 하 는 것 을 권장 하지 않 음) < / span > < / p > 를 실행 합 니 다.

•async 도 사용 하지 않 고 defer 도 사용 하지 않 는 다 면 브 라 우 저 에서 페이지 를 계속 분석 하기 전에 스 크 립 트 를 즉시 읽 고 실행 합 니 다 < / p >

< p > (3) script 을 만 들 고 DOM 에 삽입 합 니 다. 로드 가 끝 난 후 callBack 은 많은 모듈 로 더 에서 대부분 사용 하 는 다음 코드 입 니 다. 코드: < / p > 참조.
< p > 코드 는 다음 과 같 습 니 다: < / p >

var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
      script.onreadystatechange = function(){
      if (script.readyState == "loaded" ||
         script.readyState == "complete"){
         script.onreadystatechange = null;
         callback();
      }
   };
} else { //Others: Firefox, Safari, Chrome, and Opera
      script.onload = function(){
          callback();
      };
}
document.body.appendChild(script);

< p > 보충 지식: < / p >

document.currentScript

< p > 설명: < / p >
< p > 포 함 된 스 크 립 트 가 실행 중인 < script > 요 소 를 되 돌려 줍 니 다. & lt; /p>
<p>용법: & lt; /p>
<p>document.currentScript</p>
<p>https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript</p>
</div>
</div>
</div>
</div>
</div>
<!--PC 와 WAP 자체 적응 버 전 -- & lt;
<div id="SOHUCS" sid="1176706742885625856"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">
이 가능 하 다, ~ 할 수 있다,...

sql 같은 항목 의 개 수 를 통계 하고 순위 에 따라 표시 합 니 다.
주 휘 휘 휘
java oracle

안 드 로 이 드 + Jquery 모 바 일 학습 시리즈 - 목록
설탕
JQuery Mobile

어떻게 스 레 드 탱크 에 이름 을 붙 입 니까?
daysinsun
스 레 드 탱크

IE 에서 "HTML 파 싱 오류: 상위 컨테이너 요 소 를 수정 할 수 없습니다.
주 범 양
html 해석 하 다. error readyState

자바 업로드
g21121
java

SpringMVC 설정 학습
510888780
spring mvc

spring mvc - jfreeChart 기둥 그림 (1)
천벌
jfreechart

나의 spring 학습 노트 13 - 용기 확장 점 의 Property Place holder Configure
aijuans
Spring3

js 비동기 로드

좋은 웹페이지 즐겨찾기