> 웹 프론트엔드 > JS 튜토리얼 > 클라이언트 측 js 성능 최적화 팁 organization_javascript 기술

클라이언트 측 js 성능 최적화 팁 organization_javascript 기술

WBOY
풀어 주다: 2016-05-16 17:17:27
원래의
1017명이 탐색했습니다.

다음은 클라이언트 측 JS 성능을 위한 몇 가지 최적화 팁입니다.

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

2. 배열을 순회해야 하는 경우 먼저 배열 길이를 var len=arr.length for(i=0;i
3. 지역 변수의 접근 속도는 전역 변수의 접근 속도보다 빠릅니다. 왜냐하면 전역 변수는 실제로 창 개체의 구성원이고 지역 변수는 함수의 스택에 배치되기 때문입니다.

4. eval을 사용할 때마다 시간이 많이 걸립니다. 특히 루프에서는 json[i][variable]=1; 평가.

5. obj1.obj2.obj3.obj4 명령문의 경우 먼저 obj1에 obj2가 포함되어 있는지 확인한 다음 obj2에 포함되어 있는지 확인해야 합니다. obj3., 그리고 obj3에 obj4가 포함되어 있는지 확인하세요... 좋은 전략이 아닙니다. 중첩된 쿼리를 방지하려면 지역 변수를 활용하고 obj4를 지역 변수에 저장해야 합니다.

6. 연산자를 사용할 때는 대입 연산을 직접 수행하는 대신 =, -=, *=, = 등의 연산 기호를 사용해 보세요.

7. 숫자를 문자로 변환해야 하는 경우 다음 방법을 사용하세요. "" 1. 성능 관점에서 숫자를 문자로 변환할 때 다음 공식이 있습니다: ("" ) > String() > .toString() > new String(). String()은 내부 함수이므로 매우 빠릅니다. 그리고 .toString()은 프로토타입에서 함수를 쿼리해야 하므로 속도가 더 느립니다. new String()은 문자열 개체를 다시 생성해야 하는데, 이는 가장 느립니다.

8. 부동 소수점 숫자를 정수로 변환해야 하는 경우 Math.floor() 또는 Math.round()를 사용해야 합니다. ParseInt()를 사용하는 대신 이 메서드를 사용하여 문자열을 숫자로 변환합니다. 게다가 Math는 내부 객체이기 때문에 실제로 Math.floor()는 쿼리 메소드와 호출 시간이 많지 않고 가장 빠릅니다.

9. var obj=new Object() 메소드 대신 JSON 형식을 사용하여 객체를 생성해 보세요. 전자는 직접 복사하는 반면 후자는 생성자를 호출해야 하기 때문에 전자의 성능이 더 좋습니다.

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

11. 정규식을 사용하여 문자열에 대해 바꾸기, 검색 등의 루프 작업을 수행합니다. JS의 루프 속도는 상대적으로 느리고 정규식의 연산은 C로 작성된 API이므로 성능이 비교적 좋습니다.

마지막으로, 대형 JS 객체의 경우 생성 시 오버헤드가 상대적으로 크기 때문에 캐싱을 최대한 고려해야 한다는 기본 원칙이 있습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿