Download - Performance from the user's perspective
Performancefrom the User‘s perspective
http://github.com/orangecoding
@Orangecoding
We m e a s u r e h e r e
B u t s h o u l d n ‘ t w e
m e a s u r e h e r e ?
What we really measure...
User hits enter(w3c.org)
Stuff is beeing send to the user
{Server does something}
User can actually use the pageStuff is beeing send to the user
What we really measure...
User hits enter(w3c.org)
Stuff is beeing send to the user
{Server does something}
User can actually use the page
what happens here?
Yeah, but when??
What we really measure...
User hits enter(w3c.org)
Stuff is beeing send to the user
{Server does something}
User can actually use the page
what happens here?
What we really measure...
User hits enter(w3c.org)
Stuff is beeing send to the user
{Server does something}
User can actually use the page
what happens here?
jQuery(document).onReady(function(){ //measure time})
Internet
3 Partyrd
Content Server
Processing
Visibility ends here
Navigation.timing(http://www.w3.org/TR/navigation-timing/)
User hits enter(w3c.org)
User can actually use the page
what happens here?
Name DescriptionnavigationStart load/unload Event was triggered
fetchStart Moment just before the browser starts to do anything.
domainLookupStartMoment just before browser checks DNS to resolve domain name.
connectStartTime when browser starts connecting to the server. If == cache, value same as domainLookupEnd.
requestStartThe moment just before browser starts requesting the resource (from server or cache)
responseStartReturns the time just after browser receives first byte of the response from server, cache or local resource.
domContentLoadedEventStart The time just before onDocumentReady event is fired,
loadEventStart The time just before onLoad event is fired,
■ Network latency: responseEnd-fetchStart■ The time taken for page load once the page is received from the server: loadEventEnd-responseEnd■ The whole process of navigation and page load: loadEventEnd-navigationStart.
Can we already use it..?
Demo
Thanks for listening...
http://github.com/orangecoding
@Orangecoding
Demo/Bookmarklet (1) © by Kaaes --> http://kaaes.github.com/timing/
Weitere Erklärungen auf HTML5Rocks.comhttp://goo.gl/iK0y1