analyzing the performance of mobile web
DESCRIPTION
Presented at Velocity Conference, June 14, 2011TRANSCRIPT
![Page 1: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/1.jpg)
Analyzing the Performance of Mobile Web:
Challenges and Techniques
ARIYA HIDAYATENGINEERING DIRECTOR
![Page 2: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/2.jpg)
whoami
![Page 3: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/3.jpg)
Going Under the Hood
![Page 4: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/4.jpg)
MyOwnSlow
![Page 5: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/5.jpg)
Overview
![Page 6: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/6.jpg)
Performance Areas
Network
Graphics
JavaScript
![Page 7: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/7.jpg)
Desktop Tools
Firebug
Web Inspector
dynaTrace
Speed Tracer
Page Speed
YSlowBlaze.io
WebPageTestpcapperf
WebMetrics
![Page 8: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/8.jpg)
Mobile Situation
Metrics•framerate•bytes transferred•caching•cookies•cache manifest•code size•execution speed
Network Variances2G, EDGE, 3G, 4G, LTE, ...
Continous Integration
![Page 9: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/9.jpg)
“Too Many Phones Will Kill You...”
![Page 10: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/10.jpg)
Stake Holders
Browser vendors
Web Site Developers
Application Developers
ServiceProvider
![Page 11: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/11.jpg)
Approaches
Inject instrumentation
Read the source code
Proxy
High-speed Camera
Intrusive Emulation Observation
Benchmark
RF Monitor
Remote inspection
![Page 12: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/12.jpg)
Strategies
1 Replicate and/or analyze on desktop
2 Tweak and insert instrumentation
Reducing complexity
System level
![Page 13: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/13.jpg)
Caveats
Concept
Focus
![Page 14: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/14.jpg)
Tools of Trade
Nexus One Gingerbread
http://source.android.com/source/building-devices.html
![Page 15: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/15.jpg)
Headless WebKit
http://www.phantomjs.org https://github.com/ariya/phantomjs
“Full web stack.No browser required”
![Page 16: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/16.jpg)
Source Code
WebKit
V8 http://code.google.com/p/v8/
http://www.webkit.org/
http://android.git.kernel.org/?p=platform/external/webkit.git
http://opensource.apple.com/
![Page 17: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/17.jpg)
Di!erent WebKit “Ports”WebCore graphics
MaciOS
ChromiumAndroid Qt Gtk
CoreGraphics
Skia
QPainter
Cairo
graphics stack
GraphicsContext
![Page 18: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/18.jpg)
Network
![Page 19: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/19.jpg)
“Understanding Mobile Web Browser Performance”Rajiv Vijayakumar (Qualcomm)
Wed 2:40 pm, Ballroom ABCD
![Page 20: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/20.jpg)
Web Inspector Network
![Page 21: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/21.jpg)
HTTP Archive (HAR)
http://www.softwareishard.com/blog/har-12-spec/
![Page 22: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/22.jpg)
Automating Network Sni"ng (Desktop)
phantomjs netsniff.js http://m.bing.com
Visualize using online HAR viewer
![Page 23: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/23.jpg)
Android WebKit + Network Stack
WebView
libwebcore
Java
C++
Browser
Java
JNI
Network Stack Java
![Page 24: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/24.jpg)
Real-time Sni"ng + Postprocessing
waiting data transfer
WebCoreResourceLoader::Finished()
WebCoreResourceLoader::AddData(...)WebFrame::startLoadingResource
![Page 25: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/25.jpg)
06-12 22:57:48.430 D/webcoreglue( 1357): startLoadingResource NETWORK 0x66d368 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:48.710 D/webcoreglue( 1357): ReceivedResponse NETWORK handle=0x66d368 mimeType=text/html url=http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:48.780 D/webcoreglue( 1357): startLoadingResource NETWORK 0x6a8678 http://en.m.wikipedia.org/stylesheets/android.css06-12 22:57:48.780 D/webcoreglue( 1357): startLoadingResource NETWORK 0x6ab388 http://en.m.wikipedia.org/javascripts/jquery.js06-12 22:57:48.790 D/webcoreglue( 1357): startLoadingResource NETWORK 0x6ab7e8 http://en.m.wikipedia.org/javascripts/application.js06-12 22:57:48.790 D/webcoreglue( 1357): AddData NETWORK 0x66d368 4162 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:48.790 D/webcoreglue( 1357): AddData NETWORK 0x66d368 8192 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:48.790 D/webcoreglue( 1357): AddData NETWORK 0x66d368 1361 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:48.980 D/webcoreglue( 1357): AddData NETWORK 0x66d368 8192 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:48.980 D/webcoreglue( 1357): AddData NETWORK 0x66d368 803 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:49.000 D/webcoreglue( 1357): AddData NETWORK 0x66d368 4702 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:49.000 D/webcoreglue( 1357): AddData NETWORK 0x66d368 4507 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:49.020 D/webcoreglue( 1357): AddData NETWORK 0x66d368 8192 http://en.m.wikipedia.org/wiki/Orchid06-12 22:57:49.050 D/webcoreglue( 1357): AddData NETWORK 0x66d368 6750 http://en.m.wikipedia.org/wiki/Orchid
Example: Orchidadb logcat -v time | grep NETWORK
![Page 26: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/26.jpg)
Example: Orchid
![Page 27: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/27.jpg)
Going O#ine: Cache Manifest
https://github.com/jamesgpearce/confess
phantomjs confess.js http://functionsource.com
Automatic localstorage optimization
![Page 28: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/28.jpg)
Graphics
![Page 29: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/29.jpg)
Drawing Command Analysis
GraphicsContext
WebCore graphics
Skia
Log file
![Page 30: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/30.jpg)
Example: BingplatformInitsavePlatformStatetranslate 0,0translate 0,0clip 1,0 0x6.95322e-310fillRect 0,0 800x556 color ff ff ff ffrestorePlatformStateplatformDestroyplatformInitsavePlatformStatetranslate 0,0translate 0,0clip 1,0 0x6.95322e-310fillRect 0,0 800x556 color ff ff ff ffrestorePlatformStateplatformDestroyplatformInitsavePlatformStatetranslate 0,0translate 0,0clip 1,0 0x6.95322e-310fillRect 0,0 800x556 color ff ff ff fffillRect 0,0 800x556 color ff ff ff ff
![Page 31: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/31.jpg)
Painting Traces
![Page 32: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/32.jpg)
Display List Approach
GraphicsContext
WebKit
Skia
“SkPicture”
no overhead anymore
![Page 33: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/33.jpg)
How Fast is the “Playback”?#include "TimeCounter.h"
bool WebViewCore::drawContent(SkCanvas* canvas, SkColor){ uint32_t timestamp = getThreadMsec();
.... painting code .... DBG_SET_LOGD("% ms", getThreadMsec() - timestamp);}
external/webkit/WebKit/android/jni/WebViewCore.cpp
![Page 34: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/34.jpg)
Example: Google News
16:24:04.070 D/webcoreglue( 273): drawContent 11 ms16:24:04.110 D/webcoreglue( 273): drawContent 13 ms16:24:04.150 D/webcoreglue( 273): drawContent 13 ms16:24:04.190 D/webcoreglue( 273): drawContent 10 ms16:24:04.240 D/webcoreglue( 273): drawContent 10 ms16:24:04.280 D/webcoreglue( 273): drawContent 13 ms16:24:04.320 D/webcoreglue( 273): drawContent 13 ms16:24:04.360 D/webcoreglue( 273): drawContent 13 ms16:24:06.080 D/webcoreglue( 273): drawContent 12 ms16:24:06.140 D/webcoreglue( 273): drawContent 10 ms16:24:06.180 D/webcoreglue( 273): drawContent 13 ms16:24:06.230 D/webcoreglue( 273): drawContent 14 ms16:24:06.600 D/webcoreglue( 273): drawContent 26 ms16:24:06.640 D/webcoreglue( 273): drawContent 13 ms16:24:06.860 D/webcoreglue( 273): drawContent 33 ms16:24:06.890 D/webcoreglue( 273): drawContent 12 ms16:24:06.930 D/webcoreglue( 273): drawContent 13 ms16:24:06.960 D/webcoreglue( 273): drawContent 13 ms16:24:07.000 D/webcoreglue( 273): drawContent 13 ms
adb logcat -v time | grep drawContent
![Page 35: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/35.jpg)
How Much is the Frame Rate?bool WebViewCore::drawContent(SkCanvas* canvas, SkColor color){ static uint32_t frame_ref = 0; static int frame_tick = 0;
... painting code ...
frame_tick++; if (frame_tick >= 10) { DBG_SET_LOGD("framerate %d fps", (int)(frame_tick * 1000 / (1 + getThreadMsec() - frame_ref))); frame_tick = 0; frame_ref = getThreadMsec(); }}
![Page 36: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/36.jpg)
Site Mirroring
https://github.com/ariya/X2 network/netspiegel
Proxy
Intertubes
port 8080SQLite DB
Mirror
port 8081
![Page 37: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/37.jpg)
JavaScript
![Page 38: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/38.jpg)
Remote Console
http://github.com/senchalabs/android-tools
http://www.sencha.com/blog/remote-javascript-debugging-on-android/
![Page 39: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/39.jpg)
![Page 40: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/40.jpg)
Garbage Collectorbool Heap::CollectGarbage(int requested_size, AllocationSpace space){ .. some code ... PerformGarbageCollection(space, collector, &tracer); LOGD("PerformGarbageCollection %d", requested_size);
.. some code ...}
external/v8/src/heap.cc
![Page 41: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/41.jpg)
Example: Travelmate
06-13 13:24:36.470 D/v8 ( 532): PerformGarbageCollection 2006-13 13:24:36.630 D/v8 ( 532): PerformGarbageCollection 3278806-13 13:24:36.740 D/v8 ( 532): PerformGarbageCollection 11606-13 13:24:36.810 D/v8 ( 532): PerformGarbageCollection 8806-13 13:24:36.870 D/v8 ( 532): PerformGarbageCollection 5206-13 13:24:37.000 D/v8 ( 532): PerformGarbageCollection 2006-13 13:24:37.090 D/v8 ( 532): PerformGarbageCollection 2406-13 13:24:37.450 D/v8 ( 532): PerformGarbageCollection 3588406-13 13:24:39.400 D/v8 ( 532): PerformGarbageCollection 2006-13 13:24:39.730 D/v8 ( 532): PerformGarbageCollection 3392
adb logcat -v time | grep GarbageCollection
![Page 42: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/42.jpg)
Keyword vs Identifier
instanceof instanceComponent
requires checking 9 chars
a g h j k l m o p q x y z
![Page 43: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/43.jpg)
Function Parsing
foobar = function(x, y, z){....}
foobar(x, y, z);
Analyze the syntaxMark the position of
function ‘foobar’
Compile and run the function ‘foobar’
![Page 44: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/44.jpg)
Static Code Analysishammerjs --syntax source-file.js
https://github.com/senchalabs/hammerjs
JSON syntax tree
Reflect.parse(code)
![Page 45: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/45.jpg)
Syntax Tree
Variable Declaration
IdentifierLiteral Constant
answer 42
var answer = 42;keyword equal sign
identifier number
![Page 46: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/46.jpg)
"type": "IfStatement","test": { "type": "BinaryExpression", "operator": "==", "left": { "type": "Identifier", "name": "x" }, "right": { "type": "Identifier", "name": "y" } }, "consequent": { "type": "ExpressionStatement", "expression": { "type": "CallExpression", "callee": { "type": "Identifier", "name": "foo" }, "arguments": [] } }, "alternate": null
if (x == y) foo();
Danger!
![Page 47: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/47.jpg)
Deploy-time Pruning
function createList(position, options) { ... some code ... }
createList({ x: 0, y: 0});createList({ x: 0, y: 100});
Never used
![Page 48: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/48.jpg)
Avoid Object Construction
startTime = new Date();// heavy processingelapsed = (new Date()) - startTime;
startTime = Date.now();// heavy processingelapsed = Date.now() - startTime;
Create + Destroy
![Page 49: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/49.jpg)
Irrelevant Platforms
if (typeof object.attachEvent !== 'undefined') { // Internet Explorer < 9 object.attachEvent('on'+ev, createWrapper(func));} else { // DOM Level 3 object.addEventListener(ev, func);}
Does not apply in Mobile
![Page 50: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/50.jpg)
User Interactions
![Page 51: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/51.jpg)
Event Recorder & Player
http://www.sencha.com/blog/event-recorder-for-android-web-applications/
![Page 52: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/52.jpg)
Conclusion
![Page 53: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/53.jpg)
Today
Replicate and analyze on desktop
Find, look at, and understand the source code
Tweak at the system level + post-processing
![Page 54: Analyzing the Performance of Mobile Web](https://reader036.vdocuments.site/reader036/viewer/2022062404/553b9858550346aa3a8b4731/html5/thumbnails/54.jpg)
Future
More built-in instrumentation
Remote inspection
API for test automation