처음으로 Lab.js를 사용할 때 주의사항_javascript 기술
- WBOY원래의
- 2016-05-16 16:12:201255검색
JS 함수의 동적 로딩
일반적으로 js 파일을 로드해야 하는 경우 다음 코드와 유사한 스크립트 태그를 사용합니다.
그러나 스크립트 태그를 직접 사용하여 js 파일을 로드하면 다음과 같은 단점이 있습니다.
1. 엄격한 읽기 순서. 브라우저는 웹 페이지에 <script> 나타나는 순서대로 Javascript 파일을 읽어서 즉시 실행하므로 여러 파일이 서로 의존하는 경우 종속성이 가장 적은 파일을 먼저 배치하고 가장 큰 종속성이 먼저 배치되어야 합니다. 파일은 끝에 배치되어야 합니다. 그렇지 않으면 코드에서 오류가 보고됩니다. </p>
<p>2. 성능 문제. 브라우저는 "동기 모드"를 사용하여 <script> 태그를 로드합니다. 즉, 페이지가 "차단"되어 후속 HTML 코드를 실행하기 전에 JavaScript 파일이 로드될 때까지 기다립니다. 여러 개의 <script> 태그가 있는 경우 브라우저는 이를 동시에 읽을 수 없습니다. 다른 태그를 읽기 전에 먼저 읽어야 하므로 읽기 시간이 크게 늘어나고 페이지 응답이 느려집니다. </p>
<p>이때 JS를 동적으로 로딩하는 것을 생각해 보겠습니다. JS를 동적으로 로딩하는 구현 방법은 다음 코드와 비슷합니다</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="44841" class="copybut" id="copybut44841" onclick="doCopy('code44841')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code44841">
<br>
/*<br>
*@desc: 동적으로 스크립트 추가<br>
*@param src: 로드된 js 파일의 주소 <br>
*@param 콜백: js 파일 로딩 후 호출해야 하는 콜백 함수<br>
*@데모:<br>
addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {<br>
Alert('Ctrip 서버의 lab.js가 로드되었습니다.')<br>
});<br>
*/<br>
함수 addDynamicJS(src, 콜백) {<br>
var script = document.createElement("script");<br>
script.setAttribute("type", "text/javascript");<br>
script.src = src[i];<br>
Script.charset = 'gb2312';<br>
Document.body.appendChild(스크립트);<br>
If (콜백 != 정의되지 않음) {<br>
script.onload = 함수 () {<br>
콜백();<br>
}<br>
}<br>
}<br>
</div>
<p>이로 인해 페이지 차단이 발생하지는 않지만 또 다른 문제가 발생합니다. 이렇게 로드된 Javascript 파일은 원래 DOM 구조에 있지 않으므로 DOM 준비(DOMContentLoaded) 이벤트 및 window.onload에 지정된 콜백 함수가 있습니다. 이벤트에는 영향을 미치지 않습니다. </p>
<p>이번에는 JS 로딩 문제를 효과적으로 관리하기 위해 일부 외부 함수 라이브러리를 사용하는 것을 고려해 보겠습니다. </p>
<p><strong>본론으로 들어가 LAB.js에 대해 이야기해 보겠습니다</strong></p>
<p>LAB.js</p>
<p>JS를 로드하기 위해 전통적인 방법을 사용한다면, 작성되는 코드는 일반적으로 아래 코드와 같습니다. <br>
</p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="22815" class="copybut" id="copybut22815" onclick="doCopy('code22815')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code22815">
<br>
<script src="aaa.js"></script>