jquery_viewport/benchmark/index.html at master · graingert/jquery_viewport · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE HTML>
<html>
<head>
    <title>jquery.viewport benchmark</title>
    <style>
    iframe {
        float: left;
        margin-right: 1em;
    }
    .ribbon {
      position: absolute;
      top: 0;
      right: 0;
    }
    img {
        border: none;
    }
    </style>
</head>
<body>
<a href="http://github.com/NV/jquery_viewport">
<img class="ribbon" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
<iframe width="600" height="600"></iframe>
<p>Optimized version is <span id="result">?</span>&times; faster.</p>
<script>
var _bTestResults = {};
var results = {};

var frame = frames[0];

setup("original", function(){
    setup("optimized", done);
});


function setup(name, next) {
    frame.location.replace(name + ".html");
    var timerId = setInterval(function(){
        if (frame.document.readyState == "complete") {
            clearInterval(timerId);
            frame.scroll(200, 500);
            test(name, next);
        }
    }, 1000);
}

function test(name, next) {
    var images = frame.document.images;
    var inviewport = frame.$.inviewport;
    var length = images.length;
    var visible = 0;
    var start = Date.now();
    for (var i=0; i<length; i++) {
        if (inviewport(images[i], {threshold : 0})) {
            visible++;
        }
    }
    var end = Date.now();
    _bTestResults[name] = end - start;
    results[name] = visible;

    next && next();
}

function done(){
    var result = document.getElementById("result");
    if (results.original == results.optimized) {
        result.innerHTML = Math.round(_bTestResults.original / _bTestResults.optimized * 10) / 10;
        submitToBrowserScope();
    } else {
        throw "The test is broken";
    }
}

function submitToBrowserScope() {
    var _bTestKey = "agt1YS1wcm9maWxlcnINCxIEVGVzdBiH3LMCDA";
    var _bScript = document.createElement('script');
    _bScript.src = 'http://www.browserscope.org/user/beacon/' + _bTestKey;
    _bScript.setAttribute('async', 'true');
    var scripts = document.getElementsByTagName('script');
    var lastScript = scripts[scripts.length - 1];
    lastScript.parentNode.insertBefore(_bScript, lastScript);

    var script = document.createElement("script");
    script.src = "http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBiH3LMCDA?o=js&v=3";
    script.setAttribute('async', 'true');
    document.body.appendChild(script);
}
</script>
</body></html>