Function.apply()_javascript의 매개변수 배열을 사용하여 JavaScript 프로그램의 성능을 향상시키는 팁 팁

프로그램 성능을 향상시키는 Function.apply()의 기술에 대해 이야기해 보겠습니다.

Math.max() 함수부터 시작하겠습니다. Math.max 뒤에는 여러 매개변수가 올 수 있으며 마지막으로 모든 매개변수 중 최대값을 반환합니다.

예를 들어

alert(Math.max(5,8))  //8 
alert(Math.max(5,7,9,3,1,6))  //9 

그러나 대부분의 경우 배열에서 가장 큰 요소를 찾아야 합니다.

var arr=[5,7,9,1] 
alert(Math.max(arr))  //  这样却是不行的。一定要这样写 
function getMax(arr){ 
  var arrLen=arr.length; 
  for(var i=0,ret=arr[0];i<arrLen;i++){ 
    ret=Math.max(ret,arr[i]);     
  } 
  return ret; 
}  

이렇게 글을 쓰는 것은 번거롭고 비효율적입니다. Apply를 사용하는 경우 코드를 확인하세요.

function getMax2(arr){ 
  return Math.max.apply(null,arr) 
} 

두 코드 조각은 동일한 목적을 달성하지만 getMax2가 훨씬 더 우아하고 효율적이며 간결합니다.

성능 테스트 보기:

getMax 성능 테스트

var myArr=new Array() 
function fillRnd(arrLen){ //填入 arrLen个1-10的随机数字到数组 
  for(var i=0,arr=[];i<arrLen;i++){ 
    arr[i]=Math.ceil(Math.random()*10) 
  } 
  return arr 
} 
function getMax(arr){ 
  var arrLen=arr.length; 
  for(var i=0,ret=arr[0];i<arrLen;i++){ 
    ret=Math.max(ret,arr[i]);     
  } 
  return ret; 
} 
function getMax2(arr){ 
  return Math.max.apply(null,arr) 
} 
myArr=fillRnd(20*10000) //生成20万个随机数填到数组 
var t1=new Date() 
var max1=getMax(myArr) 
var t2=new Date() 
var max2=getMax2(myArr) 
var t3=new Date() 
if (max1!==max2) alert("error") 
alert([t3-t2,t2-t1])  //在我机器上 96,464 .不同的机器,结果可能有差异 

200,000개의 데이터를 비교하면 getMax2 시간은 96ms이고 getmax 시간은 464입니다. 둘의 차이는 5배

또 다른 예는 배열의 푸시 방법입니다.

var arr1=[1,3,4]; 
var arr2=[3,4,5];

arr2를 확장한 다음 arr1에 하나씩 추가하려면 마지막으로 arr1=[1,3,4,3,4,5]를 지정합니다.

arr1.push(arr2)는 분명히 작동하지 않습니다. 이렇게 하면 [1,3,4, [3,4,5] ]
를 얻게 됩니다.

루프를 사용하여 하나씩 푸시할 수만 있습니다(물론 arr1.concat(arr2)를 사용할 수도 있지만 concat 메서드는 arr1 자체를 변경하지 않습니다)

var arrLen=arr2.length 
for(var i=0;i<arrLen;i++){ 
  arr1.push(arr2[i]) 
}

Apply가 있어서 일이 너무 단순해졌습니다

Array.prototype.push.apply(arr1,arr2) 

첨부: JavaScript 스크립트 성능을 최적화하는 방법

인터넷이 발전하고 네트워크 속도와 시스템 속도가 향상됨에 따라 점점 더 많은 웹사이트에서 풍부한 클라이언트 기술을 사용하고 있습니다. 이제 Ajax가 가장 널리 사용되는 방법입니다. JavaScript는 해석된 언어이므로 C/Java와 동일한 수준에 도달할 수 있는지 여부는 클라이언트에서 수행할 수 있는 작업을 제한합니다. 성능을 향상시키기 위해 이전에 JavaScript에 대해 수행한 작업을 기반으로 하고 싶습니다. 모든 사람이 JavaScript 스크립트 성능을 향상시키는 데 도움이 되기를 바라면서 내 경험에 대해 이야기해 보세요.

언어 수준

루프

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

사실 이 두 루프를 사용하는 방법은 매우 특별합니다. 테스트 중에 몇 가지 흥미로운 상황이 있었습니다. 부록을 참조하세요. 최종 결론은 이렇습니다.

루프 변수가 증가하거나 감소하는 경우 루프 변수에만 값을 할당하지 말고 마지막으로 읽을 때 중첩된 또는 - 연산자를 사용해야 합니다.

배열의 길이와 비교하고 싶다면 배열의 길이 속성을 미리 로컬 변수에 넣어서 쿼리 횟수를 줄여야 합니다.

지역변수와 전역변수

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

Eval을 사용하지 마세요

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

객체 조회 감소

JavaScript의 해석 가능성으로 인해 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 =b;s =c;로 작성해야 합니다.
s =a b c; 동일한 문자열에 대해 = 작업을 여러 번 수행하는 등 문자열을 수집하는 경우 캐시를 사용하는 것이 가장 좋습니다. 그것을 사용하는 방법? 다음과 같이 JavaScript 배열을 사용하여 수집하고 최종적으로 Join 메소드를 사용하여 연결합니다

var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");类型转换

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

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

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

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

2. 부동 소수점 숫자를 정수로 변환하는 것은 오류가 발생하기 쉽습니다. 실제로,parseInt()는 부동 소수점 숫자와 정수 사이가 아닌 문자열을 숫자로 변환하는 데 사용됩니다. Math.floor() 또는 Math.round()를 사용해야 합니다.
또한 2장의 객체 검색 문제와 달리 Math는 내부 객체이기 때문에 실제로 Math.floor()는 질의 메소드와 호출 시간이 많지 않고 가장 빠르다.

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

직접수량을 이용하세요

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

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

문자열 순회 연산

문자열에 대해 바꾸기, 검색 등의 루프 연산을 수행하려면 정규식을 사용해야 합니다. 왜냐하면 JavaScript 자체의 루프 속도는 상대적으로 느리고 정규식의 연산은 C로 작성된 API이며 성능은 매우 좋은.

고급 개체

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

DOM 관련

HTML 삽입

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

개체 쿼리

[""]를 사용하여 쿼리하는 것이 .items()보다 빠릅니다. 이는 .items()를 호출하면 쿼리와 함수 호출이 추가되는 이전 아이디어와 같습니다.

DOM 노드 생성

일반적으로 문자열을 사용하여 HTML을 직접 작성하여 노드를 생성할 수 있지만 실제로는 이렇게 합니다.

코드의 유효성은 보장할 수 없습니다

문자열 연산 효율이 낮다

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

타이머

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

기타

스크립트 엔진

내 테스트에 따르면 현재 JScript가 기본적으로 업데이트되지 않기 때문에 실행 속도와 메모리 관리 측면에서 Microsoft JScript의 효율성이 Mozilla의 Spidermonkey보다 훨씬 나쁩니다. 하지만 SpiderMonkey는 ActiveXObject를 사용할 수 없습니다

파일 최적화

파일 최적화도 매우 효과적인 방법입니다. 공백과 주석을 모두 삭제하고 코드를 한 줄에 넣으면 다운로드 속도가 로컬인 경우 주석과 속도가 빨라집니다. 공백은 해석 및 실행 속도에 영향을 주지 않습니다.

요약

이 기사에서는 JavaScript 실행 성능을 향상시키기 위해 JavaScript 프로그래밍에서 찾은 몇 가지 방법을 요약합니다. 실제로 이러한 경험은 다음과 같은 몇 가지 원칙을 기반으로 합니다.

쉽게 사용 가능한 것을 사용하는 것이 더 빠릅니다. 예를 들어 지역 변수는 전역 변수보다 빠르고, 직접 변수는 런타임에 객체를 생성하는 것보다 빠릅니다.

여러 쿼리가 필요한 쿼리를 먼저 캐싱하는 등 실행 횟수를 최대한 줄이세요.

문자열 링크와 같이 내장된 언어 기능을 최대한 사용하세요.

시스템에서 제공하는 API를 최대한 활용하세요. 이러한 API는 바이너리 코드로 컴파일되어 실행 효율성이 높기 때문입니다

同时，一些基本的算法上的优化，同样可以用在JavaScript中，比如运算结构的调整，这里就不再赘述了。但是由于JavaScript是解释型的，一般不会在运行时对字节码进行优化，所以这些优化仍然是很重要的。

当然，其实这里的一些技巧同样使用在其他的一些解释型语言中，大家也可以进行参考。

由于是以前做过的测试，测试代码已经不全，我补充了一部分如下：

var print; 
if(typeof document != "undefined" ){ 
  print = function(){ 
document.write(arguments[0]); 
} 
}else if(typeof WScript != "undefined" ){ 
  print = function(){ 
    WScript.Echo(arguments[0],arguments[1],arguments[2]); 
  } 
} 
function empty(){ 
} 
function benchmark(f){ 
  var i = 0; 
  var start = (new Date()).getTime(); 
  while(i < pressure){ 
    f(i++); 
  } 
  var end = (new Date()).getTime(); 
  WScript.Echo(end-start); 
} 
/* 
i=0 
start = (new Date()).getTime(); 
while(i < 60000){ 
  c = [i,i,i,i,i,i,i,i,i,i]; 
  i++; 
} 
end = (new Date()).getTime(); 
WScript.Echo(end-start); 
i=0 
start = (new Date()).getTime(); 
while(i < 60000){ 
  c = new Array(i,i,i,i,i,i,i,i,i,i); 
  i++; 
} 
var end = (new Date()).getTime(); 
WScript.Echo(end-start); 
*/ 
function internCast(i){ 
  return "" + i; 
} 
function StringCast(i){ 
  return String(i) 
} 
function newStringCast(i){ 
  return new String(i) 
} 
function toStringCast(i){ 
  return i.toString(); 
} 
function ParseInt(){ 
  return parseInt(j); 
} 
function MathFloor(){ 
  return Math.floor(j); 
} 
function Floor(){ 
  return floor(j); 
} 
var pressure = 50000; 
var a = ""; 
var floor = Math.floor; 
j = 123.123; 
print("-------------\nString Conversion Test"); 
print("The empty:", benchmark(empty)); 
print("intern:", benchmark(internCast)); 
print("String:"); 
benchmark(StringCast); 
print("new String:"); 
benchmark(newStringCast); 
print("toString:"); 
benchmark(toStringCast); 
print("-------------\nFloat to Int Conversion Test"); 
print("parseInt"); 
benchmark(ParseInt); 
print("Math.floor"); 
benchmark(MathFloor); 
print("floor") 
benchmark(Floor); 
function newObject(){ 
  return new Object(); 
} 
function internObject(){ 
  return {}; 
} 
print("------------\nliteral Test"); 
print("runtime new object", benchmark(newObject)); 
print("literal object", benchmark(internObject));  

附录2

代码1：

for(var i=0;i<100;i++){ 
    arr[i]=0; 
  }

代码2：

 var i = 0; 
  while(i < 100){ 
    arr[i++]=0; 
  } 

 代码3： 

 var i = 0; 
  while(i < 100){ 
    arr[i]=0; 
    i++; 
  }

 在firefox下测试这两段代码，结果是代码2优于代码1和3，而代码1一般优于代码3，有时会被代码3超过；而在IE 6.0下，测试压力较大的时候（如测试10000次以上）代码2和3则有时候优于代码1，有时候就会远远落后代码1，而在测试压力较小（如5000次），则代码2>代码3>代码1。

代码4：

var i = 0; 
  var a; 
  while(i < 100){ 
    a = 0; 
    i++; 
  } 

代码5：

 var a; 
  for(var i=0;i<100;i++){ 
    a = 0; 
  } 

上面两段代码在Firefox和IE下测试结果都是性能接近的。

代码6：

  var a; 
  var i=0; 
  while(i<100){ 
    a=i; 
    i++; 
  } 

代码7：

 var a; 
  var i=0; 
  while(i<100){ 
    a=i++; 
  } 

代码8：

 var a; 
  for(var i=0;i<100;i++){ 
    a = i; 
  } 

代码9：

 var a; 
  for(var i=0;i<100;){ 
    a = i++; 
  } 

这四段代码在Firefox下6和8的性能接近，7和9的性能接近，而6, 8 < 7, 9；

最后我们来看一下空循环

代码10： 

for(var i=0;i<100;i++){  } 

代码11：

  var i; 
  while(i<100){    i++;  } 

最后的测试出现了神奇的结果，Firefox下代码10所花的时间与代码11所花的大约是24:1。所以它不具备参考价值，于是我没有放在一开始给大家看。