JavaScript의 동기 로딩 및 비동기 로딩 예제에 대한 자세한 설명

동기 로딩

우리가 일반적으로 사용하는 가장 일반적인 동기 로딩 형식:

<script src="http://yourdomain.com/script.js"></script>

동기 모드(차단 모드라고도 함)는 브라우저의 후속 처리를 방지하고 후속 구문 분석을 중지하므로 후속 파일 로드(예: 이미지) ), 렌더링, 코드 실행. js를 동기적으로 실행해야 하는 이유는 js에 문서 내용 출력, DOM 수정, 리디렉션 등의 동작이 있을 수 있으므로 기본적으로 동기 실행이 안전하기 때문입니다. 과거의 일반적인 조언은 이러한 차단 동작을 최소화하고 페이지가 먼저 표시되도록 하려면 36cc49f0c466276486e50c850b7e4956 앞에 페이지 끝 부분에 3f1c4e4b6b16bbbd69b2ee476dc4f83a를 배치하는 것이었습니다. 간단히 말하면, 로드된 네트워크 타임라인은 폭포수 모델이고, 비동기적으로 로드된 타임라인은 동시성 모델입니다.

일반적인 비동기 로딩

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})();

비동기 로딩은 비차단이라고도 합니다. 브라우저는 js를 다운로드하고 실행하는 동안 계속해서 후속 페이지를 처리합니다. 이 방법은 js를 사용하여 페이지의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 내에 스크립트 요소를 생성하고 이를 문서에 삽입하는 것입니다. 이를 통해 js 코드의 비차단 다운로드가 달성됩니다. async 속성은 HTML5의 새로운 비동기 지원입니다. 아래 설명을 참조하세요. 추가하는 것이 좋습니다(추가하지 않아도 영향을 미치지 않습니다). 이 방법을 Script DOM Element 방법이라고 하며 js가 동일한 출처를 가질 필요는 없습니다. js 코드를 익명 함수로 래핑하고 즉시 실행하는 방법은 변수 이름이 외부로 유출되는 것을 방지하기 위한 것인데, 특히 js 라이브러리에서 흔히 사용되는 방법입니다.
예를 들어 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); 
})(); 
(function() 
{var po = document.createElement("script"); 
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(po, s); 
})();

그러나 이 로딩 방법은 로딩이 완료되기 전에 onload 이벤트가 트리거되는 것을 방지하므로 이제 많은 페이지의 코드는 여전히 추가 렌더링 작업 등이 진행되는 동안 실행되므로 일부 페이지의 초기화 처리가 계속 차단됩니다.

onload시 비동기 로딩

(function() { 
function async_load(){ 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
} 
if (window.attachEvent) 
window.attachEvent('onload', async_load); 
else 
window.addEventListener('load', async_load, false); 
})();

이전 방법과 비슷하지만, js의 비동기 로딩을 즉시 시작하지 않고 onload시에만 비동기 로딩을 시작한다는 것이 핵심입니다. 이는 onload 이벤트가 트리거되는 것을 차단하는 문제를 해결합니다.
추가됨: DOMContentLoaded 및 OnLoad 이벤트
DOMContentLoaded: 페이지(문서)가 구문 분석되었으며 페이지의 dom 요소를 사용할 수 있습니다. 그러나 페이지에서 참조된 이미지와 하위 프레임이 아직 로드되지 않았을 수 있습니다.
OnLoad: 페이지의 모든 리소스가 로드되었습니다(이미지 포함). 이 시점에서 브라우저의 로딩 진행이 중지됩니다.
이 두 시점은 페이지 로딩 타임라인을 세 단계로 나눕니다.

위 내용은 JavaScript의 동기 로딩 및 비동기 로딩 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!