JS 성능 최적화 노트 검색 및 organization_javascript 기술

온라인에서 정보를 검색하여 성능 최적화에 대해 알아보세요. 최적화 과정 중에만 참조할 수 있도록 간략하게 요약했습니다. 궁금한 점이 있으면 제때에 문의하고 해당 내용을 추가로 수정하세요.

1. 코드를 간결하게 유지하세요. 일부 간단한 표현식도 좋은 최적화를 생성합니다.

예: x=x 1; 함수에 영향을 주지 않고 x로 축약할 수 있습니다. > 2. 의미에 영향을 주지 않고 변수 이름과 메소드 이름을 가능한 한 단순하게 유지하십시오. (첫 글자로 이름을 지정할 수 있습니다.)

예: 정의된 배열의 길이는 ArrayLength 대신 ArrLen으로 지정할 수 있습니다.

3. JS 루프와 관련하여 루프는 일반적으로 사용되는 프로세스 제어입니다.

JS는 for(;;), while(), for(in)의 세 가지 유형의 루프를 제공합니다. 이 세 가지 유형의 루프 중에서 for(in)은 해시 키를 쿼리해야 하기 때문에 효율성이 가장 낮습니다. 따라서 for(in) 루프는 for(;;) 및 while의 성능을 최대한 줄여야 합니다. () 루프는 기본적으로 동일합니다. 물론, for 루프를 사용하는 것이 좋습니다. 루프 변수가 증가하거나 감소하는 경우 루프 변수에만 값을 할당하지 말고 대신 중첩 또는 - 연산자를 사용하세요.

4. 배열을 순회해야 하는 경우 배열 길이에 대한 여러 쿼리를 피하기 위해 먼저 배열 길이를 캐시하고 배열 길이를 로컬 변수에 넣어야 합니다.

문자열과 배열의 길이를 기준으로 반복해야 하는 경우가 많고 일반적으로 이 길이는 변경되지 않기 때문입니다. 예를 들어 a.length를 쿼리할 때마다 추가 작업을 수행하고 var len을 입력해야 합니다. = 미리 a.length이면 쿼리가 하나 줄어듭니다.

5. 전역 변수 대신 지역 변수를 사용해 보세요.

로컬 변수의 액세스 속도는 전역 변수의 액세스 속도보다 빠릅니다. 왜냐하면 전역 변수는 실제로 창 개체의 멤버이고 로컬 변수는 함수의 스택에 배치되기 때문입니다.

6. eval을 최대한 적게 사용하세요.

eval을 사용할 때마다 시간이 많이 소요되는데, 이때 JS에서 지원하는 클로저를 이용하여 함수 템플릿을 구현하면 됩니다.

7. 객체 검색 감소

a.b.c.d.e에는 먼저 a를 확인한 다음 a에서 b를 확인한 다음 b에서 c를 확인해야 합니다. 등. 따라서 이러한 표현식이 반복적으로 나타나는 경우 해당 표현식은 가능한 한 드물게 유지해야 하며 로컬 변수를 사용하여 쿼리할 수 있는 임시 위치에 배치할 수 있습니다.

8. 문자열 연결.

문자열을 추가하는 경우 s=s anotherStr을 사용하는 대신 s =anotherStr 작업을 사용하는 것이 가장 좋습니다.

여러 문자열을 연결하려면 s =a;s =b;s =c;와 같이 =less를 사용해야 합니다.
원하는 경우 다중과 같은 문자열 수집 동일한 문자열에 대해 = 연산을 여러 번 수행하는 경우 캐시를 사용하는 것이 가장 좋습니다. 그것을 사용하는 방법? JavaScript 배열을 사용하여 수집하고 최종적으로 Join 메소드를 사용하여 다음과 같이 연결합니다

코드 복사 코드는 다음과 같습니다. 🎜> var buf = new Array();for(var i = 0; i < 100; i ){ buf.push(i.toString());}var all = buf.join( "");

9. 유형 변환

1. ""를 사용하여 숫자를 문자열로 변환합니다. 1. 보기엔 좀 이상해 보이지만 실제로는 이것이 가장 효율적입니다. ("" ) > ; String() > .toString() > new String()

런타임에 사용되는 사용자 작업보다 빠르게 사용할 수 있는 내부 작업을 사용해 보세요.

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

2. 부동 소수점 숫자를 정수로 변환하는 것은 오류가 발생하기 쉽습니다. 실제로,parseInt()는 부동 소수점 숫자와 정수 사이가 아닌 문자열을 숫자로 변환하는 데 사용됩니다. . 사이를 변환하려면 Math.floor() 또는 Math.round()를 사용해야 합니다. Math는 내부 객체이므로 Math.floor()는 실제로 쿼리 메서드와 호출 시간을 많이 차지하지 않으며 가장 빠릅니다.

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

10. var obj=new Object() 메소드 대신 JSON 형식을 사용하여 객체를 생성해 보십시오.

전자는 직접 복사하는 반면, 후자는 생성자를 호출해야 하기 때문에 전자의 성능이 더 좋습니다.

11. 배열을 사용해야 하는 경우에는 JSON 형식의 구문을 사용해 보세요.

JSON 형식의 구문을 사용합니다. 즉, 다음 구문을 직접 사용하여 배열을 정의합니다. : [parrm, param, param.. .], new Array(parrm, param, param...) 구문을 사용하는 대신. JSON 형식을 사용하는 구문은 엔진에서 직접 해석되기 때문입니다. 후자를 사용하려면 Array 생성자를 호출해야 합니다.

12. 정규식을 사용하여 문자열에 대해 바꾸기, 검색 등의 루프 작업을 수행합니다.

JS의 루프 속도는 상대적으로 느리고, 정규식 연산은 C로 작성된 API이기 때문에 성능이 더 좋습니다.

13. HTML 삽입

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

14. 객체 쿼리

[""] 쿼리를 사용하는 것이 .items()보다 빠릅니다.

15. 타이머

코드가 지속적으로 SetTimeout은 사용하면 안 되지만, setInterval은 사용해야 합니다. setTimeout은 매번 타이머를 재설정합니다.

16. DOM 호출 최소화

웹 개발에서 JavaScript의 매우 중요한 역할은 DOM을 운영하는 것입니다. 그러나 DOM에서 작업하면 브라우저가 리플로우 작업을 수행하게 되므로 비용이 매우 많이 듭니다. DOM 작업을 최대한 줄여야 합니다.
리플로우 작업은 주로 여러 상황에서 발생합니다.
* 양식 크기 변경
* 글꼴 변경
* 스타일시트 블록 추가 및 제거
* 입력 텍스트인 경우에도 내용 변경 입력 상자에서
* CSS 가상 클래스는 다음과 같이 트리거됩니다. hover
* 요소의 클래스 이름 변경
* 작업을 추가하거나 삭제할 때 또는 콘텐츠 변경이 DOM 노드에서 수행됩니다.
* 스타일을 동적으로 설정하는 경우(예: element.style.width="10px").
* 계산해야 하는 offsetWidth, clientHeight 또는 기타 CSS 값에 액세스하는 등 계산해야 하는 크기 값을 얻을 때
문제 해결의 핵심은 DOM으로 인한 리플로우 수를 제한하는 것입니다. 작업:
1. 현재 DOM에서 작업하기 전에 N번의 생성과 1번의 작성을 보장하기 위해 최대한 많은 준비 작업을 수행합니다.
2. DOM에서 작업하기 전에 현재 DOM 구조에서 작업할 요소를 삭제합니다.
2.1.removeChild() 또는 replacementChild()를 통해 삭제를 구현합니다.
2.2. 이 요소의 표시 스타일을 "없음"으로 설정합니다.

3.CSS 부분
리플로우 작업을 자주 발생시키는 또 다른 상황은 style 속성을 통해 요소의 모양을 수정하는 것입니다. 요소가 수정되었습니다. 스타일 속성은 확실히 리플로우 작업을 트리거합니다.
3.1 className을 변경하여 style.xxx=xxx를 바꾸는 방법을 사용합니다.
3.2. style.cssText = ''를 사용하여 스타일을 한 번 작성하세요.
3.3. 인라인 스타일을 너무 많이 설정하지 마세요.
3.4. 추가된 구조적 요소에 대해 위치를 고정 또는 절대적으로 설정하세요.
3.5. 레이아웃에 테이블을 사용하지 마세요.
3.6. JavaScript 표현식(IE에만 해당)
4. 획득한 DOM 데이터를 캐시합니다. 이 메서드는 리플로우 작업(예: offsetWidth 등)을 트리거하는 속성을 얻는 데 특히 중요합니다.
5. HTMLCollection 객체에 대한 작업을 수행할 때는 액세스 횟수를 최대한 최소화해야 합니다. 가장 간단하게는 길이 속성을 로컬 변수에 캐시하여 루프 효율성을 크게 향상시킬 수 있습니다. .

17. <script> 호출 방법을 리팩터링하거나 js 파일을 병합하여 참조용으로 외부 링크를 사용해 보세요. <br><br>우리는 종종 HTML을 사용합니다. 파일 헤더에 다음 코드가 표시됩니다. <br><br><script src="/scripts/a.js"></script>





대부분의 경우 위 코드는 can은 다음과 같이 단순화됩니다.



여기서 a.js/b.js는 d에서 참조됩니다. js /c.js. document.write 메소드를 통해 작성되었습니다.

18. 대형 JS 객체의 경우 생성 시간과 공간 오버헤드가 상대적으로 크기 때문에 캐싱을 최대한 고려해야 합니다.

19. 스크립트를 하단에 배치하세요.

스크립트는 일반적으로 사용자 상호작용에 사용됩니다. js 파일을 로드하기 전에 페이지가 로드될 때까지 기다리는 것이 좋습니다. 따라서 스크립트는 CSS와 정반대이므로 페이지 하단에 배치해야 합니다.

20. JavaScript에서 빈 영역 제거

관련 도구를 사용하여 빈 주석 등을 제거할 수 있습니다. 모든 이름을 한두 글자로 바꾸면 상당한 개선이 이루어집니다. (단, 향후 유지 관리를 용이하게 하기 위해 승인되지 않은 백업 파일을 보관해야 합니다.)