Page Performance

1. Usage:

Install the performance.js file in the page, and listen to the perf event:

<script src="./performance.js"></script>
<script>
window.addEventListener('perf', function(perf) {
  console.log(perf.detail);
})
</script>

2. the perf.detail object

2.1 properties

lookup	dns, domain lookup for the source
waiting	network latency, waiting before page request start
receiving	period between request start and request end
parsing	dom parsing, from dom loading to dom complete
contentLoaded	we used to call it dom ready
pageLoaded	from user agent start a lookup to load event start

2.2 code to calculate out the properties

[ 'lookup'        , ['requestStart', 'navigationStart']],
[ 'waiting'       , ['responseStart', 'requestStart']],
[ 'receiving'     , ['responseEnd', 'responseStart']],
[ 'parsing'       , ['domComplete', 'domLoading']],
[ 'contentLoaded' , ['domContentLoadedEventStart', 'navigationStart']],
[ 'pageLoaded'    , ['loadEventStart', 'navigationStart']] 

2.3 performance life cycle chart

3. Testcase

run the testcase.html file, please!

4. License

(c) MIT License