measure page loading and rendering time

[Janasonne...@web.de]

Hello,

I am trying to measure the page loading and rendering time. I have a html page which shows a network graph with the help of a java script library. I want to measure the time from when I start loading the page until the graph is fully rendered.

I tried to get this time with the developer tools. When I use the network tab,  I get just the page load time or so (until the domContentLoaded Event) but not the rendering time because after the domContentLoaded Event I still see the graph growing.

Then I tried it with the timeline tab. There I see moving the green and yellow bars when the graph is growing. So it seems that something is measured here. But because I must press the button to record and stop the measurement I must substract the time which is too much because of that. Yes I know, there some shortcuts for that. But maybe there is a simpler way to get the Mesurement that I want, but I don't see it.

Please can you give me a hint or something like that?

I am looking forward to hear from you guys, thanks.

[Ilya Tikhonovsky]

You can use console.time("a label") and console.timeEnd("a label") for measuring the time interval of the javascript parts and get the numbers in console,

There is console.timeStamp("a label") which generates marks on Timeline. If you code has the place where the rendering is definitely finished then

you could put console.timeStamp there. As you probably know there is shortcut Cmd+R that reloads the inspected page and starts Timeline automatically.

So with this shortcut and console.timeStamp("lalala") you would get User-produced Timeline events with exact timing.

Regards,
Tim.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/14e910ad-75c0-4bc4-956a-4a2e1bd4d651%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Janasonne...@web.de]

Thank you very much for your post, Tim. I tried it out, what you said. But the time, which it measures is very very short (see file "Console_Output"). The rendering time is not considered. I have added screenshots where you hopefulls can see my problem. I added the lines console,time("a label") and console.timeEnd("a label") in the file "sigmatest.js" at the start and at the end of the file. Maybe this is the wrong file to do that? I don't know. I also added this file. Mayber you can see what's the problem?

I am really glad when I hear from someone.
Best regards,
Jana

[Alexei Filippov]

Jana,

Try moving console.timeEnd("time"); to the end of init function.

[Janasonne...@web.de]

I tried it. It helped a bit, the time is much longer now. But the output in the console appears when loading of the site is finish, but before the graph appears/grows.

[Alexei Filippov]

That means it's doing drawing in an asynchronous way after draw method has returned. Try using Timeline panel and/or CPU profiler to figure out what it is doing.

[Janasonne...@web.de]

Ok, I took screenshots from the Timeline with Events and memory. The memory shows a zigzag line from the moment on, when the graph starts to get rendered.
Also I made a CPU profile. But I don't know, what I can learn from that. I am really a Beginner with the Developer Tools.... But I am really happy, that you all try to help me, thanks a lot.

[Janasonne...@web.de]

 

I still have no solution for my problem. Please, has sombody experience with this? Mayber someone can "interpret" my screenshots or give a hint?
Best regards

[Andrey Kosyakov]

If you're looking for the time it takes to load and render the page, the Timeline make it a bit easier in recent canaries -- the first Paint event after DOM content is loaded is marked with a green mark like this:

Best regards,

Andrey.

On Fri, Jan 31, 2014 at 1:34 PM, <Janasonne...@web.de> wrote:

 

I still have no solution for my problem. Please, has sombody experience with this? Mayber someone can "interpret" my screenshots or give a hint?
Best regards

--

You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/708b40d3-8712-49f4-8551-c3694b4a5f6a%40googlegroups.com.