Analyzing the Performance of        Mobile Web: Challenges and Techniques                 ARIYA HIDAYAT              ENGIN...
whoami
Going Under the Hood
MyOwnSlow
Overview
Performance Areas     Network               Graphics                          JavaScript
Desktop Tools          Web Inspector      Page Speed     WebMetricsFirebug       Speed Tracer                YSlow        ...
Mobile Situation      Metrics                                     Continous Integration      •framerate      •bytes transf...
“Too Many Phones Will Kill You...”
Stake Holders         Web Site Developers                                            Service                              ...
Approaches                               High-speed                         Benchmark         Camera      Inject          ...
Strategies                                 Reducing complexity      1      Replicate and/or analyze on desktop       2    ...
Caveats   Concept             Focus
Tools of Trade               Nexus One          Gingerbread       http://source.android.com/source/building-devices.html
Headless WebKit                   “Full web stack.                 No browser required”   http://www.phantomjs.org   https...
Source Code     WebKit              http://www.webkit.org/            http://android.git.kernel.org/?p=platform/external/w...
WebCoreDi erent WebKit “Ports”                               graphics                       Mac       ChromiumGraphicsCont...
Network
“Understanding Mobile Web Browser Performance”         Rajiv Vijayakumar (Qualcomm) Wed 2:40 pm, Ballroom ABCD
Web Inspector Network
http://www.softwareishard.com/blog/har-12-spec/HTTP Archive (HAR)
Automating Network Sni ng (Desktop)      phantomjs netsniff.js http://m.bing.com          Visualize using online HAR viewer
Android WebKit + Network StackJava      Browser                                            Network Stack   Java           ...
Real-time Sni ng + Postprocessing WebFrame::startLoadingResource             WebCoreResourceLoader::AddData(...)          ...
Example: Orchid     adb logcat -v time | startLoadingResource NETWORK06-12 22:57:48.430 D/webcoreglue( 1357):             ...
Example: Orchid
Going O ine: Cache Manifest                                     Automatic local                                  storage o...
Graphics
Drawing Command Analysis       WebCore                       Log file       graphics                  GraphicsContext      ...
Example: Bing  platformInit  savePlatformState  translate 0,0  translate 0,0  clip 1,0 0x6.95322e-310  fillRect 0,0 800x55...
Painting Traces
Display List Approach                                  no overhead      WebKit                       anymore              ...
How Fast is the “Playback”?      #include "TimeCounter.h"      bool WebViewCore::drawContent(SkCanvas* canvas, SkColor)   ...
Example: Google News adb logcat -v time | grep drawContent     16:24:04.070   D/webcoreglue(    273):   drawContent   11  ...
How Much is the Frame Rate?   bool WebViewCore::drawContent(SkCanvas* canvas, SkColor color)   {      static uint32_t fram...
Site Mirroring                                        Intertubes                       port 8080                          ...
JavaScript
http://www.sencha.com/blog/remote-javascript-debugging-on-android/Remote Console          http://github.com/senchalabs/and...
Garbage Collector   bool Heap::CollectGarbage(int requested_size, AllocationSpace space)   {       .. some code ...       ...
Example: Travelmateadb logcat -v time | grep GarbageCollection  06-13   13:24:36.470   D/v8            (    532):   Perfor...
Keyword vs Identifier     instanceof            instanceComponent                                requires                  ...
Function Parsing                                     Analyze the syntax       foobar = function(x, y, z)                  ...
Static Code Analysis          hammerjs --syntax source-file.js                            JSON syntax tree                ...
Syntax Tree                                    Variable Declaration   identifier        numbervar answer = 42;keyword      ...
"type": "IfStatement",                     "test": {                                 "type": "BinaryExpression",          ...
Deploy-time Pruning                                        Never used        function createList(position, options) {     ...
Avoid Object Construction              Create + DestroystartTime = new Date();               startTime = Date.now();// hea...
Irrelevant Platforms                             Does not apply in Mobile      if (typeof object.attachEvent !== undefined...
User Interactions
http://www.sencha.com/blog/event-recorder-for-android-web-applications/Event Recorder & Player
Conclusion
Today     Replicate and analyze on desktopFind, look at, and understand the source codeTweak at the system level + post-pr...
FutureMore built-in instrumentation     Remote inspection   API for test automation
THANK YOU!         ariya.hidayat@gmail.com         ariya.blogspot.com         @ariyahidayat
Analyzing the Performance of Mobile Web
Upcoming SlideShare
Loading in …5
×

Analyzing the Performance of Mobile Web

5,249 views

Published on

Presented at Velocity Conference, June 14, 2011

Published in: Technology
  • Be the first to comment

Analyzing the Performance of Mobile Web

  1. 1. Analyzing the Performance of Mobile Web: Challenges and Techniques ARIYA HIDAYAT ENGINEERING DIRECTOR
  2. 2. whoami
  3. 3. Going Under the Hood
  4. 4. MyOwnSlow
  5. 5. Overview
  6. 6. Performance Areas Network Graphics JavaScript
  7. 7. Desktop Tools Web Inspector Page Speed WebMetricsFirebug Speed Tracer YSlow Blaze.io dynaTrace pcapperf WebPageTest
  8. 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. 9. “Too Many Phones Will Kill You...”
  10. 10. Stake Holders Web Site Developers Service Provider Application DevelopersBrowser vendors
  11. 11. Approaches High-speed Benchmark Camera Inject RF Monitorinstrumentation Proxy Remote Read the inspection source code Intrusive Emulation Observation
  12. 12. Strategies Reducing complexity 1 Replicate and/or analyze on desktop 2 Tweak and insert instrumentation System level
  13. 13. Caveats Concept Focus
  14. 14. Tools of Trade Nexus One Gingerbread http://source.android.com/source/building-devices.html
  15. 15. Headless WebKit “Full web stack. No browser required” http://www.phantomjs.org https://github.com/ariya/phantomjs
  16. 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. 17. WebCoreDi erent WebKit “Ports” graphics Mac ChromiumGraphicsContext iOS Android Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack
  18. 18. Network
  19. 19. “Understanding Mobile Web Browser Performance” Rajiv Vijayakumar (Qualcomm) Wed 2:40 pm, Ballroom ABCD
  20. 20. Web Inspector Network
  21. 21. http://www.softwareishard.com/blog/har-12-spec/HTTP Archive (HAR)
  22. 22. Automating Network Sni ng (Desktop) phantomjs netsniff.js http://m.bing.com Visualize using online HAR viewer
  23. 23. Android WebKit + Network StackJava Browser Network Stack Java WebView Java libwebcore JNI C++
  24. 24. Real-time Sni ng + Postprocessing WebFrame::startLoadingResource WebCoreResourceLoader::AddData(...) waiting data transfer WebCoreResourceLoader::Finished()
  25. 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. 26. Example: Orchid
  27. 27. Going O ine: Cache Manifest Automatic local storage optimization phantomjs confess.js http://functionsource.com https://github.com/jamesgpearce/confess
  28. 28. Graphics
  29. 29. Drawing Command Analysis WebCore Log file graphics GraphicsContext Skia
  30. 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. 31. Painting Traces
  32. 32. Display List Approach no overhead WebKit anymore GraphicsContext “SkPicture” Skia
  33. 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. 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. 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. 36. Site Mirroring Intertubes port 8080 SQLite DB Proxy Mirror port 8081 https://github.com/ariya/X2 network/netspiegel
  37. 37. JavaScript
  38. 38. http://www.sencha.com/blog/remote-javascript-debugging-on-android/Remote Console http://github.com/senchalabs/android-tools
  39. 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. 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. 41. Keyword vs Identifier instanceof instanceComponent requires checking 9 chars a g h j klmopqxyz
  42. 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. 43. Static Code Analysis hammerjs --syntax source-file.js JSON syntax tree Reflect.parse(code) https://github.com/senchalabs/hammerjs
  44. 44. Syntax Tree Variable Declaration identifier numbervar answer = 42;keyword equal sign Identifier Literal Constant answer 42
  45. 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. 46. Deploy-time Pruning Never used function createList(position, options) { ... some code ... } createList({ x: 0, y: 0}); createList({ x: 0, y: 100});
  47. 47. Avoid Object Construction Create + DestroystartTime = new Date(); startTime = Date.now();// heavy processing // heavy processingelapsed = (new Date()) - startTime; elapsed = Date.now() - startTime;
  48. 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. 49. User Interactions
  50. 50. http://www.sencha.com/blog/event-recorder-for-android-web-applications/Event Recorder & Player
  51. 51. Conclusion
  52. 52. Today Replicate and analyze on desktopFind, look at, and understand the source codeTweak at the system level + post-processing
  53. 53. FutureMore built-in instrumentation Remote inspection API for test automation
  54. 54. THANK YOU! ariya.hidayat@gmail.com ariya.blogspot.com @ariyahidayat

×