JavaScript 성능 최적화 팁

JavaScript는 이미 현재 가장 인기 있는 언어입니다. 웹사이트 인터페이스, 서버측, 게임, 운영 체제, 로봇 등 다양한 작업을 수행할 수 있습니다.

그런데 솔직히 이렇게 인기가 많아도 성능은 아직 한계에 이르지 못했습니다. 예, 개선되고 있습니다. 하지만 모든 측면에서 기본 앱을 따라잡을 때까지는 HYBIRD 앱을 만들 때 성능을 최적화하기 위해 몇 가지 트릭을 사용해야 합니다.

말을 멈추고 예를 들어보세요

좋습니다. 우리의 목표는 더 빠른 JavaScript 코드를 작성하는 것입니다. 여기에 코드를 실행하는 데 도움이 되는 몇 가지 팁이 있습니다. 그리고 더 나은 메모리 효율성. 제가 엄밀히 말하면 DOM과 웹 애플리케이션에 대해 말하는 것이 아니라 DOM이 단지 일부인 JavaScript에 대해 이야기하고 있다는 점에 유의하세요.

보는 것이 믿는 대로, Firefox38 및 Chrome39 테스트를 사용하여 jsperf 테스트 사례를 첫 번째로 추가하고 싶습니다.

#1 타입 캐스트하지 마세요

JavaScript는 동적으로 타입이 지정되지만 속도를 높이려면 해당 기능을 사용하지 마세요. 변수 유형을 일관되게 유지하십시오. 이는 배열에도 적용됩니다. 비록 대부분 브라우저에 의해 최적화되지만, 서로 다른 유형의 배열을 혼합하지 마십시오. 이것이 JavaScript로 컴파일된 C/C++ 코드가 정적 타이핑을 사용하는 이유 중 하나입니다.

테스트 사례

추가: 문자열과 숫자 유형 간의 변환

{
  var x = '2';
  var y = 5;
  x = 2;
  x + y;
}

예를 들어 문자열을 숫자로 변환해야 하는데,parseInt와 parseFloat가 가장 많이 사용됩니다. 인기 좋은 방법? 보자.

　parseInt 테스트~parseFloat 테스트

Firefox는 비트 연산에 최적화되어 있으며parseInt 및 + 연산보다 약 99% 더 빠르게 코드를 실행합니다. Chrome은 분명히 비트 연산자를 선호하지 않으며, 이는parseInt 함수보다 62% 느립니다.

parseFloat("100")
+"100"
// 整型
parseInt("100", 10)
"100"|0
"100" >> 0
"100" << 0
// 仅适用于正数
"100" >>> 0

ParseFloat는 두 브라우저 모두에서 + 연산자보다 빠릅니다(Firefox 28%, Chrome 39%).

그렇다면 Node/Chrome 또는 Firefox 애플리케이션을 작성한다면? 제 생각에는 일반적으로parseInt 함수를 사용하는 것이 정확합니다.

#2 객체를 재구성하지 마세요

객체를 재구성하는 것은 비용이 많이 들지 않으므로 피해야 합니다.

삭제 연산자를 사용하지 마세요

삭제 작업은 null 속성을 할당하는 것보다 낫습니다. 속성이 훨씬 느립니다. null을 할당하면 두 브라우저 모두에서 99% 더 빠르지만 개체의 구조를 수정할 수는 없지만 삭제는 가능합니다.

편집: 제 생각에는 이것이 약간 오해의 소지가 있는 것 같습니다. 삭제 연산자를 사용해서는 안 된다는 의미는 아닙니다. 삭제 연산자에는 고유한 사용 사례가 있으며 객체의 메모리 누수를 방지할 수 있습니다.

　delete vs null

　나중에 속성을 추가하지 마세요

나중에 속성을 추가하지 마세요. 객체의 구조를 처음부터 정의하는 것이 가장 좋습니다. Firefox에서는 100% 더 빠르고 Chrome에서는 89% 더 빠릅니다.

동적 속성 VS 사전 정의된 구조

#3 문자열 연결

문자열 연결은 매우 비용이 많이 드는 작업인데 어떤 방법을 사용해야 할까요? 물론 Array.prototype.join은 아닙니다.

+= 연산자는 +보다 훨씬 빠른 것으로 보이며, 두 브라우저 모두 String.prototype.concat 및 Array.prototype.join이 더 빠릅니다. Array.prototype.join은 시장 기대에 맞춰 가장 느립니다.

문자열 연결 테스트

#4 정규식의 올바른 사용

RegExp.prototype.exec를 꼭 사용할 필요는 없겠죠?

하지만 RegExp.prototype.test와 String.prototype.search 간에는 성능 차이가 있습니다. 어떤 방법이 더 빠른지 살펴보겠습니다.

정규 표현식 방법

RegExp. 프로토타입.exec는 String.prototype.match보다 훨씬 빠르지만 완전히 똑같지는 않습니다. 차이점은 이 기사의 범위를 벗어납니다.

RegEx.prototype.test가 더 빠릅니다. 아마도 일치 항목이 발견된 인덱스를 반환하지 않기 때문일 것입니다. String.prototype.search는 필요한 일치 인덱스를 찾는 데에만 사용해야 합니다.

그러나 다른 문자열의 위치를 ​​찾기 위해 정규식을 사용해서는 안 되며, String.prototype.indexOf 메서드를 사용할 수 있습니다.

String.prototype.search VS String.prototype.indexOf

　　另一个有趣的基准是String.prototype.indexOf VS RegExp.prototype.test，我个人预计后者要快，这是在Firefox中发生的事情，但在Chrome中，事实并非如此。 RegExp.prototype.test在Firefox中快32％，而在Chrome中String.prototype.indexOf快33％。在这种情况下，你自己选择喜欢的方式吧。

　　＃5限制声明/传递变量的范围（作用域）

　　假如你调用一个函数，浏览器必须做一些所谓的范围查找，它的昂贵程度取决于它要查找多少范围。尽量不要依辣全局/高范围的变量，尽量使局部范围变量，并将它们传递给函数。更少的范围查找，更少的牺牲速度。

　　这个测试告诉我们，从局部范围内传递和使用变量比从更高的声明范围查找变量快，无论是Chrome和Firefox。

　　内部范围VS高范围VS全局

　　＃6你不需要所有的东西都用jQuery

　　大多数开发者使用jQuery做一些简单的任务，我的意思在一些场合你没有必要使用jQuery，你觉得用$.val()始终是必要的吗？就拿这个例子：

$('input').keyup(function() {
    if($(this).val() === 'blah') { ... }
});

　　这是学习如何使用JavaScript修改DOM的最重要原因之一，这样你可以编写更高效的代码。

　　用纯JavaScript100％完成同样的功能100%的速度更快，这是JSPerf基准测试

$('input').keyup(function() {
  if(this.value === 'blah') { ... }
});