1.
Analyzing the Performance of Mobile Web: Challenges and Techniques ARIYA HIDAYAT ENGINEERING DIRECTOR

2.
whoami

3.
Going Under the Hood

4.
MyOwnSlow

5.
Overview

6.
Performance Areas Network Graphics JavaScript

7.
Desktop Tools Web Inspector Page Speed WebMetricsFirebug Speed Tracer YSlow Blaze.io dynaTrace pcapperf WebPageTest

8.
Mobile Situation Metrics Continous Integration •framerate •bytes transferred •caching •cookies •cache manifest •code size •execution speed Network Variances 2G, EDGE, 3G, 4G, LTE, ...

9.
“Too Many Phones Will Kill You...”

10.
Stake Holders Web Site Developers Service Provider Application DevelopersBrowser vendors

11.
Approaches High-speed Benchmark Camera Inject RF Monitorinstrumentation Proxy Remote Read the inspection source code Intrusive Emulation Observation

12.
Strategies Reducing complexity 1 Replicate and/or analyze on desktop 2 Tweak and insert instrumentation System level

13.
Caveats Concept Focus

14.
Tools of Trade Nexus One Gingerbread http://source.android.com/source/building-devices.html

15.
Headless WebKit “Full web stack. No browser required” http://www.phantomjs.org https://github.com/ariya/phantomjs

16.
Source Code WebKit http://www.webkit.org/ http://android.git.kernel.org/?p=platform/external/webkit.git http://opensource.apple.com/ V8 http://code.google.com/p/v8/

17.
WebCoreDi erent WebKit “Ports” graphics Mac ChromiumGraphicsContext iOS Android Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack

18.
Network

19.
“Understanding Mobile Web Browser Performance” Rajiv Vijayakumar (Qualcomm) Wed 2:40 pm, Ballroom ABCD

20.
Web Inspector Network

21.
http://www.softwareishard.com/blog/har-12-spec/HTTP Archive (HAR)

22.
Automating Network Sni ng (Desktop) phantomjs netsniff.js http://m.bing.com Visualize using online HAR viewer

23.
Android WebKit + Network StackJava Browser Network Stack Java WebView Java libwebcore JNI C++

24.
Real-time Sni ng + Postprocessing WebFrame::startLoadingResource WebCoreResourceLoader::AddData(...) waiting data transfer WebCoreResourceLoader::Finished()

25.
Example: Orchid adb logcat -v time | startLoadingResource NETWORK06-12 22:57:48.430 D/webcoreglue( 1357): grep 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

26.
Example: Orchid

27.
Going O ine: Cache Manifest Automatic local storage optimization phantomjs confess.js http://functionsource.com https://github.com/jamesgpearce/confess

28.
Graphics

29.
Drawing Command Analysis WebCore Log file graphics GraphicsContext Skia

30.
Example: Bing platformInit savePlatformState translate 0,0 translate 0,0 clip 1,0 0x6.95322e-310 fillRect 0,0 800x556 color ff ff ff ff restorePlatformState platformDestroy platformInit savePlatformState translate 0,0 translate 0,0 clip 1,0 0x6.95322e-310 fillRect 0,0 800x556 color ff ff ff ff restorePlatformState platformDestroy platformInit savePlatformState translate 0,0 translate 0,0 clip 1,0 0x6.95322e-310 fillRect 0,0 800x556 color ff ff ff ff fillRect 0,0 800x556 color ff ff ff ff

31.
Painting Traces

32.
Display List Approach no overhead WebKit anymore GraphicsContext “SkPicture” Skia

33.
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

34.
Example: Google News adb logcat -v time | grep drawContent 16:24:04.070 D/webcoreglue( 273): drawContent 11 ms 16:24:04.110 D/webcoreglue( 273): drawContent 13 ms 16:24:04.150 D/webcoreglue( 273): drawContent 13 ms 16:24:04.190 D/webcoreglue( 273): drawContent 10 ms 16:24:04.240 D/webcoreglue( 273): drawContent 10 ms 16:24:04.280 D/webcoreglue( 273): drawContent 13 ms 16:24:04.320 D/webcoreglue( 273): drawContent 13 ms 16:24:04.360 D/webcoreglue( 273): drawContent 13 ms 16:24:06.080 D/webcoreglue( 273): drawContent 12 ms 16:24:06.140 D/webcoreglue( 273): drawContent 10 ms 16:24:06.180 D/webcoreglue( 273): drawContent 13 ms 16:24:06.230 D/webcoreglue( 273): drawContent 14 ms 16:24:06.600 D/webcoreglue( 273): drawContent 26 ms 16:24:06.640 D/webcoreglue( 273): drawContent 13 ms 16:24:06.860 D/webcoreglue( 273): drawContent 33 ms 16:24:06.890 D/webcoreglue( 273): drawContent 12 ms 16:24:06.930 D/webcoreglue( 273): drawContent 13 ms 16:24:06.960 D/webcoreglue( 273): drawContent 13 ms 16:24:07.000 D/webcoreglue( 273): drawContent 13 ms

35.
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(); } }

36.
Site Mirroring Intertubes port 8080 SQLite DB Proxy Mirror port 8081 https://github.com/ariya/X2 network/netspiegel

37.
JavaScript

38.
http://www.sencha.com/blog/remote-javascript-debugging-on-android/Remote Console http://github.com/senchalabs/android-tools

39.
Garbage Collector bool 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

40.
Example: Travelmateadb logcat -v time | grep GarbageCollection 06-13 13:24:36.470 D/v8 ( 532): PerformGarbageCollection 20 06-13 13:24:36.630 D/v8 ( 532): PerformGarbageCollection 32788 06-13 13:24:36.740 D/v8 ( 532): PerformGarbageCollection 116 06-13 13:24:36.810 D/v8 ( 532): PerformGarbageCollection 88 06-13 13:24:36.870 D/v8 ( 532): PerformGarbageCollection 52 06-13 13:24:37.000 D/v8 ( 532): PerformGarbageCollection 20 06-13 13:24:37.090 D/v8 ( 532): PerformGarbageCollection 24 06-13 13:24:37.450 D/v8 ( 532): PerformGarbageCollection 35884 06-13 13:24:39.400 D/v8 ( 532): PerformGarbageCollection 20 06-13 13:24:39.730 D/v8 ( 532): PerformGarbageCollection 3392

41.
Keyword vs Identifier instanceof instanceComponent requires checking 9 chars a g h j klmopqxyz

42.
Function Parsing Analyze the syntax foobar = function(x, y, z) Mark the position of { function ‘foobar’ .... } foobar(x, y, z); Compile and run the function ‘foobar’

43.
Static Code Analysis hammerjs --syntax source-file.js JSON syntax tree Reflect.parse(code) https://github.com/senchalabs/hammerjs

44.
Syntax Tree Variable Declaration identifier numbervar answer = 42;keyword equal sign Identifier Literal Constant answer 42

45.
"type": "IfStatement", "test": { "type": "BinaryExpression", "operator": "==", "left": { "type": "Identifier", "name": "x" }, "right": { "type": "Identifier", "name": "y" }if (x == y) foo(); }, "consequent": { "type": "ExpressionStatement", "expression": { "type": "CallExpression", Danger! "callee": { "type": "Identifier", "name": "foo" }, "arguments": [] } }, "alternate": null

46.
Deploy-time Pruning Never used function createList(position, options) { ... some code ... } createList({ x: 0, y: 0}); createList({ x: 0, y: 100});

47.
Avoid Object Construction Create + DestroystartTime = new Date(); startTime = Date.now();// heavy processing // heavy processingelapsed = (new Date()) - startTime; elapsed = Date.now() - startTime;

48.
Irrelevant Platforms Does not apply in Mobile if (typeof object.attachEvent !== undefined) { // Internet Explorer < 9 object.attachEvent(on+ev, createWrapper(func)); } else { // DOM Level 3 object.addEventListener(ev, func); }

49.
User Interactions

50.
http://www.sencha.com/blog/event-recorder-for-android-web-applications/Event Recorder & Player

51.
Conclusion

52.
Today Replicate and analyze on desktopFind, look at, and understand the source codeTweak at the system level + post-processing

53.
FutureMore built-in instrumentation Remote inspection API for test automation

54.
THANK YOU! ariya.hidayat@gmail.com ariya.blogspot.com @ariyahidayat