Auto-compute-first-screen-time NPM

What is this ?

A tool for computing first screen time of one page with inaccuracy of 0 automatically.

What's the defination of first screen time ?

If there are images existing in first screen, the defination is:
```
the time when all images in first screen loaded.
```
If there is no image existing in first screen, the defination is:
```
performance.timing.domContentLoadedStart
```

Precision

The distance between average tested time and real first screen time is 0 (tested in wifi/fast 3G/slow 3G)

How To Use

auto-compute-first-screen-time use libaray of umd.

So, you can use it by:

<script src="./auto-compute-first-screen-time/dist/index.js"></script>
var autoComputeFirstScreenTime = window.autoComputeFirstScreenTime.
var autoComputeFirstScreenTime = require('auto-compute-first-screen-time');

And then use it:

compute first screen time automatically

Run this code before the scripts of page running.

autoComputeFirstScreenTime({
    onReport: function (result) {
        if (result.success) {
            console.log(result.firstScreenTime)
        } else {
            console.log(result);
        }
    }
});

// other scripts of current page
// ...

compute first screen time by hand when you find it ready

autoComputeFirstScreenTime.report({
    // required: false
    onReport: function (result) {
        if (result.success) {
            console.log(result.firstScreenTime)
        } else {
            console.log(result);
        }
    }
});

options
Options means autoComputeFirstScreenTime(options) and autoComputeFirstScreenTime.report(options).
- options.type
  Computing type, which should be one of below: auto/perf/dot. perf by default.
  We suggest you using type 'perf' because this type won't make image request at all and it covers 92+% mobile browsers.
- options.onReport
  - type: Function
  - default
```
onReport(result) {
    // blank function
}
```
  - description
    It will run when first screen time is found.
```
onReport(result) {
    if (result.success) {
        console.log(result.firstScreenTime)
    } else {
        console.log(result);
    }
}
```
- options.request
  - type: Object
  - description
```
limitedIn: [], // RegExp as item
exclude: [] // RegExp as item
```
    auto-compute-first-screen-time will catch request for computing first screen time.
    limitedIn controls which kind of requests should be caught, such as [/mtop\.alibaba\.com/i].
    exclue controls which kind of requests should not be caught, such as [/list\.alibaba\.com/i].
- options.delayReport
  - type: Number
  - default: 0
  - description
    auto-compute-first-screen-time will run onReport callback immediately by default.
    When delayReport is setted, auto-compute-first-screen-time will run onReport after some time.
    It can be used in some pages that require users login.
    Delay report can help you avoid report the wrong page (always login page).
    For example:
```
delayReport: 1000 // ms
```
- options.jsonpFilter
  - type: RegExp
  - default: /jsonp=callback/
  - description
    Filter for cathing jsonp request.
- options.navigationStartChangeTag
  - type: Array
  - default: ['data-perf-start', 'perf-start']
  - description
    Usually, when first screen time stamp is found, we get the first screen time by:
```
var firstScreenTime = firstScreenTimeStamp - performance.timing.navigationStart
```
    But for single-page-application(SPA), it's wrong.
    Because SPA has sub routes, when route changes, the first screen time should be computed by:
```
firstScreenTimeStamp - the-timestamp-when-route-changed
```
    auto-compute-first-screen-time will watch options.navigationStartChangeTag changes when computing first screen.
    'data-perf-start' will be watched firstly, if there is no 'data-perf-start', 'perf-start' will be watched. And the tags must be setted on <body>.
    So for SPA, you should do one more job: when route changes, reset perf-start or data-perf-start on <body>.
    For example by vue SPA:
```
router.afterEach(function(to, from) {
    document.body.dataset.perfStart = Date.now();
})
```

Dom control

perf-ignore

ignore images inside the tagged dom (tagged dom included)

<div>
    <img src="xxx" />
</div>
<div perf-ignore> <!-- ignored -->
    <img src="xxx" /> <!-- ignored -->
</div>

<div perf-ignore style="background: url(xxx) 0 0 no-repeat;"></div> <!-- ignored -->

<anytag perf-scroll></anytag>

anytag means tags like div / span / ul / ....

Usually, when we get images in first screen, we should firstly get node position by formula as below:

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // changeable

var boundingClientRect = imgNode.getBoundingClientRect();
if ((scrollTop + boundingClientRect.top) < window.innerHeight && boundingClientRect.right > 0 && boundingClientRect.left < window.innerWidth) {
    console.log('this node is in first screen');
}

When perf-scroll is added on a tag, part of the formula will change as below:

from

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

var scrollTop = document.querySelector('[perf-scroll]').getBoundingClientRect().top;

if (scrollWrapperClientRect.top < 0) {
    scrollTop = -scrollWrapperClientRect.top;
} else {
    scrollTop = 0;
}