JavaScript 실행 효율성 및 성능 개선 계획_javascript 기술

JavaScript 실행 효율성과 성능을 향상시키는 방법은 프런트 엔드 개발에서 매우 중요한 부분입니다. 이 섹션에서는 일상적인 프로젝트 작업 중에 JavaScript 성능과 운영 효율성을 향상시키는 방법을 연구합니다.

루프
루프는 매우 일반적으로 사용되는 제어 구조입니다. JavaScript에서는 for(;;), while(), for를 사용할 수 있습니다. (in) 세 종류의 루프는 사실 이 세 종류의 루프 중 for(in)의 효율성이 매우 낮습니다. 왜냐하면 해시 키를 쿼리해야 하기 때문에 가능한 한 적게 사용하는 것이 좋습니다. . for(;;)와 while 루프의 성능은 기본적으로 동일합니다(일상적으로 사용하는 경우).

사실 이 두 루프를 사용하는 방법은 매우 특별합니다. 최종 결론은 다음과 같습니다.

루프 변수가 증가하거나 감소하는 경우 마지막으로 읽을 때 루프 변수에만 값을 할당하지 마십시오. 배열의 길이와 비교하고 싶다면 배열의 길이 속성을 미리 로컬 변수에 넣어서 쿼리 횟수를 줄여야 합니다. 예를 들어 arr이 배열이라고 가정하면 요소를 순회하는 가장 좋은 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

for(var i=0, len = arr.length;i

또는 순서가 중요하지 않은 경우:

코드 복사 코드는 다음과 같습니다.

for(var i=arr.length;i>0;i--){ ...}

로컬 변수와 전역 변수
로컬 변수는 전역 변수보다 더 빠르게 액세스됩니다. 왜냐하면 전역 변수는 실제로 전역 개체의 멤버이고 지역 변수는 스택에 배치되기 때문입니다.

Eval을 사용하지 마세요 eval을 사용하는 것은 런타임에 콘텐츠를 실행하기 위해 해석 엔진을 다시 호출하는 것과 동일하며 이때 함수 ​​템플릿은 시간이 많이 걸립니다. 자바스크립트에서 지원하는 클로저를 이용하여 구현할 수 있습니다. ( 클로저의 내용은 함수형 프로그래밍 관련 내용을 참고하세요.)


객체 검색을 줄입니다 자바스크립트는 해석이 가능하기 때문에, a.b.c.d.e, 최소한 4번의 쿼리 연산이 필요합니다. 먼저 a를 확인한 다음, a에서 b를 확인한 다음, b에서 c를 확인하는 식으로 이러한 표현식이 반복적으로 발생하는 경우 이러한 표현식을 최대한 최소화하도록 노력해야 합니다. 문자열과 배열의 길이를 기준으로 반복해야 하는 경우가 많고 일반적으로 매번 길이가 변경되지 않으므로 쿼리를 위한 임시 위치를 입력할 수 있습니다. a.length를 쿼리하려면 추가 루프를 추가하고 var len=a.length를 미리 설정해야 합니다.


문자열 연결 문자열을 추가하는 경우 s=s anotherStr을 사용하는 대신 s =. anotherStr 작업을 사용하는 것이 가장 좋습니다. 여러 문자열을 연결하려면 s =a;s =와 같이 less =를 사용해야 합니다. b;s =c; s =a b c; 를 써야 하며, 문자열을 수집하려면 = less 를 사용해야 합니다. 예를 들어 동일한 문자열에 대해 = 작업을 여러 번 수행하는 경우 캐시를 사용하는 것이 가장 좋습니다. 어떻게 사용하나요? 다음과 같이 JavaScript 배열을 수집하고 마지막으로 Join 메서드를 사용하여 연결합니다. (i.toString());}var all = buf.join("""");


유형 변환 유형 변환은 누구나 저지르는 흔한 실수입니다. 왜냐하면 JavaScript 동적 유형 언어이므로 변수 유형을 지정할 수 없습니다.

1. 숫자를 문자열로 변환하고 """"를 사용합니다. 1. 보기에는 좀 보기 흉하지만 실제로는 이것이 성능 측면에서 가장 효율적입니다.

코드 복사 코드는 다음과 같습니다.

("""" ) > String() > 새로운 문자열()


이것은 실제로 아래의 "직접 수량"과 다소 유사합니다. 런타임에 사용되는 사용자 작업보다 더 빠르게 컴파일 타임에 사용할 수 있는 내부 작업을 사용해 보세요.

String()은 내부 함수이므로 매우 빠른 반면, .toString()은 프로토타입에서 함수를 쿼리해야 하므로 new String()을 사용하여 반환하는 것만큼 빠르지 않습니다. 정확한 사본.

2. 부동 소수점 숫자를 정수로 변환하는 것은 오류가 발생하기 쉽습니다. 실제로,parseInt()는 부동 소수점 숫자 사이가 아닌 문자열을 숫자로 변환하는 데 사용됩니다. 정수 사이를 변환하려면 Math.floor() 또는 Math.round()를 사용해야 합니다.

그리고 2장의 객체 검색 문제와 달리 Math는 내부 객체이기 때문에 실제로 Math.floor()는 쿼리 메소드와 호출 시간을 많이 차지하지 않으며 가장 빠릅니다.

3. 사용자 정의 개체의 경우 유형 변환을 위해 toString() 메서드가 정의된 경우 내부 작업에서 모든 가능성을 시도한 후 개체를 시도하므로 toString()을 명시적으로 호출하는 것이 좋습니다. ) 메소드는 문자열로 변환될 수 있는지 확인하려고 시도하므로 이 메소드를 직접 호출하는 것이 더 효율적입니다.

직접 수량을 사용하세요
사실 이 영향은 상대적으로 작아 무시할 수 있습니다. 직접 수량을 사용한다는 것은 무엇을 의미합니까? 예를 들어 JavaScript는 배열을 직접 표현하기 위해 [param, param, param,...]을 사용하는 것을 지원합니다. 과거에는 모두 new Array(param, param,...)를 사용했습니다. 전자를 사용하는 것은 엔진에 의해 직접 해석되고, 후자는 Array 내부 생성자를 호출하므로 약간 더 빠릅니다.

마찬가지로 var foo = {}는 var foo = new Object();보다 빠르며 var reg = /../;는 var reg=new RegExp()보다 빠릅니다.

문자열 순회 연산
바꾸기, 검색 등 문자열에 대한 루프 연산은 자바스크립트 자체의 루프 속도가 상대적으로 느리기 때문에 정규식을 사용해야 하고, 정규식은 작업은 C로 작성된 언어 API이며 성능이 매우 좋습니다.

고급 개체
사용자 정의 고급 개체와 Date 및 RegExp 개체는 구성에 많은 시간을 소비합니다. 재사용이 가능하다면 캐싱을 사용해야 합니다.

DOM 관련
HTML 삽입
많은 사람들이 페이지 콘텐츠를 생성하기 위해 JavaScript에서 document.write를 사용하는 것을 좋아합니다. 실제로 이는 덜 효율적입니다. HTML을 직접 삽입해야 하는 경우 div 또는 범위 지정과 같은 컨테이너 요소를 찾아 innerHTML을 설정하여 페이지에 자신만의 HTML 코드를 삽입할 수 있습니다.

객체 쿼리
[""""] 쿼리를 사용하는 것이 .items()보다 빠릅니다. 이는 를 호출하여 객체 검색을 줄이는 이전 아이디어와 동일합니다. items ()는 쿼리와 함수 호출을 추가합니다.

DOM 노드 만들기
일반적으로 문자열을 사용하여 HTML을 직접 작성하여 노드를 만들 수 있습니다. 실제로 이렇게 하면

코드의 유효성이 보장되지 않습니다. 🎜>
문자열 연산 효율성이 낮다

따라서 document.createElement() 메서드를 사용해야 합니다. 문서에 이미 만들어진 템플릿 노드가 있는 경우 cloneNode() 메서드를 사용해야 합니다. createElement() 메소드를 사용한 후에는 요소의 속성을 여러 번 설정해야 하며, cloneNode()를 사용하면 속성 설정 수를 줄일 수 있습니다. 마찬가지로 많은 요소를 생성해야 하는 경우 템플릿 노드를 먼저 준비해야 합니다.


Timer 계속 실행되는 코드를 대상으로 하는 경우 setTimeout을 사용하지 말고 setInterval을 사용해야 합니다. setTimeout은 매번 타이머를 재설정합니다.


기타 스크립트 엔진
제가 테스트한 바에 따르면 Microsoft JScript의 효율성은 실행 속도와 메모리 관리 측면 모두에서 Mozilla의 Spidermonkey보다 훨씬 나쁩니다. 이제 기본적으로 업데이트되지 않습니다. 하지만 SpiderMonkey는 ActiveXObject를 사용할 수 없습니다.


파일 최적화 파일 최적화도 공백과 주석을 모두 삭제하고 코드를 한 줄에 넣어 다운로드 속도를 높이는 것도 매우 효과적인 방법입니다. 파싱 ​​속도보다는 속도가 로컬이라면 주석과 공백이 해석과 실행 속도에 영향을 주지 않습니다.
요약: 미리 만들어진 것을 직접 사용하는 것이 더 빠릅니다. 예를 들어 로컬 변수는 전역 변수보다 빠르고, 직접 변수는 런타임에 객체를 생성하는 것보다 빠릅니다. 여러 쿼리가 필요한 작업을 먼저 캐싱하는 등 실행 횟수를 최대한 줄이세요. 가능하면 문자열 연결과 같은 내장된 언어 기능을 사용하십시오. 시스템에서 제공하는 API를 최대한 활용하세요. 이러한 API는 바이너리 코드로 컴파일되어 실행 효율성이 높기 때문입니다. 동시에 여기에서는 설명하지 않는 계산 구조 조정과 같은 일부 기본 알고리즘 최적화를 JavaScript에서 사용할 수도 있습니다.

JavaScript는 해석되므로 바이트코드는 일반적으로 런타임에 최적화되지 않으므로 이러한 최적화는 여전히 매우 중요합니다. JavaScript의 실행 속도를 향상시키는 방법에 관심이 있으시면 이 웹사이트에서 JavaScript 성능 향상에 대한 다른 기사를 확인하실 수도 있습니다.