이 기사에서는 성능을 향상시키기위한 JavaScript의 일반적인 기술에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
1. 범위에주의를 기울이십시오
스코프 체인의 스코프 수가 증가함에 따라 현재 범위를 벗어난 변수에 액세스하는 시간도 증가합니다. 글로벌 변수에 액세스하는 것은 스코프 체인을 가로지 않아야하기 때문에 로컬 변수에 액세스하는 것보다 항상 느립니다.
1). 로컬 변수로 함수에서 여러 번 사용될 글로벌 객체를 저장하기 위해 전 세계 검색을 피하는 것이 항상 옳습니다.
2). 자체 범위를 생성 한 명령문으로 피하는 것을 피하여 코드가 실행되는 스코프 체인의 길이를 증가시킵니다.
2. 올바른 방법을 선택하십시오
성능 문제의 일부는 문제를 해결하는 데 사용되는 알고리즘 또는 메소드와 관련이 있습니다.
1). 불필요한 속성 검색을 피하십시오
컴퓨터 과학에서 알고리즘의 복잡성은 O 기호로 표시됩니다. 가장 단순하고 가장 빠른 알고리즘은 상수 값, 즉 O (1)입니다. 그 후, 알고리즘은 점점 더 복잡해지고 실행하는 데 시간이 오래 걸립니다. 일반적인 JavaScript 알고리즘 유형은 다음과 같습니다.
상수 : 값이 몇 개 있는지에 관계없이 실행 시간은 일정합니다. 일반적으로 간단한 값과 변수에 저장된 값을 나타냅니다.
로그 : 총 실행 시간은 값 수와 관련이 있지만 알고리즘을 완료하기 위해 각 값을 얻을 필요는 없습니다. 예 : 이진 검색
선형 : 총 실행 시간은 값 수와 직접 관련이 있습니다. 예를 들어 : 배열의 모든 요소를 반복합니다
정사각형 : 총 실행 시간은 값 수와 관련이 있으며 각 값은 최소 N 회수를 얻어야합니다. 예를 들면 다음과 같습니다
CUBE : 총 실행 시간은 값 수와 관련이 있으며 각 값은 n 이상의 제곱을 얻어야합니다.
변수와 배열 사용은 객체의 속성에 액세스하는 것보다 효율적입니다. 해당 이름의 속성을 프로토 타입 체인에서 검색해야하기 때문에 객체의 모든 속성 검색은 변수 또는 배열에 액세스하는 것보다 시간이 오래 걸립니다.
일반적으로 알고리즘의 복잡성이 줄어들 수있는 한 가능한 한 최소화해야합니다. 가능한 많은 로컬 변수를 사용하여 속성 조회를 값 조회로 대체하십시오. 또한 디지털화 된 배열 위치로 액세스하거나 명명 된 속성 (예 : Nodelist Objects)을 사용하면 배열 위치를 사용하십시오.
2). 루프 최적화
에이. 손상 반복 많은 경우, 최대 값에서 시작하여 루프에서 지속적으로 손상되는 반복자가 더 효율적입니다.
비. 단순화 된 종단 조건 각 사이클 프로세스는 종단 조건을 계산하기 때문에 가능한 빨리 보장해야합니다.
기음. 단순화 된 루프 본체 루프 본체가 가장 성능이 우수하므로 최대 범위까지 최적화되어 있는지 확인하십시오. 루프에서 쉽게 제거 할 수있는 집중 계산이 없도록하십시오.
디. 사후 테스트 루프에서 가장 일반적으로 사용 및 루프는 사전 테스트 루프입니다. DO-와 같은 사후 테스트 루프는 조건 계산의 초기 종료를 피할 수 있으므로 더 빠릅니다.
3). 루프 수가 결정되면 루프를 늘려서 루프를 제거하고 여러 기능 호출을 사용하는 것이 더 빠릅니다. 예를 들어, 유명한 더프 장치
4). 이중 설명을 피하십시오
JavaScript 코드가 JavaScript를 구문 분석하려면 이중 상승 페널티가 있습니다. 다음 예제 :
eval ( "Alert ( 'Hello World!')"); // 일부 코드는 값을 평가합니다
결정된:
경고 ( 'Hello World');
var sayshi = new 함수 ( "Alert ( 'Hello World!')");
결정된:
var sayshi = function () {alert ( "Hellow World! ');};settimeout ( "Alert ( 'Hellow World!')", 500);
결정된:
settimeout (function) ({alert ( 'Hellow World!');}, 500);5). 다른 방법
기본 방법이 더 빠릅니다. 가능할 때마다 JavaScript에서 직접 다시 작성하는 대신 기본 방법을 사용하십시오. 기본 방법은 C/C ++와 같은 컴파일 된 언어로 작성되므로 JavaScript보다 훨씬 빠릅니다. JavaScript에서 가장 쉽게 잊혀진 것은 수학 대상에서 찾을 수있는 복잡한 수학 연산입니다. 이러한 방법은 사인 및 코사인과 같은 자바 스크립트로 작성된 다른 방법보다 훨씬 빠릅니다.
스위치 문이 더 빠릅니다. 단일 스위치 문으로 변환 할 수있는 복잡한 if -ELSE 문이 있으면 더 빠른 코드를 얻을 수 있습니다. 또한 스위치 명령문을 더 최적화하기 위해 가장 가능성이 낮은 순서로 사례 문을 정리할 수도 있습니다.
비트 연산자가 더 빠릅니다. 수학 연산이 수행되면 부울 또는 산술 작업보다 비트 작업이 더 빠릅니다. BIT 작업의 선택적 변환은 복잡한 계산의 성능을 크게 향상시킬 수 있습니다. 예를 들어, Modulo, Logic 및 Sum Logic은 비트 작업을 사용하여 대체 할 수 있습니다.
3. 진술 수를 최소화하십시오
1). 다중 변수 선언
좋다:
// 4 문장 --- var count asturn = 5; var color = "blue"; var value = [1,2,3]; var now = new date ();
최적화 :
var count = 5, color = "blue", value = [1,2,3], noiw = new date ();
이 최적화는 대부분의 경우 수행하기가 매우 쉽고 단일 변수 선언보다 훨씬 빠릅니다.
2). 반복 값을 삽입하십시오
좋다:
var name = value [i]; i ++;
최적화 :
var name = 값 [i ++];
3). 배열 및 물체 리터럴을 사용하십시오
좋다:
var value = new Array (); ---> var 값 = [];
var obj = new Object (); ---> var obj = {};
4. DOM 상호 작용 최적화
1). 현장 업데이트를 최소화하십시오
DOM 부품에 액세스 해야하는 경우 표시된 페이지의 일부가 표시되면 라이브 업데이트를 수행합니다. 라이브 업데이트라고하는 이유는 페이지를 사용자의 디스플레이로 즉시 (현장) 업데이트해야하기 때문입니다. 단일 문자를 삽입하든 전체 클립을 제거하든 브라우저가 수많은 크기를 다시 계산하여 업데이트해야하기 때문에 성능 페널티가 있습니다.
예:
var list = document.getElementById ( "mylist"); for (var i = 0; i <10; i ++) {var item = document.createElement ( "li"); List.AppendChild (항목); item.appendChild (document.createtextnode ( "item"+i));}이를 위해서는 10 개의 프로젝트가 추가 되며이 작업에는 총 20 개의 현장 업데이트가 필요합니다. 다음은 문서 조각 생성 방법을 개선하는 것입니다.
var list = document.getElementById ( "myList"); var fragment = document.createdOcumentFragment (); for (var i = 0; i <10; i ++) {fragment.appendChild (Item); item.appendChild (document.creatextNode ( "item"+i));} list.appendChlid (조각);이 예에는 모든 프로젝트가 생성 된 후에 발생하는 실시간 업데이트가 하나뿐입니다. 문서 조각은 새로 생성 된 프로젝트를 배치하기위한 임시 자리 표시 자로 사용됩니다. 그런 다음 부록 ()을 사용하여 모든 항목을 목록에 추가하십시오. 문서 조각에 부록 ()이 전달되면 조각의 하위 노드 만 대상에 추가되며 조각 자체가 추가되지 않습니다.
DOM을 업데이트해야 할 경우 문서 조각화를 사용하여 DOM 구조를 구축 한 다음 기존 문서에 추가하십시오.
2). InnerHtml을 사용하십시오
페이지에서 DOM 노드를 생성하는 두 가지 방법이 있습니다 : createElement (), AppendChild ()와 같은 DOM 메소드를 사용하고 작은 DOM 변경에 InnerHTML을 사용하면 효율이 비슷합니다. 큰 DOM 변경의 경우, InnerHTML을 사용하는 것이 표준 DOM 방법을 사용하여 동일한 DOM 구조를 생성하는 것보다 훨씬 빠릅니다. 마찬가지로, 한 번에 InnerHTML을 사용하는 것이 InnerHTML을 여러 번 사용하는 것보다 훨씬 빠릅니다.
3). 이벤트 프록시 사용 (단순, 생략)
4). Nodelist에게주의를 기울이십시오
NODELIST에 대한 액세스 수를 최소화하면 스크립트 성능을 크게 향상시킬 수 있습니다.
다음이 발생하면 Nodelist 객체가 반환됩니다.
에이. getElementsByTagName ()을 호출하십시오
비. 요소의 Childnodes 속성을 얻으십시오
기음. 요소의 속성 속성을 가져옵니다
디. Document.Forms, Document.images 등과 같은 특수 컬렉션에 액세스했습니다.
NODELIST 객체를 사용할 때 합리적인 사용이 코드의 실행 속도를 크게 향상시킬 것임을 이해해야합니다.
앞에서 도입 된 기능 조절 기능 도 매우 중요한 측면입니다. 특히 다중 루프가 매우 성능이 저렴할 때이 방법은 매우 유용합니다.
추신 : JavaScript 압축의 경우 코드 크기를 줄이는 것도 JavaScript 성능을 향상시키는 효과적인 방법입니다. 다음은 매우 실용적인 압축 도구입니다.
JavaScript 압축/서식/암호화 도구 :
http://tools.vevb.com/code/jscompress
JSMIN Online JS 압축 도구 :
http://tools.vevb.com/code/jsmincompress
JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.