HTML 페이지에서 js 파일의 비동기 로딩

일반적으로 타사 js가 직접 도입됩니다. 타사 js가 느리면 사용자가 기다릴 때 빈 공간이 표시되며 이는 좋은 사용자 경험이 아닙니다. 따라서 즉시 실행할 필요가 없는 일부 js는 비동기적으로 로드될 수 있습니다.

로딩 방법은 다음과 같이 2가지가 있습니다.

script add async="async"

async는 HTML5의 새로운 속성으로, 하위 버전의 브라우저에서는 호환되지 않습니다

<script type="text/javascript" async="async" src="http://thirdpart/js.js" ></script>

js 메서드를 사용하여 비동기식으로 로드하세요

이것은 method 모니터링 페이지가 로드된 후 페이지에 js 파일을 소개하는 스크립트를 추가하세요

(function() {
function asyncLoad() {
var src = "http://thirdpart/js.js";
var urls = src.split(",");
var x = document.getElementsByTagName('body');
if(x && x[0]){
for (var i = 0; i < urls.length; i++) {
var s = document.createElement(&#39;script&#39;);
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = urls[i];
x[0].appendChild(s);
}
}
}
window.attachEvent ? window.attachEvent(&#39;onload&#39;, asyncLoad) :
window.addEventListener(&#39;load&#39;, asyncLoad, false);
})();

위 내용은 HTML 페이지에서 js 파일의 비동기 로딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!