-
Notifications
You must be signed in to change notification settings - Fork 120
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cherry pick PR #1020: Adds 4 CVals to track WebP usage and performance (
#1042) Refer to the original PR: #1020 This PR adds tracking around AnimatedImage, which is currently only used for WebP decoding. We are adding 4 metrics - Total number of currently decoding WebP images - Cumulative total of frames decoded - Decoding underruns, when CPU bottleneck is hit - Decoding overruns, when timing in decoding pipeline is trying to decode too fast. b/196887641 b/280381029 b/290130439 b/290060548 Co-authored-by: Kaido Kert <[email protected]>
- Loading branch information
1 parent
13c4f4d
commit 6f0afc7
Showing
18 changed files
with
266 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
166 changes: 166 additions & 0 deletions
166
cobalt/demos/content/animated-webp-performance-demo/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| | Demo to help test animated webp performance metrics. | ||
| | We set up decoding speed tracking on a regular interval, and make a | ||
| | customizeable page with varying number of decoded images. | ||
| --> | ||
| <html> | ||
|
|
||
| <head> | ||
| <title>WebP performance test</title> | ||
| <style type="text/css"> | ||
|
|
||
| body { | ||
| background-color: white; | ||
| } | ||
| .image { | ||
| width: 100px; | ||
| height: 100px; | ||
| background-size: contain; | ||
| display: inline-block; | ||
| } | ||
| .highlight { | ||
| background-color: rgb(0, 255, 0); | ||
| } | ||
| </style> | ||
| <script type="text/javascript"> | ||
| window.onload = () => { | ||
| var size = 100; // Default pixel size of rendered images | ||
| var search = window.location.search; | ||
| var num = 1; // Default number of decoded images | ||
|
|
||
| // Grab URL search args | ||
| var matches = search.matchAll(/num=([0-9]+)/gm); | ||
| for (const match of matches) { | ||
| num = match[1] | ||
| } | ||
| var matches = search.matchAll(/size=([0-9]+)/gm); | ||
| for (const match of matches) { | ||
| size = match[1] | ||
| } | ||
|
|
||
| // Insert images into DOM tree | ||
| var layer = document.getElementById('layer'); | ||
| function addImage(img, size) { | ||
| var el = document.createElement('span'); | ||
| console.log(`adding ${img}`); | ||
| el.classList.add('image'); | ||
| el.style['backgroundImage'] = `url(${img}.webp)`; | ||
| el.style['width'] = `${size}px`; | ||
| el.style['height'] = `${size}px`; | ||
| layer.appendChild(el) | ||
| console.log("Added image"); | ||
| } | ||
| var images = [ | ||
| "1_fan","2_heart","3_cry","4_clap", "5_egg", | ||
| "6_party","7_rofl","8_melt","9_explode","10_turtle" | ||
| ] | ||
| for(i = 0; i< num; i++) { | ||
| (function(i) { | ||
| var img = images[i % 10]; | ||
| window.setTimeout( () => { addImage(img,size) } , 1 + i*40); | ||
| })(i) | ||
| } | ||
|
|
||
| // Set up function retrieve CVals. | ||
| var getCVal = function(name) { return 0 } | ||
| if (typeof h5vcc != "undefined" && typeof h5vcc.cVal != "undefined") { | ||
| getCVal = function(name) { | ||
| return h5vcc.cVal.getValue(name); | ||
| } | ||
| } | ||
|
|
||
| // Set up periodic stats tracking loop. | ||
| var last_frames = 0; | ||
| var last_time = performance.now(); | ||
| function updateStats() { | ||
| var current_time = performance.now(); | ||
| var time_delta_milliseconds = current_time - last_time; | ||
| var decoded_frames = | ||
| getCVal('Count.MainWebModule.AnimatedImage.DecodedFrames'); | ||
| var underruns = getCVal('Count.MainWebModule.AnimatedImage.DecodingUnderruns'); | ||
| var overruns = getCVal('Count.MainWebModule.AnimatedImage.DecodingOverruns'); | ||
| var newly_decoded_frames = decoded_frames - last_frames; | ||
| var fps = parseInt( newly_decoded_frames * 100 / (time_delta_milliseconds / 1000.0)) / 100; | ||
| document.getElementById('Active').textContent = | ||
| getCVal('Count.MainWebModule.AnimatedImage.Active'); | ||
| document.getElementById('DecodedFrames').textContent = decoded_frames; | ||
| document.getElementById('DecodingUnderruns').textContent = underruns | ||
| document.getElementById('DecodingOverruns').textContent = overruns; | ||
| document.getElementById('DecodedFPS').textContent = fps; | ||
| document.getElementById('UnderrunPercent').textContent = parseInt(underruns / decoded_frames * 100.0); | ||
| document.getElementById('OverrunPercent').textContent = parseInt(overruns / decoded_frames * 100.0); | ||
|
|
||
| last_frames = decoded_frames; | ||
| last_time = current_time; | ||
| } | ||
| window.setInterval(updateStats, 1000); | ||
|
|
||
| // Set up keyboard menu nav | ||
| var menu = document.getElementById('menu').children; | ||
| var index = 0; | ||
| function refresh() { | ||
| var textBox = document.getElementById('nav'); | ||
| for (let i = 0; i < menu.length; i++) { | ||
| if (i == index) { | ||
| menu[i].classList.add('highlight'); | ||
| } else { | ||
| menu[i].classList.remove('highlight'); | ||
| } | ||
| } | ||
| } | ||
| document.addEventListener('keydown', function (e) { | ||
| // left, up, android left, up | ||
| if ([37, 38, 32782, 32780].includes(e.keyCode)) { | ||
| index -= 1; | ||
| //right, down, android right, down | ||
| } else if ([39, 40, 32781, 32783].includes(e.keyCode)) { | ||
| index += 1; | ||
| // enter, android enter | ||
| } else if ([13, 32768].includes(e.keyCode)) { | ||
| var el = document.getElementById('menu').children[index]; | ||
| window.location = el.firstChild.href; | ||
| } | ||
| index = (index + menu.length) % menu.length; | ||
| refresh(); | ||
| }); | ||
| refresh(); | ||
| } | ||
| </script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="background"></div> | ||
| <div id="menu"> | ||
| <span><a href="?size=100&num=1">1 small image</a></span> | ||
| <span><a href="?size=300&num=1">1 large image</a></span> | ||
| <span><a href="?size=100&num=2">2 small images</a></span> | ||
| <span><a href="?size=300&num=2">2 large image</a></span> | ||
| <span><a href="?size=100&num=3">3 small images</a></span> | ||
| <span><a href="?size=300&num=3">3 large images</a></span> | ||
| <span><a href="?size=100&num=4">4 small images</a></span> | ||
| <span><a href="?size=300&num=4">4 large images</a></span> | ||
| <div></div> | ||
| <span><a href="?size=100&num=4">5 small images</a></span> | ||
| <span><a href="?size=300&num=4">5 large images</a></span> | ||
| <span><a href="?size=100&num=6">6 small images</a></span> | ||
| <span><a href="?size=300&num=6">6 large images</a></span> | ||
| <span><a href="?size=100&num=8">8 small images</a></span> | ||
| <span><a href="?size=300&num=8">8 large images</a></span> | ||
| <span><a href="?size=100&num=10">10 small images</a></span> | ||
| <span><a href="?size=300&num=10">10 large images</a></span> | ||
| </div> | ||
| <div id="metrics"> | ||
| <div><span>Total images playing:</span><span id="Active"></span></div> | ||
| <div><span>Total frames decoded:</span><span id="DecodedFrames"></span></div> | ||
| <div><span>Total frames underrun:</span><span id="DecodingUnderruns"></span></div> | ||
| <div><span>Total frames overrun:</span><span id="DecodingOverruns"></span></div> | ||
| <div><span>Frames decoded per second:</span><span id="DecodedFPS"></span></div> | ||
| <div><span>Underrun %:</span><span id="UnderrunPercent"></span> | ||
| <span>Overrun %:</span><span id="OverrunPercent"></span></div> | ||
| </div> | ||
|
|
||
| <div class="layer" id="layer"></div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.