JavaScript 비동기 로드 문제 요약
8487 단어 JavaScript비동기 로드
기본 적 인 js 는 동기 화 로드 입 니 다.이곳 의'로드'는'다운로드'가 아니 라 해석,실행 으로 이해 할 수 있 습 니 다.최신 버 전의 브 라 우 저 에서 브 라 우 저 는 코드 에 요청 한 자원 을 차단 식 이 아니 라 폭포 식 으로 불 러 옵 니 다.그러나 js 의 실행 은 항상 막 힙 니 다.이것 은 어떤 문 제 를 일 으 킬 수 있 습 니까?만약 에 제 index 페이지 에 js 를 불 러 오 려 고 하지만 그 중의 한 요청 이 응답 을 받 지 못 해서 뒤의 js 코드 의 실행(동기 화 로드)을 막 았 습 니 다.또한 페이지 렌 더 링 도 계속 할 수 없습니다.
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
this is a test
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>js 비동기 로드 실현
우리 의 요 구 는 매우 간단 한 것 같 습 니 다.페이지 에 불 러 오 는 동시에 콘 솔 에서 문자열 을 출력 하면 됩 니 다.다시 말하자면 첫 번 째 구 글 이 제공 하 는 js 를 요청 하 는 동시에 아래 의 js 를 계속 실행 하 는 것 입 니 다.즉,js 의 비동기 로 딩 을 실현 하 는 것 입 니 다.
가장 흔히 볼 수 있 는 방법 은 동적 으로 script 라벨 을 생 성 하 는 것 입 니 다.
<body>
this is a test
<script type="text/javascript">
~function() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
}();
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>
</body>
<body>
this is a test
<script type="text/javascript">
~function() {
// function async_load() {
var s = document.createElement('script');
s.src = 'http://china-addthis.googlecode.com/svn/trunk/addthis.js';
document.body.appendChild(s);
// }
// window.addEventListener('load', async_load, false);
}();
window.onload = function() {
var txt = document.createTextNode(' hello world');
document.body.appendChild(txt);
};
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
</body>DOMContentLoaded 와 OnLoad 이벤트 DOMContentLoaded:페이지(document)가 해석 되 었 고 페이지 의 dom 요 소 를 사용 할 수 있 습 니 다.그러나 페이지 에 인 용 된 그림,subframe 은 아직 불 러 오지 않 았 을 수도 있 습 니 다.OnLoad:페이지 의 모든 자원 을 불 러 옵 니 다(그림 포함).브 라 우 저의 불 러 오 는 진행 이 이때 서 야 중단 되 었 습 니 다.이 두 시간 은 페이지 에 불 러 온 타임 라인 을 세 단계 로 나 누 었 다.
이상 은 이 문 제 를 잘 해결 할 수 있 을 것 같 지만 html 5 는 더욱 간편 한 방법 을 제공 합 니 다.async 속성!
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' async='async'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>주의해 야 할 것 은 async 속성 은 외부 스 크 립 트 에 만 적 용 됩 니 다(src 속성 을 사용 할 때 만)
defer 속성 은 항상 async 와 함께 언급 합 니 다:
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
console.log('hello world');
</script>이전의 defer 는 ie 의 hack 만 지 원 했 는데,현재 html 5 의 출현 은 defer 를 전면적으로 지원 하기 시작 했다.defer 속성 은 페이지 가 불 러 온 후에 야 스 크 립 트 를 실행 할 수 있 도록 규정 합 니 다.defer 속성 은 외부 스 크 립 트 에 만 적 용 됩 니 다(src 속성 을 사용 할 때 만 적 용 됩 니 다).ps:ie 가 지원 하 는 defer 는 그렇지 않 은 것 같 습 니 다.ie 에 대해 관심 이 없고 깊이 연구 하지 않 기 때문에 관심 이 있 는 사람 은 관련 자 료 를 찾 아 볼 수 있 습 니 다.
async 와 defer 가 자주 나타 나 니까 분석 해 보 세 요!
async 와 defer 속성 이 없 으 면 브 라 우 저 는 현재 js 스 크 립 트 를 즉시 실행 하여 뒤의 스 크 립 트 를 막 습 니 다.async 속성 이 있 으 면 후속 문서 요 소 를 불 러 오고 렌 더 링 하 는 과정 은 현재 js 의 불 러 오기 와 실행 을 병행 합 니 다(비동기).defer 속성 이 있 으 면 후속 문서 요 소 를 불 러 오 는 과정 은 script.js 의 불 러 오 는 것 과 병행 합 니 다(비동기).그러나 script.js 의 실행 은 모든 요소(DOM)분석 이 끝 난 후에 DOMContentLoaded 이벤트 가 발생 하기 전에 이 루어 집 니 다.
인터넷 에서 훔 친 그림 을 보 세 요.
파란색 선 은 네트워크 읽 기 를 대표 하고 빨간색 선 은 실행 시간 을 대표 합 니 다.이 두 가 지 는 모두 스 크 립 트 를 대상 으로 합 니 다.녹색 선 은 HTML 해석 을 대표 합 니 다.
이 그림 은 다음 과 같은 몇 가지 요점 을 알려 줍 니 다.
4.567917.defer 와 async 는 인터넷 에서 읽 기(다운로드)이 부분 은 똑 같 습 니 다.모두 비동기 적 입 니 다(HTML 해석 에 비해)4.567917.이 두 가지 차 이 는 스 크 립 트 를 다운로드 한 후에 언제 실행 하 느 냐 에 있다.분명히 defer 는 우리 가 응용 스 크 립 트 의 로드 와 실행 에 대한 요구 에 가장 가깝다4.567917.defer 에 대해 이 그림 은 불 러 오 는 순서에 따라 스 크 립 트 를 실행 하 는 데 있 습 니 다.이 점 은 잘 활용 해 야 합 니 다
this is a test
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer='defer'></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js' defer='defer'></script>
<script type="text/javascript" src='index.js' defer='defer'></script>
console.log('hello world');총결산
JavaScript 의 비동기 로 딩 방법 도 있 습 니 다.예 를 들 어 AJAX eval(AJAX 를 사용 하여 스 크 립 트 내용 을 얻 은 다음 에 eval(xmlhttp.responseText)을 통 해 스 크 립 트 를 실행 합 니 다),iframe 방식 등 입 니 다.
이상 의 이해 에 차이 가 있 으 시 면 지적 해 주시 기 바 랍 니 다.저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
