HTML에서 JavaScript 스크립트 파일을 로드하는 일반적인 방법 요약

브라우저에서 (내장된) 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 발견하면 현재 브라우저는 JavaScript가 페이지 콘텐츠를 수정할지 여부를 알 수 없습니다. 따라서 브라우저는 이때 페이지 처리를 중지하고 먼저 JavaScript 코드를 실행한 다음 계속해서 페이지를 구문 분석하고 렌더링합니다. src 속성을 사용하여 javaScript(즉, 외부 링크 javaScript)를 추가하는 과정에서도 동일한 상황이 발생합니다. 브라우저는 먼저 외부 링크 파일에 있는 코드를 다운로드하는 데 시간을 소비한 다음 이를 구문 분석하고 실행해야 합니다. 이 과정에서 페이지 렌더링과 사용자 상호 작용이 완전히 차단됩니다.

즉, 브라우저가 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그(인라인 또는 외부 링크)를 구문 분석할 때마다 브라우저는 (단독으로) 태그의 JavaScript 코드 다운로드, 구문 분석 및 실행에 우선순위를 부여하여 다운로드를 차단합니다. 모든 후속 페이지 콘텐츠의 렌더링.

방법 1: 기존 접근 방식

가장 전통적인 방법은 헤드 태그에 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 삽입하는 것입니다.

그러나 이러한 기존 접근 방식에는 심각한 성능 문제가 숨겨져 있습니다. 위의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 특성 설명에 따르면, 이 예에서는 브라우저가 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 구문 분석할 때 브라우저가 그 이후의 콘텐츠 구문 분석을 중지하고 먼저 스크립트 파일을 다운로드합니다. 이 코드는 후속 test.css 스타일 파일과 6c04bd5ca3fcae76e30b72ad730ca86d 태그를 로드할 수 없음을 의미합니다. 따라서 JavaScript 코드가 완전히 실행될 때까지 페이지는 비어 있습니다.

<script type="text/javaScript" src="example.js"></script>

방법 2: 전통적인 접근 방식

3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 후속 콘텐츠 로드를 차단하므로 모든 페이지 콘텐츠 뒤에 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 추가하면 이러한 나쁜 상황을 피할 수 있습니까? 페이지의 나머지 부분 다운로드에 미치는 영향을 최소화하려면 모든 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 6c04bd5ca3fcae76e30b72ad730ca86d 태그 하단에 최대한 가깝게 배치하세요.

IE8+ 브라우저에서는 스크립트 병렬 다운로드가 구현되었지만 일부 브라우저에서는 (스크립트 파일이 6c04bd5ca3fcae76e30b72ad730ca86d 태그 하단에 배치되어 있어도) 페이지의 스크립트가 여전히 차례로 로드됩니다. 따라서 다음 방법이 필요합니다. 즉, 동적으로 스크립트를 로드하는 것입니다.

방법 3: 동적 스크립트

DOM(문서 개체 모델)을 사용하면 페이지의 거의 모든 위치에서 만들 수 있습니다.

<script type=&#39;text/javascript&#39;>
  var script = document.createElement(&#39;script&#39;);
  script.type = &#39;text/javaScript&#39;;
  script.src = &#39;file1.js&#39;;
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>

위 코드는 외부 링크 file1의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 동적으로 생성하여 93f0f5c25f18dab9d176bd4f6de5d30e 이 기술의 핵심은 다음과 같습니다.

다운로드가 언제 시작되더라도 파일의 다운로드 및 실행 프로세스는 페이지의 다른 프로세스(스크립트 로딩 포함)를 차단하지 않습니다.
그러나 이 방법에도 결함이 있습니다. 이런 방식으로 로드된 스크립트는 다운로드가 완료된 후 즉시 실행됩니다. 즉, 여러 스크립트 간의 실행 순서를 보장할 수 없습니다(Firefox 및 Opera 제외). 스크립트가 다른 스크립트에 종속되면 오류가 발생할 가능성이 높습니다. 예를 들어 jQuery 코드를 작성하려면 jQuery 라이브러리를 가져와야 합니다. 하지만 작성한 jQuery 코드 파일이 먼저 다운로드되어 즉시 실행될 가능성이 높습니다. 'jQuery는 그렇지 않습니다. 정의됨' 등이 있습니다. 현재 jQuery가 정의되지 않았기 때문입니다. 이에 따라 다음과 같이 개선되었습니다.

<script type=&#39;text/javascript&#39;>
  function loadScript(url, callback) {
    var script = document.createElement(&#39;script&#39;);
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
  }
</script>

위 코드의 개선 사항은 해당 스크립트 파일이 로드된 후 호출되는 콜백 함수를 추가한 것입니다. 이러한 방식으로 순차적 로딩이 달성될 수 있습니다. 쓰기는 다음과 같습니다(file2가 file1에 종속되고 file1과 file3이 서로 독립적이라고 가정).

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});

file2는 file1이 로드된 후 로딩을 시작하여 file1이 file2가 실행되기 전에 준비됩니다. File1과 file3은 병렬로 다운로드되며 서로 영향을 주지 않습니다. loadScript 함수는 충분히 좋지만 여전히 만족스럽지 못한 측면이 있습니다. 이 코드를 분석함으로써 우리는 loadScript 함수의 순차적 로딩이 스크립트 로딩을 차단하여 구현된다는 것을 알 수 있습니다(위의 빨간색 텍스트에서 지적한 바와 같이). 우리가 실제로 달성하고자 하는 것은 스크립트가 동기적으로 다운로드되고 해당 순서에 따라 실행되는 것입니다. 즉, 병렬로 로드되고 순차적으로 실행됩니다.

위 내용은 HTML에서 JavaScript 스크립트 파일을 로드하는 일반적인 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!