javascript 순서대로 js 실행 방법 불 러 오기
javascript 동적 로드 실현 방법
JS 파일 을 동적 으로 불 러 오 는 세 가지 방법
어떻게 스 크 립 트 에 비동기,차단 등 표시 가 없 습 니까?
브 라 우 저 는 자바 script 파일 을 비동기 로 불 러 오지 만 참조 파일 의 쓰기 순서 에 따라 위 에서 아래로 자바 script 을 해석 합 니 다.
Defer 속성 표시
defer 는 html 4.0 에서 정 의 된 것 입 니 다.이 속성 은 브 라 우 저 로 하여 금 스 크 립 트 의 실행 을 지연 시 킬 수 있 게 합 니 다.문서 의 해석 이 완료 되면 문서 가 나타 나 는 순서에 따라 다운로드 하여 해석 합 니 다.
즉,defer 속성의 script 은 script 을 body 에 넣 는 로 딩 효과 와 일치 합 니 다.
그러나 defer 속성 은 각 브 라 우 저 에서 지원 정도 가 약간 다르다.즉,어떤 브 라 우 저 는 완전히 지원 하지 않 는 다 는 것 이다.
Async 속성 표시
async 는 HTML 5 에 추 가 된 속성 으로 대부분 이 속성 을 지원 합 니 다.
이 속성의 역할 은 스 크 립 트 를 비동기 로 불 러 올 수 있 도록 하 는 것 입 니 다.즉,브 라 우 저가 async 속성의 script 을 만 났 을 때 브 라 우 저 는 css 를 불 러 오 는 것 과 같이 비동기 로 불 러 옵 니 다.
javascript 동적 로드 js 파일
원 리 는 매우 간단 합 니 다.script 노드 를 만 들 고 노드 에 script 의 속성 을 부여 한 다음 에 append 는 dom 의 head 태그 에 있 습 니 다.
function loadJS(url){
var Script = document.createElement('script');
Script.setAttribute('src', url);
Script.setAttribute('type', 'text/javascript');
document.body.appendChild(Script);
return Script;
}
만약 우리 가 여러 개의 javascript 파일 을 동시에 불 러 오 면
loadJS('a.js');
loadJS('b.js');
위의 효 과 는 a.js 와 b.js 파일 이 비동기 로 동시에 불 러 옵 니 다.b.js 파일 이 a.js 파일 보다 작 으 면 b.js 를 먼저 불 러 올 수 있 습 니 다.쓰기 결과 에 따라 불 러 오지 않 습 니 다.따라서 b.js 파일 이 a.js 에 의존 하 는 것 이 있다 면 잘못 보고 할 수 있 습 니 다.b.js 를 실행 할 때 a.js 가 불 러 오고 있 기 때 문 입 니 다.
javascript 로드 실행 순서 제어
우 리 는 코드 에 대해 다음 과 같은 개선 을 한다.
function loadJS(url, success) {
var domScript = document.createElement('script');
domScript.src = url;
success = success || function () {
};
domScript.onload = domScript.onreadystatechange = function () {
if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
success();
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
}
}
document.getElementsByTagName('head')[0].appendChild(domScript);
}
script 노드 의 onload 와 onready statechange 속성 을 통 해 노드 src 가 불 러 올 지 여 부 를 감청 합 니 다.성공 하면 리 셋 함수 success()를 호출 합 니 다.
이 방법 을 호출 할 때 현재 노드 가 불 러 온 것 을 loadJS 리 셋 함 수 를 통 해 알 수 있 습 니 다.그리고 리 셋 함수 에서 다른 script 파일 을 계속 불 러 옵 니 다.
loadJS(getUrl('a.js'), function () {
loadJS(getUrl('b.js'), function () {
console.log('a.js ,b.js ');
});
});
위의 방법 으로 불 러 오 는 것 은 동기 화 차단 로 딩 입 니 다.a.js 로 딩 이 완료 되 어야 b.js 파일 을 불 러 옵 니 다.만약 당신 의 javascript 파일 이 서로 의존 관계 가 없다 면,이런 방법 을 사용 하지 마 세 요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.