Chrome web inspector : CPU profiler

Question

My program takes about 20 sec to load (lot of svg objects). I am trying to profile using chrome web inspector. It shows a total of 19.16 sec, but the breakdown doesn't quite add up. I tried bottom up, top down and sorted in different combination. Still cannot identify the bottle neck. I could see the data receive within few milliseconds from server, but takes long to render it.

Also in the %ge view, the total is 98%, but the rest is less than 0.05% individually and doesn't seems right.

In my previous qn , I asked how to show #calls and average. I doubt a recursive call may cause this, but at the same time the total time should reflect that.

How can I identify the function which causes this delay. Any help appreciated.

Answer 1

You can use this function to log time differences between calls:

var timeVal = new Date().getTime();
var log = function(name){
    var str = new Date().toLocaleTimeString();
    var newTime = new Date().getTime();
    str += " (" + (newTime - timeVal) + "ms)";
    timeVal = newTime;
    console.log(str, name)
}

Use it like this:

log("prepare for something")
// do something
log("something happened");

Output:

16:57:46 (2496ms) prepare for something
16:57:46 (130ms) something happened