Google Reader

使用对象的技巧

● 用构造函数构造对象。这样可以保证所有的由该构造函数构造的对象都具有相同的隐藏类，而且可以有助于避免修改这些隐藏类。有个附加的好处就是，它会比Object.create()稍快。

● 在你的程序中，对象的类型数目以及它们的复杂程度是没有限制的（不难理解的是：长原型链会可能会导致有害的结果，那些只有少数属性的对象的特殊表现就是，它们会比那些更大的对象运行得要快一点）。对于“热点”对象，尽量保持原型链的简短，以及属性数目较少。

对象的复制

对于应用的开发者来说，对象的复制是一个常见的问题。虽然基础测试可能表明V8在不同的情况下对这类问题都处理得很好，但是，当你要复制任何东西的时候，仍然需要小心。复制大的东西通常是缓慢的——所以不要这样做。JavaScript中的for…in循环处理这种事情特别的糟糕，因为它拥有可怕的规范，这使得它在任何引擎中处理任何对象，都不会获得良好的速度。

当你一定要在一段性能要求苛刻的代码中复制对象（并且你无法摆脱这种状况），那么就用数组或者一个自定义的“拷贝构造函数”，帮你逐一明确地复制对象的每一个属性。这可能是实现的最快的方式：

function clone(original) {
  this.foo = original.foo;
  this.bar = original.bar;
}
var copy = new clone(original);

模块模式中的缓存函数

在模块模式中缓存你的函数可以带来性能的提高。看看下面的例子，因为它总是会强制进行成员函数的复制，你习惯看到的变化可能会更慢。

这里有个关于原型对比模块模式的性能测试。

  // Prototypal pattern
  Klass1 = function () {}
  Klass1.prototype.foo = function () {
      log('foo');
  }
  Klass1.prototype.bar = function () {
      log('bar');
  }

  // Module pattern
  Klass2 = function () {
      var foo = function () {
          log('foo');
      },
      bar = function () {
          log('bar');
      };

      return {
          foo: foo,
          bar: bar
      }
  }

  // Module pattern with cached functions
  var FooFunction = function () {
      log('foo');
  };
  var BarFunction = function () {
      log('bar');
  };

  Klass3 = function () {
      return {
          foo: FooFunction,
          bar: BarFunction
      }
  }

  // Iteration tests

  // Prototypal
  var i = 1000,
      objs = [];
  while (i--) {
      var o = new Klass1()
      objs.push(new Klass1());
      o.bar;
      o.foo;
  }

  // Module pattern
  var i = 1000,
      objs = [];
  while (i--) {
      var o = Klass2()
      objs.push(Klass2());
      o.bar;
      o.foo;
  }

  // Module pattern with cached functions
  var i = 1000,
      objs = [];
  while (i--) {
      var o = Klass3()
      objs.push(Klass3());
      o.bar;
      o.foo;
  }
// See the test for full details

使用数组的技巧

接下来我们来关谈论一下关于数组的一些技巧。通常情况下，不要删除数组的元素。否则会使得数组内部表现形式发生转变，从而变得更慢。当键变得稀疏的时候，V8会最终把元素转换成更慢的字典模式。

数组字面量

用数组字面量创建数组是有用的，因为它们会给VM一些暗示，让它知道数组的大小和类型。字面量通常对规模不大的数组是好处的。

// Here V8 can see that you want a 4-element array containing numbers:
var a = [1, 2, 3, 4];

// Don't do this:
a = []; // Here V8 knows nothing about the array
for(var i = 1; i <= 4; i++) {
     a.push(i);
}

存储单一类型VS混合类型

在同一个数组中存储不同类型的数据（例如，数字，字符串，undefined，或者true/false），从来不是一个好主意（也就是像这样，vararr=[1,“1”,undefined,“true”]）。

类型推断的性能测试

我们可以从结果中看出，ints数组是最快的。

稀疏数组VS满数组

当你使用稀疏数组的时候，要意识到，在它们中访问元素的效率要比在满数组中要慢得多。这是因为如果数组中只有少数元素，V8不会为元素从新分配连续的内存空间。它们会被一个字典所管理，这样可以节约内存空间，但是会消耗访问时间。

稀疏数组对比满数组的测试

满数组的加法和无0的数组的加法实际上是最快的。而一个满数组中是否含有0对它的运行效率没有影响。

塞满的数组VS多孔的数组

避免数组中的“孔”（可能通过删除元素或者用a[x]=foo，而x>a.length来创建的孔）。在一个“满”的数组中，即使是仅仅是一个元素被删除掉，也会变得慢得多。

塞满的数组对比多孔数组的测试

预分配数组VS运行时分配

不要根据数组最大的大小预分配一个大数组（例如大于64K的元素），应该让你的数组在运行的时候自我分配。在我们进行对这个技巧的性能测试之前，请记住，这只适合部分JavaScript浏览器。

在Nitro引擎（Safari）使用预分配的数组会更有好处。但是，在其他的引擎中（V8，SpiderMonkey），非预分配会更高效。

预分配数组的测试

// Empty array
var arr = [];
for (var i = 0; i < 1000000; i++) {
    arr[i] = i;
}

// Pre-allocated array
var arr = new Array(1000000);
for (var i = 0; i < 1000000; i++) {
    arr[i] = i;
}

优化你的应用程序

在web应用程序的世界里面，速度是一切。没有用户希望一个电子表格程序需要几秒钟的时间去计算一列数据的和，或者用一分钟的时间去得到表格的汇总信息。这就为什么你需要压榨你代码中的每一点的性能的原因，这有时可能会苛刻。

虽然理解和提高你的应用程序性能是有用的，但是它依然很困难。我们给出下面几步建议去解决你程序性能的瓶颈：

● 测量它：找出你应用程序中慢的地方（~45%）

● 理解它：发现实际的问题是什么（~45%）

● 解决它！（~10%）

var totalTime,
    start = new Date,
    iterations = 1000;
while (iterations--) {
  // Code snippet goes here
}
// totalTime → the number of milliseconds taken 
// to execute the code snippet 1000 times
totalTime = new Date - start;

内存管理对于现代的单页面应用程序（例如AngularJS，Backbone，Ember）相当的重要，因为它们几乎从来不会刷新页面。这就意味着内存泄露会相当的明显和迅速。这在移动单页面应用程序中存在相当大的陷阱，因为内存的限制，且存在大量的例如email客户端这样的长期运行的程序或者社交网络应用程序。能力越大，责任越大。（推荐阅读：《每位开发人员都应铭记的10句编程谚语》）

有许多方法可以避免这中情况。在Backbone中，确保你总是用dispose()（当前可以在Backbone(edge)中使用）来处理了旧的视图和引用。这个函数是最近新增的，可以移除任何添加到视图的“event”对象的所有处理函数，以及视图作为第三个参数（回调上下文）传入的任何集合或者模型的事件监听器，dispose()同样可以被视图的remove()所调用，当元素从页面中被移除时管理主要的基本内存清理工作。其他的类库，如Ember，当它检测到元素已经从视图中被移除的时候，它会移除相应的观察者，以避免内存泄露。

DerickBailey给了我们一些明智的建议：

“除了了解事件处理在引用层面是如何工作的，在JavaScript按照标准规则来管理你的内存，一切就会没问题。如果你想向一个塞满用户数据的Backbone集合中加载数据，如果你想那些集合稍后被清理并不占据内存，你必须移除集合所有的引用以及其中独立的对象。一旦你移除所有的引用，清理工作就可以进行。这就是标准的JavaScript垃圾回收规则”

在这篇文章中，Derick涵盖了在使用Backbone.js中许多常见的内存陷阱以及解决方案。

这里也有一篇由FelixGeisendrfer编写关于如何调试Node中的内存泄露的指导，很值得一读，尤其它形成了你的更广泛SPA堆里面的一部分。

最小化重排

当浏览器为了重绘（re-rendering）必须重新计算元素的位置和几何形状的时候，我们把这个过程称作重排（reflow）。在浏览器中，重排是一个用户阻塞的操作，所以了解如何去提高重排的性能会很有帮助。

你应该用批量处理的方法去触发重排或重绘，并且要有节制地使用这些方法。尽量不进行DOM操作也很重要。用轻量级的DocumentFragment（文本片段）对象来达到这样的效果。你可以把它当做是获取部分DOM树的方法，或者是创建新的文本“片段”的方法。对比不断地向DOM树添加节点，我们使用文本片段构建起我们需要的内容并且只进行一次DOM插入操作。这样可以避免过度的重排。

例如，我们写了一个向一个元素中添加20个div函数。简单地添加每个div到元素中会触发20次重排。

function addDivs(element) {
  var div;
  for (var i = 0; i < 20; i ++) {
    div = document.createElement('div');
    div.innerHTML = 'Heya!';
    element.appendChild(div);
  }
}

为了解决这个问题，我们使用DocumentFragment来代替逐个添加div。使用我们像appendChild这样的方法把DocumentFragment添加到元素中的时候，文本片段中所有的子节点都会被添加到元素中，这样只会触发仅仅一次重排。

function addDivs(element) {
  var div; 
  // Creates a new empty DocumentFragment.
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < 20; i ++) {
    div = document.createElement('a');
    div.innerHTML = 'Heya!';
    fragment.appendChild(div);
  }
  element.appendChild(fragment);
}

你可以在MaketheWebFaster,JavaScriptMemoryOptimization和FindingMemoryLeaks.阅读到更多关于这方面的主题。

JavaScript内存泄露检测器

为了帮助发现JavaScript内存泄露，我两个谷歌的同事（MarjaHlttandJochenEisinger）开发了一个和Chrome开发者工具共同使用的工具（具体来说，就是一个远程检测协议），可以检索堆快照和探测出哪些对象导致了内存泄露。

有一篇文章完整地介绍了怎么使用这个工具，我鼓励你去看看或者去看LeakFinder的项目主页。

更多信息：也许你想知道为什么这个工具没有集成到我们的开发者工具当中。有两个原因，第一，它最初是为了帮助我们在Closure库中为我们检测特定的内存场景。第二，它作为一个扩展工具来使用将会更有意义（甚至可以作为一个扩展程序，如果我们可以适当地获得堆性能分析扩展程序的API的话）。

V8标签：调试性能&垃圾回收

Chrome支持通过js-flags直接传入一些标签到V8引擎中来获取关于引擎优化过程中更多细节。例如，这可以追溯V8的优化：

"/Applications/Google Chrome/Google Chrome" --js-flags="--trace-opt --trace-deopt"

Windows用户可以运行chrome.exe–js-flags=”–trace-opt–trace-deopt”

在开发你的应用程序的过程中，这些V8标签会有所帮助：

● trace-opt–记录已经被优化的函数，已经显示优化器无法识别并且跳过的代码。

● trace-deopt–记录运行过程中需要逆优化的代码列表。

● trace-gc–记录每次进行垃圾回收的跟踪线。
V8的tick-processing脚本用*标注已经进行过优化的函数，用~标记没有被优化的函数。

如果你想了解更多关于V8引擎标签以及V8内部工作原理的话，我强烈建议你浏览一篇关于V8引擎内部工作原理的文章，它总结了一些目前为止最好的资源。

高精度时间以及导航计时API

高精度时间（HRT）是一个不受系统时钟以及用户调整影响的亚毫秒级的JavaScript接口。它提供了比newDate和Date.now()更为精准的时间测量。这样可以帮助我们写出性能良好的基础测试。

HRT目前在Chrome（稳定版）中可以通过window.performance.webkitNow()来获得，但是前缀在ChromCanary中被省略了，可以通过window.performance.now()来获取。PaulIrish在HTML5Rocks中写了一篇关于HRT的文章。

所以，我们现在知道了目前的时间，但是如果我们需要API给出更精确的时间去测量web中的性能呢？

现在，我们有个NavigationTimingAPI的东西可以使用。这个API提供了一个简单的方法去获取当页面加载完毕并展示给用户时的精确和详细的时间测量。时间信息可以通过window.performance.timing暴露出来，你可以在控制台中简单地使用它：

观察上面的数据，我们可以抽离出一些相当有用的信息。例如，网络延迟为responseEnd-fetchStart，从服务器加载页面时间为loadEventEnd-responseEnd，以及导航和页面加载之间的的耗时为loadEventEnd-navigationStart。

正如你所看到的，一个performance.memory属性同样可以提供例如总堆大小的JavaScript内存使用情况。

关于导航计时API更多的细节，你可以阅读SamDutton的一篇相当好的文章MeasuringPageLoadSpeedWithNavigationTiming.

ABBOUT:MEMORY和ABOUT:TRACING

Chrome中的about:tracing提供了有效的视图，帮助我们观察浏览器的性能，记录Chrome如每个线程，选项卡，和进程的所有活动。

这个工具真正的有用的地方是可以允许你获取Chrome的浏览器引擎盖下的分析数据，然后你可以恰当地调整你的JavaScript程序，或者优化你资源加载过程。

LilliThompson有一篇写给游戏开发者的文章，关于如何使用about:tracing去分析WebGL游戏。这篇文章对于普通的JavaScripters依然适用。

Chrome中使用about:memory也很有帮助，因为它显示了每个选项卡精确的内存使用，这样可以有效的跟踪潜在的内存泄露。

总结

正如我们所见，在JavaScript的引擎世界里面，有许多的隐藏的性能陷阱，事实上并没有性能提高的银弹。只有当你在（现实世界的）测试环境中结合一系列的优化，你才会意识到最大的性能获益。但是即使这样，理解引擎内部原理以及优化你的代码可以给你提高你应用程序性能的灵感。

测量它，理解它，解决它。不断重复这个过程。

记得关注优化，但要避免一些小的优化从而获得更大的便利。例如，一些开发者在循环中为便利而是用.forEach和Object.keys来代替for和forin，即使它们更慢，但是在可以接受范围内，它们更为方便。你需要一个清醒的头脑去分析你的应用程序中哪些是需要优化的，哪些是不需要的。

同样，意识到即使JavaScript引擎不断变得更快，一个真证的瓶颈其实是DOM。重排和重绘的最小化是相当重要的，所以记住如果不是非不得已，不要触碰DOM。并且关注网络情况。HTTP请求是珍贵的，尤其是在移动终端，你应该使用HTTP缓存来减少资源的消耗。