웹 사이트 성능 향상에 대한 JavaScript의 제안 (i) 중에서 HTTP 요청에서 페이지 렌더링으로 웹 사이트 성능 향상을위한 몇 가지 제안이 제시됩니다. 이 기사는 Steve Sounders가 "고성능 웹 사이트 구성에 대한 고급 가이드"의 다른 책을 배운 후 JavaScript 성능의 관점에서 요약 한 것입니다.
JavaScript 성능은 고성능 웹 애플리케이션을 구현하는 열쇠입니다.
-스티브 사운 더
1. JS 스코프 체인을 사용하십시오
스코프 체인
JavaScript 코드 (글로벌 코드 또는 함수)를 실행할 때 JavaScript 엔진은 실행 컨텍스트라고도하는 범위를 생성합니다. 페이지가로드되면 글로벌 범위가 먼저 생성되고 각 함수가 실행되면 해당 범위가 설정되어 스코프 체인이 형성됩니다. 각 스코프에는 해당 스코프 체인이 있고 체인의 헤드는 글로벌 범위이며 체인의 꼬리는 현재 기능 범위입니다.
범위 체인의 목적은 식별자를 구문 분석하는 것입니다. 함수가 만들어지면 (실행되지 않음),이, 인수, 이름이 매개 변수 및 함수의 모든 로컬 변수가 현재 범위에 추가됩니다. JavaScript가 변수 x (이 프로세스가 변수 해상도라고 함)를 찾아야하는 경우, 먼저 스코프 체인, 즉 현재 스코프의 체인 끝에서 X 속성이 있는지 여부를 검색합니다. 발견되지 않으면 체인 헤드, 즉 글로벌 스코프 체인 및 변수가 발견되지 않을 때까지 스코프 체인을 따라 계속 검색하십시오.이 코드의 스코프 체인에는 X 변수가없고 참조 오류 (참조 오류) 예외가 발생한다고 생각됩니다.
스코프 체인의 깊이를 관리하는 것은 소량의 작업만으로 성능을 향상시키는 간단한 방법입니다. 스코프 체인의 의도하지 않은 성장으로 인해 실행 속도가 느려지는 속도를 피해야합니다.
로컬 변수 사용 (가능한 한 짧은 범위 체인)
스코프 체인의 개념을 이해한다면 JavaScript 엔진 구문 분석 변수는 스코프 체인의 깊이와 관련이 있음을 분명히해야합니다. 분명히, 로컬 변수는 체인의 끝에 있으며 가장 빠른 액세스 속도를 가지고 있습니다. 따라서 좋은 경험은 다음과 같습니다. 로컬이 아닌 변수가 두 번 이상 사용될 때 로컬 변수를 사용하여 저장하십시오.
함수 changev () {document.getElementById ( 'myDiv'). className = 'Change'; document.getElementById ( 'mydiv'). style.height = 150;}여기서 MyDiv dom 요소는 두 번 참조됩니다. 더 빠른 참조를 위해서는 로컬 변수로 저장해야합니다. 이를 수행하는 이점은 스코프 체인을 단축 할뿐만 아니라 DOM 요소의 중복 쿼리를 피하십시오.
함수 ChangeV () {var myDivStyle = document.getElementById ( 'myDiv'). style; myDiv.className = 300; myDiv.style.height = 150;}사용하지 마십시오 (스코프 체인을 키우지 마십시오)
일반적으로 코드 실행 중에 함수의 범위 체인이 고정되지만 기능의 범위 체인을 일시적으로 증가시킬 수 있습니다. with with with는 객체 속성을 로컬 변수로 표시하여 액세스하기 쉽게 액세스 할 수 있도록 사용됩니다.
var user = {name : 'vicfeel', age : '23 '}; function showuser () {var local = 0; with (user) {console.log ( "name" + name); console.log ( "age" + age); console.log (local);}} showuser ();이 예에서는 Showuser SCOPE 체인의 끝에 임시 스코프가 추가되며, 이는 사용자 객체의 모든 속성, 즉 코드가 포함 된 스코프 체인이 증가합니다. 이 코드에서는 체인 끝의 첫 번째 객체에서 두 번째 객체로 로컬 변경과 같은 로컬 변수가 자연스럽게 식별자의 액세스를 느리게 만듭니다. With 명세서가 끝날 때까지 스코프 체인은 성장을 재개합니다. 이러한 결함으로 인해 키워드를 사용하지 않도록 노력해야합니다.
2 합리적인 흐름 제어
다른 프로그래밍 언어와 마찬가지로 JavaScript는 일부 흐름 제어 문 (루프, 조건 등)이 있으며 각 링크에서 적절한 문을 사용하면 스크립트의 실행 속도를 크게 향상시킬 수 있습니다.
빠른 상태 판단
조건부 판단과 관련하여 피하는 첫 번째 방법은 다음과 같습니다.
if (value == 0) {return result0;} else if (value == 1) {return result1;} else if (value == 2) {return result2;} else if (value == 3) {return result3;} else if (value == 4) {return reture = 5) {return reture}} else} else} else} 결과 7;}조건부 판단을 위해 IF를 사용하는이 방법의 주요 문제는 레벨이 너무 깊다는 것입니다. value = 7을 원할 때 시간은 값 = 0보다 훨씬 길어 성능이 크게 상실되고 가독성이 좋지 않습니다.
스위치로 판단하는 더 좋은 방법.
SWITHC (value) {case 0 : return result0; case 1 : return result1; case 2 : return result2; case 3 : return result3; case 4 : return result4; case 5 : return result5; case 6 : return result6; default : return result7;}이는 가독성을 향상시킬뿐만 아니라 IF보다 빠른 쿼리 시간이 필요합니다. 그러나 하나 또는 두 개의 조건 만 있으면 전환보다 빠른 경우
JavaScript에는 조건부를 쿼리하는 또 다른 방법이 있습니다. 앞의 예는 값에 따라 다른 값을 반환하는 것이 었으며, 이는 배열을 사용하여 해시 테이블의 매핑 쿼리를 구현할 수 있습니다.
// 배열 var results = [result0, result1, result2, result3, result4, result5, result6, result7]; // query result return result [value];
이 배열 방법은 쿼리 범위가 클 때 더 효과적입니다. 상단 및 하부 경계를 감지 할 필요가 없으며 인덱스 값을 쿼리로 채워야하기 때문입니다. 그 제한은 조건이 일련의 작업이 아닌 단일 값에 해당한다는 것입니다. 따라서 실제 상황을 종합적으로 결합하고 조건의 적절한 판단 방법을 선택하며 성능을 극대화해야합니다.
빠른 사이클
루프, do-while 루프, 루프 및 for-in 루프 용 자바 스크립트에는 4 개의 루프 방법이 있습니다. 다음은 매우 일반적으로 사용되는 재활용 방법입니다.
var 값 = [1,2,3,4,5]; for (var i = 0; i <values.length; i ++) {process (values [i]);}이 코드의 가장 명백한 최적화는 값이라는 것을 알 수 있습니다. 각 루프는 값의 길이와 비교해야합니다. 쿼리 속성은 로컬 변수보다 시간이 많이 걸립니다. 루프 수가 더 크면 시간이 많이 소요됩니다. 따라서 다음과 같이 최적화 할 수 있습니다.
var values = [1,2,3,4,5]; var 길이 = values.length; // 로컬 변수 스토리지 배열 길이 (var i = 0; i <length; i ++) {process (values [i]);}이 코드는 또한 계속 최적화하여 루프 변수를 총 길이를 추가하는 대신 0으로 줄일 수 있습니다.
var values = [1,2,3,4,5]; var 길이 = values.length; for (var i = length; i-;) {// 0process로 감소 (값 [i]);}여기서 루프의 끝은 0과 비교되도록 변환되므로 각 루프의 속도가 더 빠릅니다. 루프의 복잡성에 따라,이 간단한 변화는 이전보다 시간의 약 50%를 절약 할 수 있습니다.