Giving all developers the super power to see Jank on any device.

Create a bookmark and paste in the Junk code

javascript:(function(g)%20{var%20w=window,d=document,b=d.body,s=d.createElement(%27script%27),e=d.createElement(%27div%27),t=d.createElement(%27div%27),m=d.createElement(%27div%27),c=d.createElement(%27style%27),done=function(){e.setAttribute(%27class%27,%27%27);};c.innerHTML=%22@-webkit-keyframes%20blink%20{%200%{opacity:1;}%2075%{opacity:1;}%20100%{opacity:0}%20}%20#jank.show{display:block%20!important;%20-webkit-animation:blink%204.5s;}%22;s.

Click on Jank
Jank Vision will appear when Jank happens

Include counts.js in your code base. Call window.counts function inside your request animation frame funciton. Make sure to pass in the first arguments from the function to get sub-millisecond time.

var track = function(delta)
{ 
    window.counts(delta); 
    window.requestAnimationFrame(track);
}
track(0);

Jank is hard to find. A lot of it is understanding how the C code in written or at least what happening undernearth in the browser. The profile tool provides wonderful insight but at the cost of massive excess in the times it displays. Mobile profile has an even larger impact when running the profiler.

Generally is fine to turn on profiling and after recording everything see what's causing the biggest delays. But wouldn't it be wonderful if you could only turn on the profile when the frame is huge? The next best thing is to selectivly turn it when the FPS drops. (Also you should consider turning it on and off around sections of code you supect are causing issues.)

var profile = null;
var track = function(delta)
{
    if (profile) 
    {
        console.profileEnd(profile);
        profile = null;
    }
    
    var fps = window.counts(delta, true); 
    
    if (fps.fps < 30 || fps.max < 90) 
    {
        profile = 'capture-'+delta;
        console.profile(profile);
    }
    
    window.requestAnimationFrame(track);
}
track(0);

All introspection and performance metricing tools as susceptible to the observer effect. By recording a metric will impact the actual measurement of that metric. Tools like Google Dev tools Timeline and profiler are in valuable. But can impact getting as true to life number as possible. Also aren't available across all mobile and desktop environments.

The purpose of Jank Vision is to reduce the impact of the observer effect as much as possible while allowing ease of use across all platforms and compare performance metrics as accuratly as possible.

In order to be as performant as possible typed arrays are used for tracking and calculations are defered until after 1000ms has passed. All of the objects should be static so it will avoid the garbage collection as much as physically possible.

Jank Vision is a bookmarklet build from the frame per second tracker in PerfView. A project to create mobile Backbone Views that are performant with high FPS and a low memory footprint.

BSD