JavaScript 웹 성능을 향상시키는 방법에 대한 팁 요약

Javascript 성능 최적화는 결코 서면 기술이 아닙니다. Nicholas의 기술 발전에는 효율적인 JS 코드 작성에 도움이 되는 10가지 제안이 나와 있습니다.

1. 지역 변수 정의

변수가 참조되면 JavaScript는 이 변수를 다른 위치에서 찾습니다. 범위 체인의 구성원. 범위 체인은 현재 작동하는 사용 가능한 변수 세트를 참조하며 다양한 주류 브라우저에는 로컬 변수 세트와 전역 변수 세트라는 두 부분이 포함되어 있습니다.

간단히 말하면, JavaScript 엔진이 범위 체인에서 더 깊은 곳을 검색하면 작업에 더 많은 시간이 소요됩니다. 엔진은 먼저 여기에서 시작하여 지역 변수를 찾은 다음 함수 매개변수, 지역적으로 정의된 변수를 찾고 마지막으로 모든 전역 변수를 반복합니다.

지역 변수는 이 체인의 시작 부분에 있기 때문에 지역 변수를 찾는 것이 전역 변수를 찾는 것보다 항상 빠릅니다. 따라서 전역 변수를 두 번 이상 사용하려면 다음과 같이 이를 지역 변수로 정의해야 합니다.

with() 문이 범위 체인의 시작 부분에 추가 변수를 추가하기 때문입니다. 추가 변수는 변수에 액세스해야 할 때 JavaScript 엔진이 with() 문에 의해 생성된 변수를 먼저 스캔한 다음 지역 변수, 마지막으로 전역 변수를 스캔해야 함을 의미합니다.

그래서 with()는 본질적으로 지역 변수에 전역 변수의 모든 성능 단점을 제공하고 결과적으로 Javascript 최적화를 탈선시킵니다.

3. 클로저를 주의해서 사용하세요

아직 "클로저"를 알지 못할 수도 있지만, 깨닫지도 못한 채 이 기술을 자주 사용하고 있을 수도 있습니다. 클로저는 기본적으로 JavaScript의 새로운 것으로 간주됩니다. 다음과 같이 즉각적인 함수를 정의할 때 클로저를 사용합니다.

var blah = document.getElementById('myID'),
blah2 = document.getElementById('myID2');

클로저의 문제점은 정의에 따라 범위 체인에 클로저 변수, 로컬 변수라는 세 가지 객체가 있다는 것입니다. 및 전역 변수. 이러한 추가 개체는 제안 1과 2에 언급된 성능 문제를 유발합니다.

하지만 Nicholas가 질식 때문에 식사를 중단하라고 요구하는 것은 아니라고 생각합니다. 클로저는 여전히 코드 가독성 등을 향상시키는 데 매우 유용합니다. 단지 클로저를 남용하지 마세요(특히 루프에서).

4. 개체 속성 및 배열 요소는 변수보다 느립니다

JavaScript 데이터에는 일반적으로 값, 변수, 개체 속성 및 배열 요소의 네 가지 액세스 방법이 있습니다. 최적화를 고려할 때 숫자와 변수는 거의 동일하게 수행되며 객체 속성 및 배열 요소보다 훨씬 빠릅니다.

따라서 객체 속성이나 배열 요소를 여러 번 참조할 때 변수를 정의하면 성능을 향상시킬 수 있습니다. (이 규칙은 데이터를 읽고 쓸 때 유효합니다.)

이 규칙은 대부분의 경우 정확하지만 Firefox는 변수보다 실제 성능을 향상시킬 수 있는 배열 인덱스 최적화에서 몇 가지 흥미로운 작업을 수행했습니다. 그러나 다른 브라우저의 배열 요소의 성능 단점을 고려하면 실제로 Firefox의 성능만을 위해 개발하지 않는 한 배열 검색을 피해야 합니다.

5. 배열을 너무 깊이 파고들지 마세요

또한 프로그래머는 배열을 너무 깊이 파고드는 것을 피해야 합니다. 더 많은 레벨로 들어갈수록 작업 속도가 느려지기 때문입니다. 간단히 말하면, 중첩된 수준이 많은 배열의 작업은 배열 요소 검색이 느리기 때문에 느립니다. 세 가지 수준이 중첩된 배열 요소에 대해 작업을 수행하는 경우 배열 요소 검색을 한 번이 아닌 세 번 수행해야 한다고 상상해 보십시오.

따라서 foo.bar를 계속 참조한다면 var bar = foo.bar를 정의하여 성능을 향상시킬 수 있습니다.

6. for-in 루프(및 함수 기반 반복)를 피하세요.

여기 또 다른 독단적인 조언이 있습니다: for-in 루프를 사용하지 마세요. 이에 대한 논리는 매우 간단합니다. 컬렉션의 요소를 반복하려면 for-in 루프 대신 for 루프나 do-while 루프를 사용할 수 있습니다. 항목을 배열하지만 시간이 더 필요합니다.

이러한 요소를 반복하려면 JavaScript는 각 요소에 대한 함수를 생성해야 합니다. 이 함수 기반 반복은 일련의 성능 문제를 가져옵니다. 추가 함수는 함수 객체가 생성되고 소멸되는 컨텍스트를 도입합니다. 스코프 체인 상단에 추가 요소를 추가합니다.

7. 루프시 제어조건과 제어변수 결합

성능면에서 루프는 여러번 반복 실행되기 때문에 항상 루프에서 피해야 할 작업이 화제였습니다. 따라서 성능 최적화가 필요한 경우 루프를 먼저 실행하면 가장 확실한 성능 향상을 얻을 수 있습니다. 루프를 최적화하는 한 가지 방법은 루프를 정의할 때 제어 조건과 제어 변수를 병합하지 않고 결합하는 것입니다. 각 반복마다 나타납니다. JavaScript 엔진에는 다음이 필요합니다:

#1：检查 x 是否存在
#2：检查 x 是否小于 0 （译者注：我猜这里是作者的笔误）
#3：使 x 增加 1

然而如果你只是迭代元素中的一些元素，那么你可以使用while循环进行轮转来替代上面这种操作：

var x = 9;
do { } while( x-- );

如果你想更深入地了解循环的性能，Zakas提供了一种高级的循环优化技巧，使用异步进行循环（碉堡了！）

8. 为HTML集合对象定义数组

JavaScript使用了大量的HTML集合对象，比如 document.forms，document.images 等等。通常他们被诸如 getElementsByTagName、getElementByClassName 等方法调用。

由于大量的DOM selection操作，HTML集合对象相当的慢，而且还会带来很多额外的问题。正如DOM标准中所定义的那样：“HTML集合是一个虚拟存在，意味着当底层文档被改变时，它们将自动更新。”这太可怕了！

尽管集合对象看起来跟数组很像，他们在某些地方却区别很大，比如对于特定查询的结果。当对象被访问进行读写时，查询需要重新执行来更新所有与对象相关的组分，比如 length。

HTML集合对象也非常的慢，Nicholas说好像在看球的时候对一个小动作进行60倍速慢放。另外，集合对象也有可能造成死循环，比如下面的例子：

var ps = document.getElementsByTagName('p');
 
for (var i=0; i < ps.length; i++ ) {
  var p = document.createElement("p"); 
  document.appendChild(p);
}

这段代码造成了死循环，因为 ps 表示一个实时的HTML集合，并不是你所期望的数组。这种实时的集合在添加

标签时被更新，所以i < p.length 永远都不会结束。

解决这个问题的方法是将这些元素定义成数组，相比只设置 var ps = document.getElementsByTagName(‘p') 稍微有点麻烦，下面是Zakas提供的强制使用数组的代码：

function array(items) {
  try {
    return Array.prototype.concat.call(items);
  } catch (ex) {
 
    var i    = 0,
      len   = items.length,
      result = Array(len);
 
    while (i < len) {
      result[i] = items[i];
      i++;
    }
 
    return result;
  }
}
 
var ps = array( document.getElementsByTagName(&#39;p&#39;) );
 
for (var i=0l i < ps.length; i++ ) {
  var p = document.createElement("p"); 
  document.appendChild(p);
}

9. 不要碰DOM！

不使用DOM是JavaScript优化中另一个很大的话题。经典的例子是添加一系列的列表项：如果你把每个列表项分别加到DOM中，肯定会比一次性加入所有列表项到DOM中要慢。这是因为DOM操作开销很大。
Zakas对这个进行了细致的讲解，解释了由于回流（reflow）的存在，DOM操作是非常消耗资源的。回流通常被理解为浏览器重新选渲染DOM树的处理过程。比如说，如果你用JavaScript语句改变了一个p的宽度，浏览器需要重绘页面来适应变化。
任何时候只要有元素被添加到DOM树或者从DOM树移除，都会引发回流。使用一个非常方便的JavaScript对象可以解决这个问题——documentFragment，我并没有使用过，但是在Steve Souders也表示同意这种做法之后我感觉更加肯定了。
DocumentFragment 基本上是一种浏览器以非可视方式实现的类似文档的片段，非可视化的表现形式带来了很多优点，最主要的是你可以在 documentFragment 中添加任何结点而不会引起浏览器回流。

10. 修改CSS类，而不是样式

你也许听说过：修改CSS类必直接修改样式会更高效。这归结于回流带来的另一个问题：当布局样式发生改变时，会引发回流。
布局样式意味着任何影响改变布局的变化都会强制引起浏览器回流。比如宽度、高度、字号、浮动等。
但是别误会我的意思，CSS类并不会避免回流，但是可以将它的影响最小化。相比每次修改样式都会引起回流，使用CSS类一次修改多个样式，只需要承担一次回流带来的消耗。
因此在修改多个布局样式的时候，使用CSS类来优化性能是明智的选择。另外如果你需要在运行时定义很多歌CSS类，在DOM上添加样式结点也是不错的选择。

위 내용은 JavaScript 웹 성능을 향상시키는 방법에 대한 팁 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!