# Tracking render performance

**URL:** <https://discourse.aurelia.io/t/tracking-render-performance/1681>\
**Category:** Help Requests\
**Created:** [September 27, 2018, 3:58pm UTC](https://discourse.aurelia.io/t/tracking-render-performance/1681 "2018-09-27T15:58:20Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [September 28, 2018, 11:41am UTC](https://discourse.aurelia.io/t/tracking-render-performance/1681/4 "2018-09-28T11:41:28Z")

</div>

FYI: This solution worked until now quite good. I’m now able to track when the page rendered. Sometimes there might be another render event fired because of late evaluated binding behaviors but this is catchable with a variable to only track it once. Keep in mind that the timeout add’s 1s to the tracked time which must be removed. Here is my solution.

```auto
/**
 * Extend original function with additional functionality
 * @param {Object} proto
 * @param {string} fnName
 * @param {Function} callback
 */
export function extendFn(proto: Object, fnName: string, callback: Function): void {
  const origFn = proto[fnName];
  proto[fnName] = function extendedFn() {
    let result;
    if (typeof origFn === 'function') {
      result = origFn.apply(this, arguments);
    }
    callback.apply(this, arguments);
    return result;
  };
}

/**
 * Hook into micro task queue to track when rendering is finished
 * @param {TaskQueue} taskQueue
 * @param {EventAggregator} events
 */
function hookRendering(taskQueue: TaskQueue, events: EventAggregator): void {
  let timeoutHandle;
  extendFn(taskQueue, 'flushMicroTaskQueue', () => {
    if (timeoutHandle) {
      clearTimeout(timeoutHandle);
    }
    const actual = performance.now();
    timeoutHandle = setTimeout(() => {
      events.publish('app.rendered', performance.now() - actual);
    }, 1000);
  });
}

```

The actual page load time can be tracked this way:

```auto
let initialPageLoad = true;
events.subscribe('app.rendered', delta => {
  if (initialPageLoad) {
    initialPageLoad = false;
    log.debug(`Page loaded in ${performance.now() - delta}ms`);
  }
})

```

---

_[View the full topic](https://discourse.aurelia.io/t/tracking-render-performance/1681)._