javascript는 order_javascript 기술에서 js 메소드를 로드하고 실행합니다.

이 글은 주로 javascript에서 javascript를 순서대로 동적으로 로드하고 실행하는 방법과 javascript에 관심 있는 친구들이 참고할 수 있는 내용입니다.

비동기, 차단 등의 주석이 없는 스크립트는 어떻습니까?
quote

file

Defer 속성 태그

defer는 HTML4.0에서 정의됩니다. 이 속성을 사용하면 문서가 구문 분석된 후 스크립트 실행을 지연할 수 있습니다. 문서에 나타나는 순서입니다.

즉, defer 속성이 있는 스크립트는 본문에 스크립트를 넣은 것과 동일한 로딩 효과가 있습니다.

하지만 각 브라우저마다 defer 속성을 지원하는 정도가 조금씩 다릅니다. 브라우저는 이를 완전히 지원하지 않습니다.

Async 속성 주석

async는 HTML5의 새로운 속성이며 대부분의 고급 기능은 이 속성을 지원합니다.
이 속성의 기능은 스크립트가 비동기적으로 로드되도록 허용하는 것입니다. 즉, 브라우저가 비동기 속성이 있는 스크립트를 발견하면 브라우저는 CSS를 비동기적으로 로드합니다.

javascript는 js 파일을 동적으로 로드합니다.

원칙은 매우 간단합니다. 스크립트 노드를 생성하고 노드에 스크립트 속성을 할당한 다음 그런 다음 dom의 헤드 태그에 추가합니다.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

여러 개의 자바스크립트 파일을 동시에 로드하면

loadJS('a.js');
loadJS('b.js');

위의 효과는 a.js와 b.js입니다. b.js 파일이 a.js보다 큰 경우 파일이 작은 경우 b.js가 먼저 로드되어 실행될 가능성이 높으며 로드 및 실행되지 않습니다. 작성된 결과에 따르면

그래서 b.js 파일이 a.js에 의존하는 경우 b.js가 js로 해석되고 실행되기 때문에 오류가 보고됩니다. a.js는 여전히 로드 중입니다.

자바스크립트 로딩 및 실행 순서 제어

코드를 다음과 같이 개선했습니다

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);
    }

스크립트 노드의 onload 및 onreadystatechange 속성을 사용하여 노드 src를 모니터링합니다. 로딩이 완료되었는지 여부

성공하면

콜백 함수

성공()을 호출합니다.

이 메서드를 호출하면 loadJS 콜백 함수를 사용하여 현재 노드가 로드되었음을 알 수 있으며 콜백 함수에서 다른 스크립트 파일을 계속 로드할 수 있습니다.

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

위 방법을 통한 로딩은 a.js가 로딩된 후에만 b.js 파일이 로딩되고 실행됩니다.

자바스크립트 파일에 상호 의존성이 없다면, 이 방법을 사용하지 마세요.

관련 권장 사항:

html, css 및 js 파일 로딩 순서 및 실행

jquery popupDialog jsp 페이지 로딩 방법을 사용하세요

js_javascript 기술을 동적으로 로드하는 여러 가지 방법

위 내용은 javascript는 order_javascript 기술에서 js 메소드를 로드하고 실행합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!