자 바스 크 립 트 성능 함정 소결(실례 설명 첨부)

1.eval 또는 Function 구조 함 수 를 사용 하지 마 십시오.2.with 3 을 사용 하지 마 십시오.성능 이 중요 한 함수 에서 try-catch-finally 4 를 사용 하지 마 십시오.전역 변 수 를 사용 하지 마 십시오.문자열 9.대상 에서 필요 하지 않 은 DOM 을 사용 하지 않도록 10.가장 뚜렷 한 목표 속 도 를 참조 하고 역할 도 메 인 체인 을 최소 화 합 니 다.11.스 크 립 트 에서 설명 을 적 게 사용 해 보십시오.긴 변수 이름 12 를 사용 하지 마 십시오.현재 역할 영역 에 응용 되 는 외부 변 수 를 저장 합 니 다.13.변수 캐 시 값 을 사용 합 니 다.1.eval 또는 Function 구조 함 수 를 사용 하지 마 십시오.eval 또는 Function 구조 함 수 를 사용 하 는 대 가 는 매우 비 쌉 니 다.매번 스 크 립 트 엔진 이 실행 가능 한 코드 로 소스 코드 를 변환 해 야 합 니 다.또한,eval 처리 문자열 을 사용 하려 면 실행 할 때 설명해 야 합 니 다.느 린 코드 실행:

 
function addMethod(object, property, code) { 
object[property] = new Function(code); 
} 
addMethod(myObj, 'methodName', 'this.localVar=foo'); 

더 빠 른 코드 실행:

 
function addMethod(object, property, func) { 
object[property] = func; 
} 
addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; }); 

2.with 를 사용 하지 마 십시오.편리 하지만 with 는 인용 시간 을 추가 로 찾 아야 합 니 다.컴 파일 할 때 역할 필드 의 상하 가 없 는 지 모 르 기 때 문 입 니 다.느 린 코드 실행:

 
with (test.object) { 
foo = 'Value of foo property of object'; 
bar = 'Value of bar property of object'; 
} 

더 빠 른 코드 실행:

 
var myObj = test.object; 
myObj.foo = 'Value of foo property of object'; 
myObj.bar = 'Value of bar property of object'; 

성능 이 중요 한 함수 에서 try-catch-finally try-catch-finally 를 사용 하지 마 십시오.실행 할 때마다 현재 역할 영역 에 새로운 변 수 를 만 들 고 문 구 를 할당 하 는 데 사용 되 는 이상 입 니 다.이상 처 리 는 스 크 립 트 의 고위 층 에서 이 루어 져 야 합 니 다.이상 이 자주 발생 하지 않 는 곳,예 를 들 어 순환 체 의 바깥 에 있 습 니 다.가능 하 다 면 try-catch-finally 를 사용 하지 않도록 하 세 요.느 린 코드 실행:

 
var object = ['foo', 'bar'], i; 
for (i = 0; i < object.length; i++) { 
try { 
// do something that throws an exception 
} catch (e) { 
// handle exception 
} 
} 

더 빠 른 코드 실행:

 
var object = ['foo', 'bar'], i; 
try { 
for (i = 0; i < object.length; i++) { 
// do something 
} 
} catch (e) { 
// handle exception 
} 

4.전역 변 수 를 사용 하지 마 십시오.함수 나 다른 역할 영역 에서 전역 변 수 를 사용 하면 스 크 립 트 엔진 은 전체 역할 영역 을 옮 겨 다 니 며 그들 을 찾 아야 합 니 다.전역 작용 역 의 변 수 는 스 크 립 트 의 생명주기 에 존재 하고 국부 범 위 는 국부 범위 에서 잃 어 버 릴 때 삭 제 됩 니 다.느 린 코드 실행:

 
var i, 
str = ''; 
function globalScope() { 
for (i=0; i < 100; i++) { 
str += i; // here we reference i and str in global scope which is slow 
} 
} 
globalScope(); 

더 빠 른 코드 실행:

 
function localScope() { 
var i, 
str = ''; 
for (i=0; i < 100; i++) { 
str += i; // i and str in local scope which is faster 
} 
} 
localScope(); 

5.성능 이 중요 한 함수 에서 for-in for-in 순환 을 사용 하지 않도록 스 크 립 트 엔진 이 모든 속성 목록 을 만 들 고 이전 과 중복 되 는 지 확인 해 야 합 니 다.만약 당신 의 for 순환 작용 역 의 코드 가 그룹 을 수정 하지 않 았 다 면,그룹의 길 이 를 미리 계산 해서 for 순환 에서 그룹 을 교체 하 는 데 사용 할 수 있 습 니 다.느 린 코드 실행:

 
var sum = 0; 
for (var i in arr) { 
sum += arr[i]; 
} 

더 빠 른 코드 실행:

 
var sum = 0; 
for (var i = 0, len = arr.length; i < len; i++) { 
sum += arr[i]; 
} 

6.문자열 누적 컴 퓨 팅 스타일 사용+연산 은 메모리 에 새로운 문자열 을 만 들 고 연 결 된 값 을 부여 합 니 다.단지 이 결 과 를 변수 에 할당 할 뿐이다.연결 결과 의 중간 변 수 를 피하 기 위해 서 는+=을 사용 하여 결 과 를 직접 할당 할 수 있 습 니 다.느 린 코드 실행:

 
a += 'x' + 'y'; 

더 빠 른 코드 실행:

 
a += 'x'; a += 'y'; 

7.원래 작업 은 함수 호출 보다 빠 르 고 성능 요구 의 관건 적 인 순환 과 함수 에서 대체 할 수 있 는 원 작업 을 고려 할 수 있 습 니 다.느 린 코드 실행:

 
var min = Math.min(a, b); 
arr.push(val); 

더 빠 른 코드 실행:

 
var min = a < b ? a : b; 
arr[arr.length] = val; 

8.setTimeout()과 setInterval()을 설정 할 때 문자열 대신 함수 이름 을 전달 합 니 다.setTimeout()이나 setInterval()에 문자열 을 전달 하면 문자열 은 eval 에 의 해 계산 되 어 느 려 집 니 다.익명 함수 포장 으로 대체 하면 컴 파일 할 때 해석 되 고 최적화 될 수 있 습 니 다.느 린 코드 실행:setInterval('doSomething Periodically()',1000);setTimeOut('doSomethingAfterFiveSeconds()', 5000); 더 빠 른 코드 실행:

 
setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000); 

9.대상 에서 필요 하지 않 은 DOM 인용 을 사용 하지 않도록 합 니 다.이렇게 하지 마 십시오

 
var car = new Object(); 
car.color = "red"; 
car.type = "sedan" 

더 좋 은 형식:

 
var car = { 
color : "red"; 
type : "sedan" 
} 

10.가장 뚜렷 한 목표 속도,최소 화 역할 도 메 인 체인 저 효율 방법:

 
var url = location.href; 

효율 적 인 형식:

 
var url = window.location.href; 

11.스 크 립 트 에서 주석 을 적 게 사용 해 보 세 요.긴 변수 이름 을 사용 하지 않 고 가능 한 한 주석 이 적 거나 주석 을 사용 하지 않도록 합 니 다.특히 함수,순환 및 배열 에서.설명 이 필요 하지 않 은 스 크 립 트 실행 을 늦 추고 파일 크기 를 증가 시 켰 습 니 다.예 를 들 어 권장 하지 않 는 형식:

 
function someFunction() 
{ 
var person_full_name="somename"; /* stores the full name*/ 
} 

더 좋 은 쓰기:

 
function someFunction() 
{ 
var name="somename"; 
} 

12.현재 역할 도 메 인 에 저 장 된 외부 변 수 는 함수 가 실 행 될 때 피 입 는 것 을 물 어보 고 한 활동 의 대상 은 모든 부분 변 수 를 포함 하여 문맥 체인 앞으로 밀 려 갑 니 다.역할 도 메 인 체인 에서 가장 느 린 것 은 명확 한 식별 식별 식별 자 이 고 국부 변수 가 가장 빠르다 는 것 을 의미한다.자주 사용 하 는 외부 변 수 를 저장 하면 읽 기와 쓰기 가 현저히 빨 라 집 니 다.이것 은 전역 변수 와 다른 심층 식별 자 를 찾 는 데 특히 뚜렷 하 다.마찬가지 로 현재 역할 영역 에서 의 변수(var my Var)는 대상 속성 보다 접근 속도 가 빠르다(this.my Var).느 린 코드 실행:

 
function doSomething(text) { 
var divs = document.getElementsByTagName('div'), 
text = ['foo', /* ... n ... */, 'bar']; 
for (var i = 0, l = divs.length; i < l; i++) { 
divs[i].innerHTML = text[i]; 
} 
} 

더 빠 른 코드 실행:

 
function doSomethingFaster(text) { 
var doc = document, 
divs = doc.getElementsByTagName('div'), 
text = ['foo', /* ... n ... */, 'bar']; 
for (var i = 0, l = divs.length; i < l; i++) { 
divs[i].innerHTML = text[i]; 
} 
} 

하나의 요소(예 를 들 어 head)에 접근 할 필요 가 있다 면 로 컬 DOM 접근(예 를 들 어 get)을 사용 하 는 것 이 더 빠 를 것 입 니 다.더 빠 른 코드 실행:

 
function doSomethingElseFaster() { 
var get = document.getElementsByTagName; 
for (var i = 0, i < 100000; i++) { 
get('head'); 
} 
} 

13.변수 캐 시 값 을 사용 하여 중복 작업 을 하 는 곳 에서 부분 변수 캐 시 값 을 사용 합 니 다.다음 의 예 는 저장 값 이 국부 변수 까지 의 광범 위 한 의 미 를 나타 낸다.예 1.계산 을 실행 하기 전에 순환 체 내 에서 변 수 를 사용 하여 수학 함수 오 류 를 저장 하 는 방법:

 
var d=35; 
for (var i=0; i<1000; i++) { 
y += Math.sin(d)*10; 
} 

더 좋 은 처리:

 
var d = 55; 
var math_sind = Math.sin(d)*10; 
for (var i=0; i<1000; i++) { 
y += math_sind; 
} 

예 2.배열 의 길 이 를 저장 하 는 것 은 순환 에서 나 쁜 처 리 를 사용 합 니 다.배열 의 길 이 는 매번 반복 적 으로 계 산 됩 니 다

 
for (var i = 0; i < arr.length; i++) { 
// do something 
} 

더 좋 은 개선:더 좋 은 방법 은 배열 의 길 이 를 저장 하 는 것 입 니 다

 
for (var i = 0, len = arr.length; i < len; i++) { 
// do something 
} 

전체적으로 말 하면.만약 이미 한 번 했다 면 우 리 는 불필요 한 일 을 반복 할 필요 가 없다.예 를 들 어,역할 영역 이나 함수 에서 계 산 된 표현 식 의 값 을 여러 번 사용 할 수 있 습 니 다.변 수 를 저장 하면 여러 번 사용 할 수 있 습 니 다.그렇지 않 으 면 변 수 를 지나치게 설명 하고 값 을 부여 한 다음 에 한 번 만 적 용 됩 니 다.그 러 니까 명심 하 세 요.추가 설명:두 번 째 는 JS 가 주로 컴 파일 된 것 이 아니 라 해석 한 것 입 니 다.표현 에 영향 을 주지 않 지만 학술 은 엄밀 한 것 이 좋 습 니 다.여섯 번 째 는 격식 이 흐 트 러 진 것 이 아 닙 니까?a += ‘x' + ‘y'; 더 빠 른 코드 실행:a+='x';a += 'y'; 9.대상 에서 불필요 한 DOM 인용 을 피하 기 new Object 도 DOM 인용?이것 은 new Object()와 new Array(),그리고 new Function()의 일반적인 상황 을 가볍게 사용 하지 말 라 는 것 일 것 입 니 다.{...},[...],f=function(...){..}즉,이것 은 위의 그 점 과 같은 것 입 니 다.마지막 으로 소 용 비트 연산 을 보충 합 니 다.js 의 모든 수치 연산 은 마지막(JS 엔진 이 층 까지)모두 부동 소수점 으로 계산 되 기 때문에 비트 연산 은 오히려 더 느 릴 수 있 습 니 다.