신선하고 고유 한 사용자 경험을 제공하기 위해 많은 웹 사이트는 JavaScript를 사용하여 디자인을 개선하고 양식을 확인하고 브라우저를 확인하고 AJAX 요청, 쿠키 작업 등을 사용하여 새로 고침이없는 동적 효과를 달성합니다. 그러나 브라우저에서 많은 양의 콘텐츠를 렌더링하려면 제대로 처리되지 않으면 웹 사이트의 성능이 급격히 떨어집니다. 따라서 JavaScript의 실행 효율성을 향상시키는 방법을 이해해야합니다.
JavaScript 기능
JavaScript에서는 사용하기 전에 기능이 사전 컴파일됩니다. 때로는 문자열이 함수 대신 사용될 수 있지만,이 JavaScript 코드는 실행할 때마다 다시 정렬되어 성능에 영향을 미칩니다.
1. 평가 예제
코드 사본은 다음과 같습니다.
평가 ( 'output = (입력 * 입력)');
// 변경하는 것이 좋습니다.
eval (new function () {output = (input * input)});
2. 설정 시간 예제
코드 사본은 다음과 같습니다.
settimeout ( "alert (1)", 1000);
// 변경하는 것이 좋습니다.
settimeout (function () {alert (1)}, 1000);
문자열 대신 함수를 매개 변수로 사용하여 새 메소드의 코드를 JavaScript 컴파일러에 의해 최적화 할 수 있는지 확인하십시오.
자바 스크립트 범위
JavaScrip 스코프 체인의 각 범위에는 여러 변수가 포함됩니다. 스코프 체인을 이해하여이를 활용할 수 있도록하는 것이 중요합니다.
코드 사본은 다음과 같습니다.
var localvar = "Global"; // 글로벌 변수
기능 test () {
var localvar = "local"; // 로컬 변수
// 로컬 변수
경고 (LocalVar);
// 글로벌 변수
경고 (this.localvar);
// 문서를 찾고 로컬 변수를 찾을 수 없으므로 전역 변수를 찾으십시오.
var pagename = document.getElementById ( "pagename");
}
로컬 변수를 사용하는 것은 글로벌 변수를 사용하는 것보다 훨씬 빠릅니다. 스코프 체인에서 더 멀어 질수록 구문 분석이 느리기 때문입니다. 다음 그림은 스코프 체인 구조를 보여줍니다.
코드에 또는 시도 캐치 문이있는 경우 아래 그림과 같이 스코프 체인이 더 복잡해집니다.
자바 스크립트 문자열
성능에 영향을 미치는 JavaScript의 함수는 String 연결입니다. 일반적으로 + 부호는 문자열의 스 플라이 싱을 구현하는 데 사용됩니다. 그러나 초기 브라우저는 이러한 연결 방법을 최적화하지 않았으므로 문자열의 지속적인 생성 및 파괴를 초래하여 JavaScript 실행 효율을 심각하게 감소 시켰습니다.
코드 사본은 다음과 같습니다.
var txt = "hello" + "" + "world";
다음으로 변경하는 것이 좋습니다.
코드 사본은 다음과 같습니다.
var o = [];
o.push ( "hello");
o.push ( "");
o.push ( "세계");
var txt = O.join ();
간단히 캡슐화합시다.
코드 사본은 다음과 같습니다.
함수 stringBuffer (str) {
var arr = [];
arr.push (str || "");
this.append = function (str) {
arr.push (str);
이것을 반환하십시오;
};
this.tostring = function () {
RETOR ARR.join ( "");
};
};
그런 다음 전화하십시오.
코드 사본은 다음과 같습니다.
var txt = new StringBuffer ();
txt.append ( "Hello");
txt.append ( "");
txt.append ( "World");
경고 (txt.toString ());
JavaScript dom 작동
HTML 문서 개체 모델 (DOM)은 HTML 문서에 액세스하고 조작하는 표준 방법을 정의합니다. 요소, 속성 및 텍스트 내용을 포함하는 노드 트리로 HTML 문서를 나타냅니다. html dom을 사용하면 JavaScript는 HTML 문서에서 모든 노드에 액세스하고 조작 할 수 있습니다.
DOM Repaint
페이지로 수정 된 DOM 객체에 DOM을 다시 그리기를 포함 할 때마다 브라우저는 페이지를 다시 렌더링합니다. 따라서 DOM 객체의 수정 수를 줄이면 JavaScript의 성능을 효과적으로 향상시킬 수 있습니다.
코드 사본은 다음과 같습니다.
for (var i = 0; i <1000; i ++) {
var elmt = document.createElement ( 'p');
elmt.innerhtml = i;
document.body.appendChild (ELMT);
}
다음으로 변경하는 것이 좋습니다.
코드 사본은 다음과 같습니다.
var html = [];
for (var i = 0; i <1000; i ++) {
html.push ( '<p>' + i + '</p>');
}
document.body.innerhtml = html.join ( '');
DOM 액세스
HTML 문서의 각 노드는 DOM을 통해 액세스 할 수 있습니다. GetElementById (), getElementsByTagName () 및 기타 메소드를 호출 할 때마다 노드가 다시 완성되어 액세스됩니다. 따라서 발견 된 DOM 노드를 캐시하면 JavaScript의 성능을 향상시킬 수 있습니다.
코드 사본은 다음과 같습니다.
document.getElementById ( "p2"). style.color = "blue";
document.getElementById ( "P2"). Style.FontFamily = "arial";
document.getElementById ( "P2"). Style.fontsize = "더 큰";
다음으로 변경하는 것이 좋습니다.
코드 사본은 다음과 같습니다.
var elmt = document.getElementById ( "P2");
elmt.style.color = "blue";
elmt.style.fontfamily = "arial";
elmt.style.fontsize = "더 큰";
Dom Traversal
DOM Traversal Child Elements는 일반적으로 Index Loop으로 다음 하위 요소를 읽습니다. 초기 브라우저 에서이 읽기 방법은 실행이 매우 효율적입니다. Nextibling 방법을 사용하면 JS에 의한 DOM의 트래버스 효율을 향상시킬 수 있습니다.
코드 사본은 다음과 같습니다.
var html = [];
var x = document.getElementsByTagName ( "P"); // 모든 노드
for (var i = 0; i <x.length; i ++) {
// TODO
}
다음으로 변경하는 것이 좋습니다.
코드 사본은 다음과 같습니다.
var html = [];
var x = document.getElementById ( "div"); // 우수 노드
var node = x.firstchild;
while (node! = null) {
// TODO
node = node.nextibling;
}
JavaScript 메모리 릴리스
웹 응용 프로그램에서 DOM 객체의 수가 증가함에 따라 메모리 소비가 커지고 커질 것입니다. 따라서 브라우저 가이 메모리를 재활용 할 수 있도록 객체에 대한 참조를 제 시간에 해제해야합니다.
DOM이 차지하는 메모리를 제거하십시오
코드 사본은 다음과 같습니다.
document.getElementById ( "test"). innerHtml = "";
DOM 요소의 내부 html을 빈 문자열로 설정하면 자식 요소가 차지하는 메모리를 제거 할 수 있습니다.
JavaScript 객체를 릴리스하십시오
코드 사본은 다음과 같습니다.
//물체:
obj = null
// 객체 속성 :
obj.property를 삭제하십시오
// 배열 요소 :
arr.splice (0,3); // 처음 3 가지 요소를 삭제합니다