### Instrumenting a Polymer 1.x App with User Timing API

The User Timing API let's us visualize custom timing intervals using the dev tools that are built into your web browser. While this is useful for a lot of different cases, one fun trick is to use this API to visualize the cost of the custom elements in your Polymer app.

Polymer has a few key methods whose invokations tend to represent the majority of time spent creating and initializing Polymer custom elements. Let's collect the methods we want to measure in an array:

```javascript
var instrumentedMethods = [
  // Standard custom element lifecycle callbacks:
  'attachedCallback',
  'detachedCallback',
  'createdCallback',

  // Interesting Polymer-specific methods:
  '_ready',
  '_registerFeatures',
  '_finishRegisterFeatures',
  '_prepBehavior',
  '_initFeatures',
  '_marshalBehavior',
  '_stampTemplate',
];
```

We know the methods we want to measure, now we need a way to hygeinically instrument an arbitrary method. Let's craft a helper to do this:

```javascript
function instrument(name, fn) {
  var count = 0;
  return function() {
    var start = this.is + '-' + name + '-start-' + count;
    var end = this.is + '-' + name + '-end-' + count;
    ++count;
    performance.mark(start);
    var result = fn.apply(this, arguments);
    performance.mark(end);
    performance.measure(this.is + '::' + name, start, end);
  }
}
```

We now have the two most important ingredients. Next, let's make a Polymer feature by applying instrumentation to the relevant `Polymer.Base` methods and mix it in to Polymer's base implementation for all custom elements:

```javascript
var UserTiming = instrumentedMethods.reduce(function(proto, method) {
  proto[method] = instrument(method, Polymer.Base[method]);
  return proto;
}, {});

Polymer.Base._addFeature(UserTiming);
```

We now have the code necessary to instrument Polymer, but it's important to make sure that the instrumentation happens at the right time. Put the instrumentation code in an HTML Import and add it to the end of `polymer.html` (right after the import for `dom-bind.html`:

```html
<link rel="import" href="src/lib/experimental/user-timing.html">
```