지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 고성능 JavaScript 스크립트 로딩 및 실행_javascript 기술 작성

고성능 JavaScript 스크립트 로딩 및 실행_javascript 기술 작성

WBOY
풀어 주다： 2016-05-16 18:29:15
원래의
790명이 탐색했습니다.

스크립트는 HTML 페이지의 헤드나 본문에 배치할 수 있습니다.
스크립트를 본문에 넣으세요. 브라우저가 <script> 태그를 만나면 브라우저는 스크립트가 텍스트를 삽입할지 html 태그를 삽입할지 알 수 없으므로 브라우저는 html 페이지 분석을 중단하고 스크립트를 실행합니다. src를 사용하여 스크립트를 추가할 때 브라우저는 동일한 작업을 수행합니다. 스크립트가 처리되는 동안 페이지 렌더링 및 사용자 상호 작용이 완전히 차단됩니다. 스크립트 다운로드 및 실행은 페이지를 렌더링하는 데 사용되는 이미지와 같은 다른 리소스의 다운로드를 차단합니다. (많은 브라우저가 스크립트 병렬 다운로드 기술을 구현했지만 이 문제는 아직 해결되지 않았습니다.) <br>스크립트 위치<br>위의 이유로 인해 스크립트는 항상 페이지 하단에 배치되어야 합니다. , 즉 </body> <br><strong>간단한 예:</strong> <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="780" class="copybut" id="copybut780" onclick="doCopy('code780')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code780"> <br><html> <br><head> <br><title>스크립트 예</title><br><link rel="stylesheet" type="text/css" href=" styles.css "> <br></head> <br><body> <br><p>Hello world!</p> <br><script type="text/javascript" src ="file1 .js"></script>





병합 스크립트
 스크립트 다운로드는 페이지 렌더링을 차단하므로 스크립트가 인라인인지 외부인지에 관계없이 페이지의 <script> 태그 사용을 줄여야 합니다. 외부 스크립트를 처리할 때 상황은 특별합니다. 요청을 설정하는 데 많은 시간이 걸리기 때문에 브라우저가 100kb 스크립트를 다운로드하는 데 걸리는 시간은 25kb 스크립트 4개보다 훨씬 적습니다. 따라서 페이지에서는 외부 스크립트에 대한 참조를 최소화해야 합니다. <br>비차단 스크립트<br>비밀은 페이지 로딩이 완료된 후, 즉 윈도우 객체의 onload 이벤트가 발생하기 전에 스크립트를 로딩하는 것입니다. 이를 구현하는 방법은 여러 가지가 있습니다. <br><strong>1. defer</strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="92494" class="copybut" id="copybut92494" onclick="doCopy('code92494')"><u>를 사용하여 코드를 복사합니다. </u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code92494"> <br> <br><title>스크립트 연기 예<br> <body> <br><script defer> <BR></script>
alert("script");
<script> <BR>window.onload = function(){ <BR>alert("load") <BR>}; ;/body> <BR></html> <BR><BR> <BR>페이지 팝업 상자가 나타나는 순서: 스크립트/지연/로드만 지원된다는 점입니다. IE4 및 FF3.5. <BR>비차단 스크립트(계속) <BR><BR>2. 동적 스크립트 요소 <BR> <BR><script> 스크립트 파일 참조를 동적으로 추가하는 DOM 메소드입니다. 방법은 다음과 같습니다. </script>



코드 복사

코드는 다음과 같습니다.
var script = document.createElement("script "); script.type = "text/javascript"; script.src = "file1.js" document.getElementsByTagName("head")[0]. appendChild(script);
이 태그가 html에 추가되면 스크립트 파일 다운로드가 시작됩니다. 이 방법의 한 가지 특징은 파일 다운로드 및 실행이 html 페이지의 다른 부분 처리를 차단하지 않는다는 것입니다. 일반적으로 이러한 스크립트를 보다 에 배치하는 것이 더 안전합니다. 특히 파일에 포함된 코드가 페이지의 로드 이벤트에서 실행되어야 하는 경우 더욱 그렇습니다. 본문의 내용이 완전히 로드되지 않은 경우 IE에서는 "작업 금지" 오류도 표시됩니다.
스크립트 파일이 다운로드되면 즉시 스크립트가 실행됩니다(FF와 Opera는 동일한 방식으로 추가된 이전 스크립트의 실행을 기다립니다). 스크립트가 자체적으로 실행될 때는 괜찮습니다. 그러나 스크립트에 페이지의 다른 스크립트에서 사용하는 인터페이스가 포함되어 있는 경우 해당 스크립트가 로드되어 사용 가능한지 확인해야 합니다. 다행히 Firefox, Opera, Chrome 및 Safari 3는 스크립트 태그의 src 값을 얻은 후 로드 이벤트를 트리거합니다.



코드 복사


코드는 다음과 같습니다.

var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3
script.onload = function(){
alert("스크립트가 로드되었습니다!");
script.src = "file1.js"
document.getElementsByTagName("head")[0].appendChild (스크립트);

IE는 또 다른 솔루션 준비 상태 변경 이벤트를 제공합니다.
스크립트 파일 다운로드 상태에 따라 ReadyState 값은 다음과 같습니다.
"uninitialized"
Default state
"loading"
Start downloading
"loaded "
다운로드 완료
"대화형"
다운로드가 완료되었지만 모두 사용할 수는 없음
"완료"
모든 데이터 사용 가능
IE 구현:

코드 복사 코드는 다음과 같습니다.
var script = document.createElement("script")
script.type = " text/javascript" ;
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("스크립트가 로드되었습니다.");
}
};
script.src = "file1.js"
document.getElementsByTagName("head")[0].appendChild (script)

합성 후 일반적인 방법은 다음과 같습니다.

코드를 복사합니다 코드는 다음과 같습니다:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript"
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("head")[0].appendChild(script);
}
loadScript() 함수 다음과 같이 사용됩니다:
loadScript ("file1.js", function(){
alert("파일이 로드되었습니다!");
})


이제 이 방법으로 스크립트를 동적으로 로드할 수 있지만 여전히 이러한 파일이 다운로드되는 순서를 고려해야 합니다. 주류 브라우저 중 FF와 Opera만이 스크립트 실행 순서가 사용자가 지정한 다운로드 순서와 일치함을 보장합니다. 다른 브라우저는 서버에서 반환된 순서대로 스크립트 파일을 실행합니다. 그럼에도 불구하고 여전히 대체 솔루션이 있습니다.


코드 복사 코드는 다음과 같습니다.
loadScript ("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("모두 files are beenloaded!");
});
});
});


이런 방식으로 스크립트 파일의 다운로드 순서가 file1을 엄격하게 따르도록 할 수 있습니다. -file2-file3 방식.
참고: 위 콘텐츠의 출처는 다음과 같습니다. <고성능 JavaScript>작성: Nicholas C. Zakas
관련 라벨：
javascript 고성능
원천：php.cn
이전 기사：xheditor와 verifyplug-in_jquery 간의 충돌에 대한 솔루션 다음 기사：JavaScript 브라우저 브라우저 유형 및 버전 판단 code_javascript 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
사이트에 CSS 스타일이 적용되지 않음 Bootstrap5를 사용하여 웹사이트를 만들고 있는데 index.css 속성이 index.html에 적용되지 않습니다. 서비스 카드 위로 마우스를 가져가면 배경...
에서 2024-04-06 17:12:23
0
1
336
ASP 클래식 코드를 MYSQL 데이터베이스에 문자열로 저장할 가능성 ASP 클래식 코드를 MySQL 데이터베이스에 저장하고 끌어올 때 코드를 실행하도록 할 수 있습니까? 예를 들어 변수 이름을 문자열에 저장하고 표시하기 전에 AS...
에서 2024-04-06 13:38:43
0
1
358
높이가 예상한 것과 다른 CSS 그리드에 문제가 있습니다. 어떤 실수를 저지를 수 있습니까? 저는 현재 CSS 그리드를 배우고 있는데 이 카드를 그리드로 나누어서 만들어 달라는 요청을 받았습니다. 제가 만들고 싶은 그리드의 사진이 첨부되어 있습니다. 실제...
에서 2024-04-06 12:52:14
0
1
339
Vuetify v-card는 v-col에서 가능한 모든 높이에 맞습니다. vue와 vuetify를 사용하여 로그인/등록 페이지를 만들고 있습니다. 아래에 코드를 넣었습니다(저는 이탈리아 사람이기 때문에 텍스트는 이탈리아어로 되어 있지만...
에서 2024-04-06 10:29:26
0
1
406
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿