How to measure the performance gains from prerender?

329 views
Skip to first unread message

piaoling

unread,
Jul 30, 2015, 1:59:43 AM7/30/15
to Prerender
To minimize network contention, all resources in a prerendered page are retrieved at the lowest priority level. Maybe the performance.timing data even worse compared to normal request. How to measure the performance gains from prerender?

PhistucK

unread,
Jul 30, 2015, 3:32:04 AM7/30/15
to piaoling, Prerender
(I forget the exact names, sorry) 
Listen to the "visibilitychange" event - if it changes from "prerender" to "visible" and the is already fully loaded - the user thinks it loaded immediately, this is a performance gain (a perceived load time of 0).
You should discard performance.timing values if the visibility changes from "prerender" after "DOMContentLoaded" or "load" fired. Otherwise, you can factor new Date() (at the visibility change) as the load start time and subtract it from the eventual "DOMContentLoaded" or "load" event times.


☆PhistucK

On Thu, Jul 30, 2015 at 8:59 AM, piaoling <piao...@gmail.com> wrote:
To minimize network contention, all resources in a prerendered page are retrieved at the lowest priority level. Maybe the performance.timing data even worse compared to normal request. How to measure the performance gains from prerender?

To unsubscribe from this group and stop receiving emails from it, send an email to prerender+...@chromium.org.

piaoling

unread,
Jul 30, 2015, 11:12:33 PM7/30/15
to Prerender, piao...@gmail.com, phis...@gmail.com
I tried this:

function visibilityChanged() {
    state = state + "->" + document.visibilityState; 
    console.log("state:"+state);
}

function myDOMContentLoadedFun() {
console.log('myDOMContentLoadedFun');
}

function myLoadFun() {
console.log('myLoadFun');
}

function do_event() {
        if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
        state = document.visibilityState; 
        console.log("state:"+state);
        if(document.addEventListener) document.addEventListener("DOMContentLoaded", myDOMContentLoadedFun);
        if(document.addEventListener) document.addEventListener("load", myLoadFun);
}
do_event();


But I found that document.visibilityState nerver return prerender and the output is without myLoadFun:
state:visible
myDOMContentLoadedFun


I'm confused about it.

在 2015年7月30日星期四 UTC+8下午3:32:04，PhistucK写道：

Matt Menke

unread,
Jul 30, 2015, 11:22:12 PM7/30/15
to piaoling, Prerender, PhistucK Productions
Are you using devtools?  Devtools disables prerender (Devtools has to be attached to a renderer before the navigation starts to gather data for it, and so prerender happening in another renderer doesn't quite fit in to the current model).

You can see if a prerender was started in about:net-internals#prerender.

piaoling

unread,
Jul 31, 2015, 7:29:46 AM7/31/15
to Prerender, piao...@gmail.com, phis...@gmail.com, mme...@chromium.org
Thanks Matt Menke and PhistucK.

It seems to work:

<html>
<head>
<meta http-equiv = "content-type" content = "text/html;charset=UTF-8 " />
<title>
test2
</title>
<script>

function pausecomp(millis) {
        console.log('do pausecomp '+ millis + ' start');
        var date = new Date();
        var curDate = null;
        do { curDate = new Date(); }
        while(curDate-date < millis);
        console.log('do pausecomp '+ millis + ' end');
}

function visibilityChanged() {
        vc_time = Date.now();
        state = state + '->' + document.visibilityState; 
        console.log('visibilitychanged:' + state + ' at ' + vc_time);
        if(initial_state == 'prerender' && document.visibilityState == 'visible' && fix_time == 0 && (typeof lee_time ==='undefined')) {
                fix_time =vc_time;
                console.log('set all perf - fix_time(' + fix_time + '), if perf < 0  set to 0.');
        }
}

function myDOMContentLoadedFun() {
        dcles_time = Date.now()
        console.log('do myDOMContentLoadedFun start at ' + dcles_time + ' state:' + document.visibilityState);
        dclee_time = Date.now()
        console.log('do myDOMContentLoadedFun end at ' + dclee_time + ' cost:' + (dclee_time - dcles_time) + ' state:' + document.visibilityState);
        //if(document.visibilityState != 'visible')
                //console.log('set all perf before dclee to 0');
}


function myLoadFun() {
        les_time = Date.now();
        console.log('do myloadFun start at ' + les_time + ' state:' + document.visibilityState);
        setTimeout(record_perf, 0);
        lee_time = Date.now();
        console.log('do myloadFun end at ' + lee_time + ' cost:' + (lee_time - les_time) + ' state:' + document.visibilityState);
}

function do_event() {
        state = initial_state = document.visibilityState;
        fix_time = 0;
        if(document.addEventListener) document.addEventListener('visibilitychange', visibilityChanged);
        console.log('First state:' + initial_state + ' at ' + Date.now());
        if(document.addEventListener) document.addEventListener('DOMContentLoaded', myDOMContentLoadedFun);
        if(window.addEventListener) window.addEventListener('load', myLoadFun);
        //delay
        pausecomp(3000);
}

function record_perf() {
        tmp = performance.timing.loadEventEnd;
        if(document.visibilityState != 'visible') {
                console.log('Need to set all perf to 0');
                tmp = 0;
        }
        else tmp = (tmp - fix_time >= 0 ) ? tmp - fix_time : 0;
        console.log('Get data from performance.timing.loadEventEnd ' + tmp);
}

do_event();
</script>
</head>
<body onload="pausecomp(2000)">
...........some contents<br/>
</body>
</html>

在 2015年7月31日星期五 UTC+8上午11:22:12，Matt Menke写道：
Reply all
Reply to author
Forward
0 new messages