tools/perf/page_sets/tough_scheduling_cases/second_batch_js.html - Issue 1000203002: Add second batch JS benchmark and code generator

Side by Side Diff: tools/perf/page_sets/tough_scheduling_cases/second_batch_js.html

Issue 1000203002: Add second batch JS benchmark and code generator (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Beautification. Created 5 years, 9 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« tools/perf/page_sets/tough_scheduling_cases.py ('K') | « tools/perf/page_sets/tough_scheduling_cases/generate_second_batch_js.sh ('k') | tools/perf/page_sets/tough_scheduling_cases/second_batch_js_generator.py » ('j') | tools/perf/page_sets/tough_scheduling_cases/second_batch_js_generator.py » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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 #run {

	49 display: none;
	rmcilroy 2015/03/17 13:59:36 nit - I'm not sure on 'html code style', but it wo nit - I'm not sure on 'html code style', but it would be clearer to me if you did this explicitly in the <input> tag, since it is going to be changed in onLoadComplete(). Sami 2015/03/18 14:05:31 Yeah, that's cleaner. Done. Yeah, that's cleaner. Done.
	50 }

	51 </style>

	52

	53 <center>

	54 <div id="spinner-container">

	55 <div id="spinner"></div>

	56 </div>

	57

	58 <input id="load" type="button" value="Start loading" onclick="kickOffLoading() "></input>
	rmcilroy 2015/03/17 13:59:36 (for a future CL) - could we have a variation whic (for a future CL) - could we have a variation which kicks off loading without requiring a button click? That way we could ensure that we aren't just getting smooth animation during loading due to the fact that we have been kicked into compositor priority mode. Sami 2015/03/18 14:05:31 Good point. Actually there's a subtlety here in th Show quoted text On 2015/03/17 13:59:36, rmcilroy wrote: > (for a future CL) - could we have a variation which kicks off loading without > requiring a button click? That way we could ensure that we aren't just getting > smooth animation during loading due to the fact that we have been kicked into > compositor priority mode. Good point. Actually there's a subtlety here in that .ClickElement doesn't activate compositor priority but .TapElement does, because the former doesn't actually synthesize user input. I think I'll change the test to call kickOffLoading() explicitly to make it safer against someone changing .ClickElement. I'll still keep the buttons so that you can run the test interactively (with the relevant caveat about compositor priority).
	59 <input id="run" type="button" value="Click me!" onclick="onClick()"></input>

	60

	61 <p id="results"></p>

	62 </center>

	63

	64 <script>

	65 // Perform main thread animation during the benchmark to gauge main thread

	66 // responsiveness.

	67 window.__ready = false;

	68 var results = document.getElementById('results');

	69 var spinner = document.getElementById('spinner');

	70 var spinnerContainer = document.getElementById('spinner-container');

	71 function animateSpinner(timestamp) {

	72 var width = parseInt(window.getComputedStyle(spinnerContainer).width);

	73 var x = -(timestamp / 8) % width;

	74 spinner.style.left = x + 'px';

	75 window.requestAnimationFrame(animateSpinner);

	76 }

	77

	78 function kickOffLoading() {

	79 var loadButton = document.getElementById('load');

	80 loadButton.style.display = 'none';

	81

	82 var variant =

	83 location.search.length > 0 ? location.search.substr(1) : 'medium';

	84 var script = document.createElement('script');

	85 script.setAttribute('type', 'text/javascript')

	86 script.setAttribute('src', 'second_batch_js_' + variant + '.min.js')

	87 script.addEventListener('load', onLoadComplete);

	88 document.body.appendChild(script);

	89 }

	90

	91 function onLoadComplete() {

	92 var runButton = document.getElementById('run');

	93 runButton.style.display = 'block';

	94 spinnerContainer.classList.add('spinner-loaded');

	95 window.__ready = true;

	96 }

	97

	98 function onClick() {
	rmcilroy 2015/03/17 13:59:36 nit - onRunClick() ? nit - onRunClick() ? Sami 2015/03/18 14:05:31 Done. Show quoted text On 2015/03/17 13:59:36, rmcilroy wrote: > nit - onRunClick() ? Done.
	99 results.innerText = 'Your lucky number is: ' + main(1);

	100 }

	101

	102 window.requestAnimationFrame(animateSpinner);
	rmcilroy 2015/03/17 13:59:36 nit - move this after you define the animateSpinne nit - move this after you define the animateSpinner to keep things grouped? Sami 2015/03/18 14:05:32 Done. Show quoted text On 2015/03/17 13:59:36, rmcilroy wrote: > nit - move this after you define the animateSpinner to keep things grouped? Done.
	103 </script>

	104

	105 </html>

OLD	NEW