JS 비동기 로 딩 하 는 세 가지 방식 을 자세히 알 아 보 세 요.
우리 가 평소에 가장 많이 사용 하 는 방식.
<script src="http://yourdomain.com/script.js"></script>
<script src="http://yourdomain.com/script.js"></script>2.비동기 로 딩
비동기 로 딩 은 비 차단 로 딩 이 라 고도 합 니 다.브 라 우 저 는 js 를 다운로드 하여 실행 하 는 동시에 후속 페이지 의 처 리 를 계속 할 것 입 니 다.주로 세 가지 방식 이 있다.
방법 1:Script DOM Element 라 고도 합 니 다.
(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(function(){;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();방법 2:onload 의 비동기 로드
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();주:DOMContentLoaded 와 load 의 차이.전 자 는 document 에서 분석 이 완료 되 었 습 니 다.페이지 의 dom 요 소 는 사용 할 수 있 지만 페이지 의 그림,비디오,오디 오 등 자원 이 불 러 오지 않 았 습 니 다.jQuery 의 ready 이벤트 와 같은 역할 을 합 니 다.후자 의 차 이 는 페이지 의 모든 자원 을 불 러 오 는 것 이다.
방법 3:기타 방법
JavaScript 의 동태 성 으로 인해 비동기 로드 방법 도 많 습 니 다.XHR Injection,XHR Eval,Script In Iframe,Script defer 속성,document.write(script tag).
XHR Injection(XHR 주입):XML HttpRequest 를 통 해 자바 스 크 립 트 를 가 져 온 다음,DOM 구조 에 스 크 립 트 요 소 를 삽입 합 니 다.ajax 요청 이 성공 한 후 script.text 를 요청 이 성공 한 후 돌아 오 는 responseText 로 설정 합 니 다.
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var script = document.createElement("script");
script.text = xmlHttp.responseText;
document.getElementsByTagName("head")[0].appendChild(script);
}
}
XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
$("#btn1").click(function(){
alert($(this).text());
});
}
}
var insertJS = function(){alert(2)};
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
doc.open();
doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
doc.close();
<script type="text/javascript">
/*
var ...
*/
</script>defer 속성:IE 4.0 이 나타 납 니 다.defer 속 성명 스 크 립 트 에는 document.write 와 dom 이 수정 되 지 않 습 니 다.브 라 우 저 는 defer 속성 이 있 는 다른 script 을 동시에 다운로드 합 니 다.페이지 의 후속 처 리 를 막 지 않 습 니 다.주:모든 defer 스 크 립 트 는 순서대로 실행 되 어야 합 니 다.
<script type="text/javascript" defer></script>
<script type="text/javascript" defer></script>async 속성 이 없 으 면 script 은 즉시 가 져 오고 실행 하 며 브 라 우 저의 후속 처 리 를 차단 합 니 다.async 속성 이 있 으 면 script 은 비동기 로 다운로드 되 고 실행 되 며 브 라 우 저 는 후속 처 리 를 계속 합 니 다.
요약:HTML 5 를 지원 하 는 브 라 우 저 에 대해 JS 의 비동기 로 딩 을 실현 하려 면 script 요소 에 async 속성 을 추가 하고 기 존 버 전의 IE 를 호 환 하기 위해 defer 속성 을 추가 해 야 합 니 다.Html 5 를 지원 하지 않 는 브 라 우 저(IE 는 defer 로 구현 가능)에 대해 서 는 상기 몇 가지 방법 으로 구현 할 수 있 습 니 다.원 리 는 기본적으로 DOM 에 script 을 쓰 거나 eval 함 수 를 통 해 JS 코드 를 실행 합 니 다.익명 함수 에 넣 어 실행 할 수도 있 고 onload 에서 실행 할 수도 있 습 니 다.XHR 주입 을 통 해 실현 할 수도 있 고 iframe 요 소 를 만 든 다음 iframe 에서 JS 코드 를 삽입 할 수도 있 습 니 다.
3.로드 지연
일부 JS 코드 는 페이지 가 초기 화 될 때 사용 되 는 것 이 아니 라 어떤 경우 에 사용 되 어야 합 니 다.로드 지연 은 이 문 제 를 해결 하기 위 한 것 이다.JS 를 여러 모듈 로 나 누 어 페이지 를 초기 화 할 때 즉시 실행 해 야 할 JS 만 불 러 오고 다른 JS 의 불 러 오기 가 처음 필요 할 때 불 러 옵 니 다.그림 의 로드 지연 과 유사 합 니 다.
JS 의 로 딩 은 두 부분 으로 나 뉜 다.다운로드 와 실행 이다.비동기 로 딩 은 다운로드 문 제 를 해결 할 뿐 코드 는 다운로드 가 완료 되면 바로 실 행 됩 니 다.실행 과정 에서 브 라 우 저 는 차단 상태 에 있어 서 어떠한 요구 에 도 응답 하지 못 합 니 다.
해결 방향:JS 로 딩 지연 문 제 를 해결 하기 위해 비동기 로 캐 시 를 불 러 올 수 있 으 나 즉시 실행 되 지 않 고 필요 할 때 실행 할 수 있 습 니 다.어떻게 캐 시 를 진행 합 니까?JS 콘 텐 츠 를 Image 나 Object 대상 으로 캐 시 를 불 러 오기 때문에 바로 실행 하지 않 고 처음 필요 할 때 실행 합 니 다.
1:시 뮬 레이 션 이 긴 다운로드 시간:
thread 를 이용 하여 sleep 를 한동안 다운로드 작업 을 수행 하도록 합 니 다.
2:아 날로 그 가 긴 JS 코드 실행 시간
var start = Number(new Date());
while(start + 5000 > Number(new Date())){//执行JS}JS 지연 로 딩 메커니즘(LazyLoad):쉽게 말 하면 브 라 우 저 에서 특정한 위치 로 스크롤 하여 관련 함 수 를 실행 하고 페이지 요소 의 로 딩 이나 일부 동작 을 수행 하 는 것 입 니 다.어떻게 브 라 우 저 스크롤 위치 검 사 를 실현 합 니까?특정한 시각 페이지 의 목표 노드 위치 와 브 라 우 저 스크롤 바 높이 를 비교 하여 함수 실행 여 부 를 판단 할 수 있 습 니 다.
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 JS 비동기 로 딩 의 세 가지 방식 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
