>  기사  >  웹 프론트엔드  >  HTML 페이지에서 js 파일의 비동기 로딩

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

韦小宝
韦小宝원래의
2018-03-14 18:29:341775검색

일반적으로 타사 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(&#39;body&#39;);
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.