accelerating html5 and android web experience
Post on 12-Sep-2021
5 Views
Preview:
TRANSCRIPT
Accelerating HTML5 and Android Web Experience Chris Dalton March 20, 2013
Agenda
NVIDIA Web Technologies Strategy
Web User Experience on Tegra 4
— Scrolling / Zoom
— Page Load
Web Performance on Tegra 4
— Canvas / WebGL
— JavaScript
Web Application Development on Tegra 4
— Tools
— Best Practices
NVIDIA Web Technologies Strategy
Goal: Every single browser pixel GPU accelerated!
Strategy
— Improve fundamental user experience
— Optimize for performance and power
— Accelerate key HTML5 and related features
— Drive Web standards
Web User Experience on Tegra 4 Zooming / Scrolling
Key issues:
— Fast scrolling -- can’t keep up
— Zooming in -- low resolution rendering
— Zooming out -– whiteout
Our optimizations:
— Smooth 60 FPS panning/scrolling
— Smooth consistent pinch/zoom Missing row of tiles scrolling
Browser does not keep up
zooming out
Low res rendering
zooming in
Web User Experience on Tegra 4 Page Load
Optimized page load performance
Benchmarked with 25 unique sites
espn
ebay
amazon
aol
blogspot
yahoo
nytimes
wiki
craigslist
engadget
netflix
bing
wsj
msn
ign
cnn
nba
paypal
tumblr
walmart
23
49
68
0
10
20
30
40
50
60
70
80
Web Page Load (25 Top Unique Sites)Seconds
(low
er
is f
ast
er)
Android Browser Chrome v.25.0 Firefox v.18.0
Canvas Performance on Tegra 4
0.0
10.0
20.0
30.0
40.0
50.0
60.0
GUIMark3 Bitmap GUIMark3 Vector GUIMark3 Compute IE FishTank (100)
Fra
mera
te (
FPS)
Android Browser Chrome v.25.0 Firefox v.18.0
WebGL Performance on Tegra 4
0
10
20
30
40
50
60
WebGL Aquarium (50fish)
Dynamic Cube Map Blob Cubes
Fra
mera
te (
FPS)
Android Browser Chrome v.25.0 Firefox v.18.0
JavaScript Performance on Tegra 4
0
200
400
600
800
1000
1200
1400
Peacekeeper SunSpider 0.9.1 (ms, lessbetter)
Android Browser Chrome v.25.0 Firefox v.18.0
Lower is better
Higher is better
Existing Developer Tools Develop and debug your web app on the PC (obviously)
Chrome Developer Tools
Firebug
Three.js
Logs Javascript errors
Prints messages from console.log
Evaluates expressions
The Javascript Console Your primary source for debugging web apps on Tegra
$ adb logcat | grep Console
I/browser (15640): Console: Hello world!
http://localhost:8080/buggy-script.html:2
E/browser (15640): Console: Uncaught ReferenceError: x is
not defined http://localhost:8080/buggy-script.html:4
To access, navigate to about:debug
The Javascript Console Your primary source for debugging web apps on Tegra
Measuring Javascript Performance
Use window.performance.now
— Provides a high resolution timer
— Available on Tegra Android browser
var startTime = window.performance.now();
// Do an operation.
var endTime = window.performance.now();
console.log('Took ' + (endTime - startTime) + ' milliseconds.');
Tegrastats
Reports usage statistics while your app is running
— System memory (RAM)
— CPU load and frequency
— CPU frequency cap (EDP)
— Memory load and frequency (EMC)
— GPU load and frequency (GR3D)
— Media engine statistics (AVP, VDE, IRAM)
Tegrastats
$ adb shell tegrastats &
$ adb logcat | grep TegraStats
E/TegraStats(24167): RAM 1045/1861MB (lfb 90x4MB) IRAM 0/255kB(lfb 255kB) cpu
[75%,51%,off,off]@1810 EMC 32%@480 AVP 9%@81 VDE 144 GR3D 57%@192 EDP limit
1810
E/TegraStats(24167): RAM 1045/1861MB (lfb 90x4MB) IRAM 0/255kB(lfb 255kB) cpu
[75%,51%,off,off]@1810 EMC 32%@480 AVP 9%@81 VDE 144 GR3D 57%@192 EDP limit
1810
E/TegraStats(24167): RAM 1045/1861MB (lfb 90x4MB) IRAM 0/255kB(lfb 255kB) cpu
[75%,51%,off,off]@1810 EMC 32%@480 AVP 9%@81 VDE 144 GR3D 57%@192 EDP limit
1810
E/TegraStats(24167): RAM 1045/1861MB (lfb 90x4MB) IRAM 0/255kB(lfb 255kB) cpu
[75%,51%,off,off]@1810 EMC 32%@480 AVP 9%@81 VDE 144 GR3D 57%@192 EDP limit
1810
Performance Tips
Use WebGL and 2D Canvas for animations
Avoid blocking WebGL calls
— gl.finish / gl.flush
— gl.getError / gl.getParameter
Use {alpha:false, preserveBackBuffer:false} with WebGL
Do not use getImageData / putImageData with 2D Canvas
Use web workers
Think Mobile Just because it works on a PC, does not mean it should work on mobile!
Handle touch events
Hardware limitations
— gl.MAX_TEXTURE_SIZE
— gl.MAX_VARYING_VECTORS
— gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS
— Robustness
Handle webglcontextlost / webglcontextrestored
Javascript execution speed
Floating point precision
Demos!
http://crypt-webgl.unigine.com/game.html
http://shatterquest.com/runfield/
http://shatterquest.com/
http://apps.playcanvas.com.s3-website-eu-west-1.amazonaws.com/will/doom3/gangnamstyle/
top related