acf

auto-compute-first-screen-time

get first screen loading time automatically

Showing:

Popularity

Downloads/wk

2

GitHub Stars

81

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

7.3KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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;
      

      to

      var scrollTop = document.querySelector('[perf-scroll]').getBoundingClientRect().top;
      
      if (scrollWrapperClientRect.top < 0) {
          scrollTop = -scrollWrapperClientRect.top;
      } else {
          scrollTop = 0;
      }
      

Support xhr ?

Yes!

Support fetch ?

Yes!

Support jsonp ?

Perhaps not...

Support async js like webpack split bundle ?

Yes!

Details

details

LICENSE

BSD

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100