Demand_javascript 기술에 대한 js 파일의 LABJS 동적 로딩에 대해 자세히 논의하십시오.

LABjs는 필요에 따라 JavaScript 파일을 로드하는 데 사용되는 작은 JavaScript 도구입니다. 이 도구를 사용하면 페이지 성능을 향상시키고 불필요한 JavaScript 파일 로드를 방지하며 스크립트 파일의 동적 병렬 로딩 및 관리를 실현할 수 있습니다. 스크립트 파일을 로드하는 실행 순서입니다.

간단한 예

$LAB
.script("script1.js", "script2.js", "script3.js")
.block(function(){
  // wait for all to load, then do something
  script1Func();
  script2Func();
  script3Func();
});

LABJS의 여러 예를 소개합니다:
예시 1:

$LAB
  .script("script1.js")
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

예 2:

$LAB 
  .script({ src: "script1.js", type: "text/javascript" })
  .script("script2.js")
  .script("script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

예 3:

$LAB
  .script("script1.js", "script2.js", "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

예 4:

$LAB
  .script( [ "script1.js", "script2.js" ], "script3.js")
  .wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
  });

예 5:

$LAB
  .script("script1.js").wait() // 空的wait()只是确保script1在其他代码之前被执行
  .script("script2.js") // script2 和 script3 依赖于 script1
  .script("script3.js").wait() // 但是script2 和 script3 并不互相依赖,可以并行下载
  .script("script4.js") // script4 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

예 6:

$LAB
  .script("script1.js") // script1, script2, and script3 之间没有依赖关系,
  .script("script2.js") // 所以可以任意顺序执行
  .script("script3.js")
  .wait(function(){ // 如果需要,这里当然可以执行javascript函数
    alert("Scripts 1-3 are loaded!");
  })
  .script("script4.js") // 依赖于 script1, script2 及 script3
  .wait(function(){script4Func();});

예 7:

$LAB
  .setOptions({AlwaysPreserveOrder:true}) // 设置每个脚本之间等待
  .script("script1.js") // script1, script2, script3, script4 互相依赖
  .script("script2.js") // 并且并行下载后循序执行
  .script("script3.js")
  .script("script4.js")
  .wait(function(){script4Func();});

예 8:

$LAB
  .script(function(){
    // `_is_IE`的值ie为true ,非ie为false
    if (_is_IE) {
      return "ie.js"; // 如果是ie则这个js会被加载
    }
    else {
      return null; //如果不是ie这个代码就会被略过
    }
  })
  .script("script1.js")
  .wait();

LABjs 로딩 방법

LABjs에서 스크립트 파일을 동적 로딩한다는 것은 해당 페이지의 js 스크립트가 실행될 때 다양한 방법을 통해 외부 js를 로딩하는 것을 의미합니다(주로 html 페이지에서 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 통해 정적으로 로딩되는 스크립트와는 다릅니다)

스크립트를 동적으로 로드하는 방법에는 여러 가지가 있지만, 여기서는 자세히 설명하지 않겠습니다. 관심 있는 어린이는 이 글 마지막에 있는 참조 링크를 참조하세요.

LABjs에는 Script Element, XHR 주입, Cache Trick의 세 가지 주요 기술이 사용됩니다

먼저 이 세 가지 로딩 방식에 대해 간략하게 소개하겠습니다. 네 번째 부분에서는 LABjs 소스 코드 구현 시 세 가지 방식의 사용 시나리오를 분석해 보겠습니다.

스크립트 요소(LABjs는 기본적으로 로딩 방식을 사용함)

스크립트를 동적으로 로드하는 가장 일반적인 방법에는 다음과 같은 많은 장점이 있습니다. 1. 간단한 구현 2. 교차 도메인 가능 3. 다른 리소스 로드 등을 차단하지 않습니다.

Opera/Firefox(이전 버전)에서는 스크립트 실행 순서가 페이지에 노드가 삽입되는 순서와 일치합니다

IE/Safari/Chrome에서는 실행 순서를 보장할 수 없습니다

참고:

Firefox 새 버전에서는 스크립트 실행 순서가 페이지에 삽입되는 순서와 반드시 동일하지는 않지만, 스크립트 태그의 async 속성을 false로 설정하면 실행 순서를 보장할 수 있습니다.

이전 버전의 Chrome에서는 스크립트 실행 순서가 페이지에 삽입되는 순서와 반드시 동일하지는 않지만, 스크립트 태그의 async 속성을 false로 설정하면 실행 순서를 보장할 수 있습니다.

XHR 주입
ajax 요청을 통해 스크립트 파일을 로드한 후 다음을 통해 실행합니다.
평가: 일반적인 방법
XHR 주입: 스크립트 요소를 생성하고 로드된 스크립트 파일의 내용을
에 주입합니다. 주요 제한 사항: 도메인 간 교차 불가
캐시 트릭(브라우저 기능 구현에 크게 의존하며 권장되지 않음)
script 요소의 type 속성을 "text/cache", "text/casper", "text/hellworld" 등과 같이 브라우저가 인식하지 못하는 값으로 설정하면 다른 브라우저의 동작은 다음과 같습니다. 다음은:
IE/Safari/Chrome(이전 버전): 스크립트는 평소대로 로드되지만 실행되지 않습니다. 브라우저가 캐싱을 비활성화하지 않는다고 가정하면 로드된 스크립트는 필요할 때만 브라우저에 의해 캐시됩니다. 스크립트 태그를 다시 생성하고, 유형을 올바른 값으로 설정하고, src가 이전에 요청한 파일 URL을 가리킵니다(캐시에서 파일을 읽는 것과 동일).
Opera/Firefox: 로드되지 않음
참고:
브라우저의 기능 구현에 크게 의존하며 브라우저의 기능 구현이 변경되면 유효하지 않을 수 있습니다.
을 사용하지 않는 것이 좋습니다. 새 버전의 Chrome 브라우저에서는 스크립트 요소의 유형을 'text/javascript'가 아닌 다른 것으로 설정하고 더 이상 스크립트 파일을 로드하지 않습니다.

LABjs의 스크립트 로딩 옵션에 대한 판단

기술적인 세부 사항은 무시하고 대략 다음과 같은 의사 코드를 통해 LABjs의 구현을 설명합니다.
먼저 요청한 스크립트를 미리 로드할지 여부를 결정합니다(미리 로드 조건은 의사 코드 주석 참조).
사전 로드가 수행되면 브라우저가 실제 사전 로드를 지원하는지 확인하고, 지원하지 않으면 요청된 스크립트가 현재 페이지와 동일한 도메인에 있는지 확인합니다. 그렇지 않은 경우 XHR 삽입을 사용합니다. , , 캐시 트릭 사용
사전 로딩이 수행되지 않으면 브라우저가 스크립트 요소의 비동기 속성을 지원하는지 확인하십시오(의사 코드 주석 참조). 그렇다면 비동기 속성을 설정하고 그렇지 않은 경우 스크립트 파일을 요청하십시오. 스크립트 요소를 통해 직접 스크립트 파일을 로드하십시오. ;

if(ifPreloadScript){  //当请求的脚本文件是否进行预加载：1、需要预加载 2、浏览器支持预加载
  if(supportRealPreloading){  //如果支持真正的预加载
    if(supportPreloadPropNatively){  //支持通过设置script标签的preload属性，实现script的预加载，以及分离加载和执行
                    //Nicholas C. Zakas大神的美好愿望，尚未有浏览器支持：/blog/2011/02/14/separating-javascript-download-and-execution/
      script.onpreload = callback;
      script.newPreload = true;
      script.src = targetUrl;
    }else{
      script.onreadystatechange = callback;  //其实就是指IE浏览器，假设指定了script元素的src属性，IE浏览器里会立即加载
      script.src = targetUrl;  //即使script元素没有被插入页面，callback为预加载后的回调
    }
  }
  else if(inSameDomain){  //非跨域，采用XHR Injection：请求的脚本与当前页面处于同一个域
    xhr = new XMLHttpRequest();  //由于上个判断已经将IE无情地抛弃在这个条件分支之外，所以大胆地用 new XMLHttpRequest()吧
    xhr.onreadystatechange = callback;
    xhr.open("GET",targetUrl);
    xhr.send();
  }
  else{  //最无奈的后招，Cache Trick，新版chromei已经不支持
    script.onload = callback;
    script.type = 'text/cache';  
    script.src = targetUrl;
  }
}else{
  if(canContrlExecutionOrderByAsync){  //如果能够通过script元素的async属性来强制并行加载的脚本顺序执行
                    //kyle大神着力推进的提案，目前已被html5小组接受并放入草案：/Dynamic_Script_Execution_Order#My_Solution
    script.onload = callback;
    script.async = false;  //将script元素的async设为false，可以保证script的执行顺序与请求顺序保持一致
    script.src = targetUrl;
  }
  else{
    script.onload = callback;
    script.src = targetUrl;  
  }
}

실제로 페이지에 img 노드를 생성하고 src를 스크립트 파일로 지정하면 일부 브라우저에서 파일을 미리 로드하는 역할도 할 수 있습니다. LABjs 작성자는 이것을 생각하지 않았나요?