| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 5 <title>Second batch JS</title> | |
| 6 </head> | |
| 7 | |
| 8 <style> | |
| 9 #spinner { | |
| 10 width: 600px; | |
| 11 height: 10px; | |
| 12 border-right: black; | |
| 13 position: relative; | |
| 14 background: repeating-linear-gradient( | |
| 15 -45deg, | |
| 16 orange, | |
| 17 orange 21px, | |
| 18 yellow 21px, | |
| 19 yellow 42px | |
| 20 ); | |
| 21 } | |
| 22 #spinner-container { | |
| 23 width: 300px; | |
| 24 height: 10px; | |
| 25 overflow: hidden; | |
| 26 border: solid thin darkorange; | |
| 27 border-radius: 4px; | |
| 28 margin-top: 50px; | |
| 29 } | |
| 30 .spinner-loaded #spinner { | |
| 31 background: repeating-linear-gradient( | |
| 32 -45deg, | |
| 33 steelblue, | |
| 34 steelblue 21px, | |
| 35 aqua 21px, | |
| 36 aqua 42px | |
| 37 ); | |
| 38 } | |
| 39 #spinner-container.spinner-loaded { | |
| 40 border: solid thin steelblue; | |
| 41 } | |
| 42 input { | |
| 43 font-size: 150%; | |
| 44 width: 302px; | |
| 45 margin-top: 30px; | |
| 46 margin-bottom: 30px; | |
| 47 } | |
| 48 </style> | |
| 49 | |
| 50 <center> | |
| 51 <div id="spinner-container"> | |
| 52 <div id="spinner"></div> | |
| 53 </div> | |
| 54 | |
| 55 <input id="load" type="button" value="Start loading" onclick="kickOffLoading()
"></input> | |
| 56 <input id="run" style='display: none' type="button" value="Click me!" onclick=
"onRunClick()"></input> | |
| 57 | |
| 58 <p id="results"></p> | |
| 59 | |
| 60 <p>Note: running this test interactively may activate compositor | |
| 61 prioritization during loading, which may skew the results.</p> | |
| 62 </center> | |
| 63 | |
| 64 <script> | |
| 65 // Flag that indicates the test is ready to begin. | |
| 66 window.__ready = false; | |
| 67 | |
| 68 // Flag that indicates the test has finished executing. | |
| 69 window.__finished = false; | |
| 70 | |
| 71 var results = document.getElementById('results'); | |
| 72 | |
| 73 function kickOffLoading() { | |
| 74 var loadButton = document.getElementById('load'); | |
| 75 loadButton.disabled = true; | |
| 76 | |
| 77 var variant = | |
| 78 location.search.length > 0 ? location.search.substr(1) : 'medium'; | |
| 79 var script = document.createElement('script'); | |
| 80 script.setAttribute('type', 'text/javascript') | |
| 81 script.setAttribute('src', 'second_batch_js_' + variant + '.min.js') | |
| 82 script.addEventListener('load', onLoadComplete); | |
| 83 document.body.appendChild(script); | |
| 84 } | |
| 85 | |
| 86 function onLoadComplete() { | |
| 87 var loadButton = document.getElementById('load'); | |
| 88 var runButton = document.getElementById('run'); | |
| 89 loadButton.style.display = 'none'; | |
| 90 runButton.style.display = 'block'; | |
| 91 spinnerContainer.classList.add('spinner-loaded'); | |
| 92 window.__ready = true; | |
| 93 } | |
| 94 | |
| 95 function onRunClick() { | |
| 96 results.innerText = 'Your lucky number is: ' + main(1); | |
| 97 window.requestAnimationFrame(finishTest); | |
| 98 } | |
| 99 | |
| 100 function finishTest() { | |
| 101 window.__finished = true; | |
| 102 } | |
| 103 | |
| 104 // Perform main thread animation during the benchmark to gauge main thread | |
| 105 // responsiveness. | |
| 106 var spinner = document.getElementById('spinner'); | |
| 107 var spinnerContainer = document.getElementById('spinner-container'); | |
| 108 function animateSpinner(timestamp) { | |
| 109 var width = parseInt(window.getComputedStyle(spinnerContainer).width); | |
| 110 var x = -(timestamp / 8) % width; | |
| 111 spinner.style.left = x + 'px'; | |
| 112 window.requestAnimationFrame(animateSpinner); | |
| 113 } | |
| 114 window.requestAnimationFrame(animateSpinner); | |
| 115 </script> | |
| 116 | |
| 117 </html> | |
| OLD | NEW |