브라우저에서 JavaScript의 성능은 프론트 엔드 개발자가 직면 해야하는 가장 중요한 유용성 문제라고 할 수 있습니다.
Yahoo의 YSLOW23 규칙 중 하나는 JS를 바닥에 배치하는 것입니다. 그 이유는 실제로 대부분의 브라우저는 단일 프로세스를 사용하여 UI와 같은 여러 작업을 처리하고 JavaScript 실행을 업데이트하고 동시에 하나의 작업 만 실행되기 때문입니다. JavaScript가 얼마나 오래 실행되는지, 브라우저가 사용자 상호 작용에 응답하기 전에 얼마나 오래 기다릴까요?
기본 관점에서, 이는 <cript> 태그의 모양으로 인해 스크립트 구문 분석 및 실행으로 인해 전체 페이지가 기다립니다. 실제 JavaScript 코드가 관련이없는 외부 파일에 상환되는지 또는 포함되어 있는지 여부에 관계없이 페이지 다운로드 및 구문 분석 프로세스를 중지하고 스크립트가 이러한 처리를 완료 할 때까지 기다려야합니다. 스크립트가 런타임 중에 페이지 컨텐츠를 수정할 수 있기 때문에 페이지 수명주기의 필수 부분입니다. 일반적인 예는 document.write () 함수입니다.
코드 사본은 다음과 같습니다.
<html>
<헤드>
<title> 스크립트 예 </title>
</head>
<body>
<p>
<script type = "text/javaScript">
document.write ( "날짜는" + (new date ()). todatestring ());
</스크립트>
</p>
</body>
</html>
위의 HTML 페이지에서 브라우저에서 <cript> 태그가 발생하면 javaScript가 <P> 태그에 컨텐츠를 추가하는지 여부를 예측할 수 없습니다. 따라서 브라우저가 중지 되고이 JavaScript 코드를 실행 한 다음 페이지를 계속 구문 분석하고 번역합니다. SRC 속성을 사용하여 JavaScript를로드 할 때도 마찬가지입니다. 브라우저는 먼저 외부 파일의 코드를 다운로드 한 다음 시간이 걸린 다음이 코드를 구문 분석하고 실행해야합니다. 이 과정에서 페이지 구문 분석 및 사용자 상호 작용이 완전히 차단됩니다.
스크립트는 다른 페이지 리소스의 다운로드 프로세스를 차단하기 때문에 권장되는 방법은 다음과 같습니다. 전체 페이지 다운로드에 대한 영향을 최소화하기 위해 <body> 태그의 하단에 가깝게 모든 <cript> 태그를 배치하십시오. 예를 들어:
코드 사본은 다음과 같습니다.
<html>
<헤드>
<title> 스크립트 예 </title>
<link rel = "Stylesheet"type = "text/css"href = "styles.css">
</head>
<body>
<p> 안녕하세요 세계! </p>
<-권장 스크립트 포지셔닝의 예->
<script type = "text/javaScript"src = "file1.js"> </script>
<script type = "text/javaScript"src = "file2.js"> </script>
<script type = "text/javaScript"src = "file3.js"> </script>
</body>
</html>
이 코드는 권장 <Script> 태그가 HTML 파일에있는 위치를 보여줍니다. 스크립트 다운로드가 서로 차단되었지만 페이지가 사용자 앞에서 다운로드 및 표시되었으며 페이지를 입력하는 속도는 너무 느리지 않습니다. 이것이 JS를 바닥에두기 위해 위에서 언급 한 내용입니다.
또한 야후! "CDN (Content Delivery Network)을 통해 구현되는"Yahoo! Yui "Library의"Federal Hands "를 만듭니다. 모든 웹 사이트는"Federal Handle "URL을 사용하여 Yui 파일 패키지에 포함되는 파일을 표시 할 수 있습니다. 예를 들어 다음 URL에는 두 파일이 포함됩니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"src = "http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event/event-min.js"> </script>
이 URL은 버전 2.7.0에서 Yahoo-Min.js 및 event-min.js 파일을 호출합니다. 이 파일은 서버의 두 개의 별도 파일이지만 서버 가이 URL 요청을 수신하면 두 파일이 함께 병합되어 클라이언트로 반환됩니다. 이런 식으로 두 개의 <cript> 태그가 더 이상 필요하지 않습니다 (각 태그에 대해 하나의 파일이로드 됨), 하나의 <cript> 태그가로드 될 수 있습니다. 이것은 HTML 페이지에 여러 외부 JavaScript를 포함시키는 가장 좋은 방법입니다.
귀족 스크립트
위는 페이지의 초기 상태에서 여러 자바 스크립트 스크립트를로드하는 가장 좋은 방법입니다. JavaScript는 HTTP 요청 및 인터페이스 새로 고침과 같은 특정 브라우저 처리 프로세스를 차단하는 경향이 있으며, 이는 개발자가 직면 한 가장 중요한 성능 문제입니다. JavaScript 파일을 짧게 유지하고 HTTP 요청 수를 제한하는 것은 반응 형 웹 응용 프로그램을 만드는 첫 번째 단계 일뿐입니다.
그러나 많은 JS 코드가있는 대형 웹 페이지와 같은 소스 코드를 짧게 유지하는 것이 항상 최선의 선택은 아닙니다. 따라서 비 차단 스크립트가 시작되었으며, 우리가 필요로하는 것은 점차 페이지에 JavaScript를 추가하는 것입니다. 이는 브라우저를 어느 정도 차단하지 않습니다.
스크립트를 차단하지 않는 핵심은 페이지가로드 된 후 JavaScript 소스 코드를로드하는 것입니다. 즉, Window의로드 이벤트가 발행 된 후 코드 다운로드가 시작됩니다.
관련 설명 :
창의로드 이벤트는 페이지가로드 된 후에 만 한 번만 해고됩니다.
Window.onload = function () {} 웹 페이지의 모든 콘텐츠가로드 될 때까지 기다려야합니다 (그림과 같은 모든 관련 요소 파일 포함)이 실행될 예정입니다. 즉, JavaScript는 현재 페이지의 모든 요소에 액세스 할 수 있습니다.
다음 방법은 다음과 같습니다.
연기 된 스크립트는 연기 된 스크립트를
html4는 <cript> 태그 : DEFER에 대한 확장 속성을 정의합니다.
이 지연 속성은 요소에 포함 된 스크립트가 DOM을 수정하려고하지 않으므로 나중에 코드를 실행할 수 있음을 나타냅니다. DEFER 속성은 Internet Explorer 4+ 및 Firefox 3.5+에서만 지원되며 이상적인 크로스 브라우저 솔루션이 아닙니다. 다른 브라우저에서는 연기 속성이 무시됩니다. 따라서 <cript> 태그는 일반 기본 방식으로 처리되므로 막힘이 발생합니다. 다양한 주류 브라우저에서 지원하는 경우 여전히 효과적인 솔루션입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"src = "file1.js"defer> </script>
DEFER 속성이있는 <cript> 태그는 문서의 어느 곳에도 배치 할 수 있으며 DOM 하중이 될 때까지 구문 분석 될 때 (온부하 이벤트 핸들이 호출되기 전에) 다운로드를 시작합니다. 연기 자바 스크립트 파일이 다운로드되면 브라우저의 다른 처리 프로세스를 차단하지 않으므로이 파일은 다른 리소스와 병렬로 다운로드 할 수 있습니다.
다음 코드를 사용하여 브라우저가 DEFER 속성을 지원하는지 여부를 테스트 할 수 있습니다.
코드 사본은 다음과 같습니다.
<html>
<헤드>
<title> 스크립트 연기 예 </title>
</head>
<body>
<Script Defer> Alert ( "Defer"); </script>
<cript> Alert ( "스크립트"); </스크립트>
<cript> window.onload = function () {alert ( "load");}; </스크립트>
</body>
</html>
브라우저가 연기를 지원하지 않으면 팝업 대화 상자의 순서는 "연기", "스크립트"및 "로드"입니다.
브라우저가 연기를 지원하면 팝업 대화 상자의 순서는 "스크립트", "로드", "연기"입니다.
동적 스크립트 요소
DOM은 JavaScript를 사용하여 HTML의 거의 모든 문서 컨텐츠를 동적으로 생성 할 수 있으며 표준 DOM을 통해 새로운 <cript> 요소를 매우 쉽게 만들 수 있습니다.
코드 사본은 다음과 같습니다.
1 var script = document.createElement ( "스크립트");
2 script.type = "text/javaScript";
3 script.src = "file1.js";
4 Document.body.appendChild (스크립트);
새로운 <cript> 요소는 file1.js 소스 파일을로드합니다. 요소가 페이지에 추가 된 직후이 파일을 다운로드하십시오. 이 기술의 핵심 요점은 다운로드가 시작 되더라도 파일의 다운로드 및 실행이 다른 페이지 처리를 차단하지 않는다는 것입니다.
동적 스크립트 노드를 사용하여 파일을 다운로드하면 반환 된 코드는 일반적으로 즉시 실행됩니다 (Firefox 및 Opera 제외는 모든 이전 동적 스크립트 노드가 실행될 때까지 기다립니다).
대부분의 경우 JavaScript 파일의 동적 다운로드를 구현하기 위해 함수를 호출하고자합니다. 다음 기능 캡슐화는 표준 구현 및 IE 구현을 구현합니다.
코드 사본은 다음과 같습니다.
함수로드 스크립트 (URL, 콜백) {
var script = document.createElement ( "스크립트");
script.type = "text/javaScript";
if (script.readystate) {// IE
script.onreadyStateChange = function () {
if (script.readystate == "로드"|| script.readystate == "완료") {
script.onreadyStateChange = null;
콜백 ();
}
};
}
else {// 다른 사람
script.onload = function () {callback ();
};
}
script.src = url;
document.getElementsByTagName ( "Head") [0] .AppendChild (스크립트);
}
loadScript ( "file1.js", function () {// 호출
ALERT ( "파일이로드되었습니다!");
});
이 함수는 JavaScript 파일의 URL과 JavaScript 수신이 완료 될 때 트리거되는 콜백 함수의 두 매개 변수를 허용합니다. 속성 점검은 모니터링 할 이벤트를 결정하는 데 사용됩니다. 마지막 단계는 SRC 속성을하고 JavaScript 파일을 헤드에 추가하는 것입니다.
동적 스크립트 로딩은 브로우 브라우저가 될 수 있고 사용하기 쉽기 때문에 비 차단 JavaScript 다운로드에서 가장 일반적으로 사용되는 패턴입니다.
xmlhttprequest 스크립트 주입 xhr 스크립트 주입
블로킹하지 않는 방식으로 스크립트를 얻는 또 다른 방법은 XHR (XHR) 객체를 사용하여 스크립트를 페이지에 주입하는 것입니다. 이 기술은 먼저 XHR 객체를 생성 한 다음 JavaScript 파일을 다운로드 한 다음 동적 <Script> 요소로 페이지에 JavaScript 코드를 주입합니다. 데모를보십시오 :
코드 사본은 다음과 같습니다.
var xhr = 새로운 xmlhttprequest ();
xhr.open ( "get", "file1.js", true);
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
if (xhr.status> = 200 && xhr.status <300 || xhr.status == 304) {// HTTP 상태 코드를 확인하십시오.
var script = document.createElement ( "스크립트");
script.type = "text/javaScript";
script.text = xhr.responsetext;
document.body.appendChild (스크립트);
}
}
};
xhr.send (null);
이 코드는 파일 가져 오기 요청을 서버로 보내 File1.js를 가져옵니다. OnreadyStateChange 이벤트 핸들러는 ReadyState가 4인지 확인한 다음 HTTP 상태 코드가 유효한지 확인합니다 (200은 클라이언트 요청이 성공했음을 확인하고 2xx는 유효한 응답을 의미하며 304는 캐시 된 응답을 의미합니다). 유효한 응답이 수신되면 새 <cript> 요소가 생성되고 텍스트 속성이 서버에서 수신 된 대응 문자열로 설정됩니다. 그렇게하면 실제로 인라인 코드가있는 <cript> 요소가 생성되며 새로운 <cript> 요소가 문서에 추가되면 코드가 실행되고 사용할 준비가됩니다.
이 방법의 장점은 호환성이 우수하며 즉시 실행되지 않은 JavaScript 코드를 다운로드 할 수 있다는 것입니다. 코드가 <cript> 태그 외부에서 반환되므로 다운로드 후 자동으로 실행되지 않으므로 실행을 연기 할 수 있습니다.
이 방법의 결정은 브라우저 상동 제한이 적용됩니다. JavaScript 파일은 페이지와 동일한 도메인에 배치해야하며 CDN (Content Delivery Network)에서 다운로드 할 수 없습니다. 이러한 이유로 큰 웹 페이지는 일반적으로 XHR 스크립트 주입 기술을 사용하지 않습니다.
권장되지 않은 노블 로킹 패턴 권장 노블 로킹 패턴
많은 양의 JavaScript를 페이지에로드하는 권장 방법은 두 단계로 나뉩니다.
첫 번째 단계에는 자바 스크립트를 동적으로로드하는 데 필요한 코드가 포함되어 있으며 페이지 초기화에 필요한 JavaScript를 제외한 부분을로드합니다. 코드 의이 부분은 가능한 한 작으며 loadScript () 함수 만 포함 할 수 있습니다. 다운로드하고 매우 빠르게 실행되며 페이지에 많은 간섭이 발생하지 않습니다.
두 번째 단계는 초기 코드가 준비된 후 나머지 JavaScript를로드하는 데 사용하는 것입니다.
예를 들어:
코드 사본은 다음과 같습니다.
1 <script type = "text/javaScript"src = "loader.js">
2 </script> <script type = "text/javaScript">
3 loadScript ( "the-rest.js", function () {
4 Application.init ();
5});
6
7 </script>
본체의 가까운 태그 </body> 앞에이 코드를 배치하십시오. 이를 수행하는 이점은 먼저 다른 페이지의 다른 페이지에 영향을 미치지 않고 JavaScript가 실행되도록합니다. 둘째, JavaScript 파일의 두 번째 부분이 다운로드되면 응용 프로그램에 필요한 모든 DOM이 생성되어 액세스 할 준비가되었으며 추가 이벤트 처리 (예 : Window.onload)를 사용하여 페이지가 준비되었는지 확인하십시오.
또 다른 옵션은로드 스크립트 () 함수를 페이지에 직접 포함시켜 HTTP 요청의 오버 헤드를 줄일 수 있습니다. 예를 들어:
코드 사본은 다음과 같습니다.
1 <script type = "text/javaScript">
함수로드 스크립트 (URL, 콜백) {
var script = document.createElement ( "스크립트");
script.type = "text/javaScript";
if (script.readystate) {// script.onreadyStateChange = function () {
if (script.readystate == "로드"|| script.readystate == "완료") {
script.onreadyStateChange = null;
콜백 ();
}
};
} else {// 기타
script.onload = function () {
콜백 ();
};
}
script.src = url;
document.getElementsByTagName ( "Head") [0] .AppendChild (스크립트);
}
loadscript ( "the-rest.js", function () {
application.init ();
});
</스크립트>
페이지 초기화 코드가 다운로드되면 LoadScript () 함수를 사용하여 페이지에서 필요한 추가 기능 기능을로드 할 수도 있습니다.
공통 도구를 소개하는 Ryan Grove of Yahoo! 검색은 Lazyload 라이브러리를 만들었습니다 (http://github.com/rgrove/lazyload/ 참조). Lazyload는 강력한 loadscript () 함수입니다. Lazyload는 스케일링 후 약 1.5kb 만 있습니다. 사용의 예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"src = "lazyload-min.js"> </script>
<script type = "text/javaScript">
lazyload.js ( "the-rest.js", function () {
application.init ();
});
</스크립트>
요약
1. 모든 <cript> 태그를 페이지 하단에 닫기 태그 </body>에 가깝게 배치하십시오. 이 방법은 스크립트가 실행되기 전에 페이지가 구문 분석되도록합니다.
2. 스크립트를 그룹으로 포장하십시오. 페이지의 <cript> 태그가 적을수록 페이지가 더 빨리로드되고 더 빨리 응답됩니다. 외부 스크립트 파일과 인라인 코드 모두에 해당됩니다.
3. 비 차단 방법을 사용하여 JavaScript를 다운로드하는 몇 가지 방법이 있습니다.
1). <Script> 태그에 연기 속성을 추가하십시오
2). <cript> 요소를 동적으로 생성하고 코드를 다운로드하고 실행하는 데 사용하십시오.
3). XHR 객체를 사용하여 코드를 다운로드하여 페이지에 주입하십시오.
위의 전략을 통해 JavaScript 코드를 사용하는 네티즌의 실제 성능을 크게 향상시킬 수 있습니다.
참조 도서 "고성능 JavaScript".