SlideShare a Scribd company logo
Analyzing the Performance of
        Mobile Web:
 Challenges and Techniques

                 ARIYA HIDAYAT
              ENGINEERING DIRECTOR
whoami
Going Under the Hood
MyOwnSlow
Overview
Performance Areas

     Network



               Graphics


                          JavaScript
Desktop Tools

          Web Inspector      Page Speed     WebMetrics

Firebug       Speed Tracer                YSlow
                             Blaze.io
 dynaTrace       pcapperf           WebPageTest
Mobile Situation
      Metrics                                     Continous Integration
      •framerate
      •bytes transferred
      •caching
      •cookies
      •cache manifest
      •code size
      •execution speed

                Network Variances
                     2G, EDGE, 3G, 4G, LTE, ...
“Too Many Phones Will Kill You...”
Stake Holders         Web Site Developers

                                            Service
                                            Provider


                  Application Developers
Browser vendors
Approaches                               High-speed
                         Benchmark         Camera



      Inject                               RF Monitor
instrumentation                 Proxy
                                           Remote
          Read the                        inspection
         source code


        Intrusive      Emulation        Observation
Strategies
                                 Reducing complexity


      1      Replicate and/or analyze on desktop



       2     Tweak and insert instrumentation

                            System level
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://github.com/ariya/phantomjs
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/
WebCore
Di erent WebKit “Ports”                               graphics

                       Mac       Chromium
GraphicsContext        iOS        Android            Qt     Gtk


                                   Skia                      Cairo
                  CoreGraphics
                                                 QPainter


                                          graphics stack
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 Stack

Java      Browser

                                            Network Stack   Java
               WebView
   Java

                         libwebcore   JNI
              C++
Real-time Sni ng + Postprocessing

 WebFrame::startLoadingResource             WebCoreResourceLoader::AddData(...)



                                  waiting           data transfer


                                                WebCoreResourceLoader::Finished()
Example: Orchid
     adb logcat -v time | startLoadingResource NETWORK
06-12 22:57:48.430 D/webcoreglue( 1357):
                                         grep NETWORK                           0x66d368 http://en.m.wikipedia.org/wiki/
Orchid
06-12 22:57:48.710 D/webcoreglue(   1357): ReceivedResponse NETWORK handle=0x66d368 mimeType=text/html url=http://
en.m.wikipedia.org/wiki/Orchid
06-12 22:57:48.780 D/webcoreglue(   1357): startLoadingResource NETWORK 0x6a8678 http://en.m.wikipedia.org/
stylesheets/android.css
06-12 22:57:48.780 D/webcoreglue(   1357): startLoadingResource NETWORK 0x6ab388 http://en.m.wikipedia.org/
javascripts/jquery.js
06-12 22:57:48.790 D/webcoreglue(   1357): startLoadingResource NETWORK 0x6ab7e8 http://en.m.wikipedia.org/
javascripts/application.js
06-12 22:57:48.790 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   4162 http://en.m.wikipedia.org/wiki/Orchid
06-12 22:57:48.790 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   8192 http://en.m.wikipedia.org/wiki/Orchid
06-12 22:57:48.790 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   1361 http://en.m.wikipedia.org/wiki/Orchid
06-12 22:57:48.980 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   8192 http://en.m.wikipedia.org/wiki/Orchid
06-12 22:57:48.980 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   803 http://en.m.wikipedia.org/wiki/Orchid
06-12 22:57:49.000 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   4702 http://en.m.wikipedia.org/wiki/Orchid
06-12 22:57:49.000 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   4507 http://en.m.wikipedia.org/wiki/Orchid
06-12 22:57:49.020 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   8192 http://en.m.wikipedia.org/wiki/Orchid
06-12 22:57:49.050 D/webcoreglue(   1357):   AddData   NETWORK   0x66d368   6750 http://en.m.wikipedia.org/wiki/Orchid
Example: Orchid
Going O ine: Cache Manifest
                                     Automatic local
                                  storage optimization

    phantomjs confess.js http://functionsource.com




           https://github.com/jamesgpearce/confess
Graphics
Drawing Command Analysis
       WebCore                       Log file
       graphics


                  GraphicsContext


                              Skia
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
Painting Traces
Display List Approach
                                  no overhead
      WebKit                       anymore


               GraphicsContext
                                          “SkPicture”
                           Skia
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
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
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();
       }
   }
Site Mirroring                                        Intertubes

                       port 8080
                                                     SQLite DB
                            Proxy


                            Mirror

                        port 8081

      https://github.com/ariya/X2    network/netspiegel
JavaScript
http://www.sencha.com/blog/remote-javascript-debugging-on-android/



Remote Console




          http://github.com/senchalabs/android-tools
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
Example: Travelmate
adb 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
Keyword vs Identifier
     instanceof            instanceComponent


                                requires
                                checking
                                 9 chars



                  a g h j klmopqxyz
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’
Static Code Analysis
          hammerjs --syntax source-file.js


                            JSON syntax tree


                 Reflect.parse(code)



          https://github.com/senchalabs/hammerjs
Syntax Tree
                                    Variable Declaration
   identifier        number

var answer = 42;
keyword        equal sign    Identifier
                                                           Literal Constant


                             answer                            42
"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
Deploy-time Pruning
                                        Never used

        function createList(position, options) {
           ... some code ...
        }

        createList({ x: 0, y: 0});
        createList({ x: 0, y: 100});
Avoid Object Construction
              Create + Destroy

startTime = new Date();               startTime = Date.now();
// heavy processing                   // heavy processing
elapsed = (new Date()) - startTime;   elapsed = Date.now() - startTime;
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);
      }
User Interactions
http://www.sencha.com/blog/event-recorder-for-android-web-applications/




Event Recorder & Player
Conclusion
Today
     Replicate and analyze on desktop
Find, look at, and understand the source code
Tweak at the system level + post-processing
Future
More built-in instrumentation
     Remote inspection
   API for test automation
THANK YOU!

         ariya.hidayat@gmail.com


         ariya.blogspot.com


         @ariyahidayat

More Related Content

What's hot

Web Standards for AR workshop at ISMAR13
Web Standards for AR workshop at ISMAR13Web Standards for AR workshop at ISMAR13
Web Standards for AR workshop at ISMAR13
Rob Manson
 
[1C5]Lessons from developing a web browser for raspberry pi
[1C5]Lessons from developing a web browser for raspberry pi[1C5]Lessons from developing a web browser for raspberry pi
[1C5]Lessons from developing a web browser for raspberry pi
NAVER D2
 
Devfest09 Cschalk Gwt
Devfest09 Cschalk GwtDevfest09 Cschalk Gwt
Devfest09 Cschalk Gwt
Chris Schalk
 
Mlocjs buzdin
Mlocjs buzdinMlocjs buzdin
Mlocjs buzdin
Dmitry Buzdin
 
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usWebpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
Stefan Adolf
 
Threads Needles Stacks Heaps - Java edition
Threads Needles Stacks Heaps - Java editionThreads Needles Stacks Heaps - Java edition
Threads Needles Stacks Heaps - Java edition
Ovidiu Dimulescu
 
GQuery a jQuery clone for Gwt, RivieraDev 2011
GQuery a jQuery clone for Gwt, RivieraDev 2011GQuery a jQuery clone for Gwt, RivieraDev 2011
GQuery a jQuery clone for Gwt, RivieraDev 2011
Manuel Carrasco Moñino
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
jeresig
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
cromwellian
 
Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)
xMartin12
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
jeresig
 
Building Web Apps Sanely - EclipseCon 2010
Building Web Apps Sanely - EclipseCon 2010Building Web Apps Sanely - EclipseCon 2010
Building Web Apps Sanely - EclipseCon 2010
Chris Ramsdale
 
Hardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for AndroidHardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for Android
National Cheng Kung University
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
Justin Cataldo
 
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
soft-shake.ch
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
Greg Whalin
 
ngGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and TokyongGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and Tokyo
notolab
 
Node.js, toy or power tool?
Node.js, toy or power tool?Node.js, toy or power tool?
Node.js, toy or power tool?
Ovidiu Dimulescu
 
JBoss World 2010
JBoss World 2010JBoss World 2010
JBoss World 2010
Chris Ramsdale
 
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
Yuji Hato
 

What's hot (20)

Web Standards for AR workshop at ISMAR13
Web Standards for AR workshop at ISMAR13Web Standards for AR workshop at ISMAR13
Web Standards for AR workshop at ISMAR13
 
[1C5]Lessons from developing a web browser for raspberry pi
[1C5]Lessons from developing a web browser for raspberry pi[1C5]Lessons from developing a web browser for raspberry pi
[1C5]Lessons from developing a web browser for raspberry pi
 
Devfest09 Cschalk Gwt
Devfest09 Cschalk GwtDevfest09 Cschalk Gwt
Devfest09 Cschalk Gwt
 
Mlocjs buzdin
Mlocjs buzdinMlocjs buzdin
Mlocjs buzdin
 
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usWebpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
 
Threads Needles Stacks Heaps - Java edition
Threads Needles Stacks Heaps - Java editionThreads Needles Stacks Heaps - Java edition
Threads Needles Stacks Heaps - Java edition
 
GQuery a jQuery clone for Gwt, RivieraDev 2011
GQuery a jQuery clone for Gwt, RivieraDev 2011GQuery a jQuery clone for Gwt, RivieraDev 2011
GQuery a jQuery clone for Gwt, RivieraDev 2011
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
 
Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
Building Web Apps Sanely - EclipseCon 2010
Building Web Apps Sanely - EclipseCon 2010Building Web Apps Sanely - EclipseCon 2010
Building Web Apps Sanely - EclipseCon 2010
 
Hardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for AndroidHardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for Android
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
soft-shake.ch - Windows Phone 7 „Mango“ – what’s new for Developers?
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
ngGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and TokyongGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and Tokyo
 
Node.js, toy or power tool?
Node.js, toy or power tool?Node.js, toy or power tool?
Node.js, toy or power tool?
 
JBoss World 2010
JBoss World 2010JBoss World 2010
JBoss World 2010
 
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
 

Similar to Analyzing the Performance of Mobile Web

Hybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKit
Ariya Hidayat
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
Ariya Hidayat
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
Ariya Hidayat
 
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래
NAVER D2
 
16 ARTIFACTS TO CAPTURE WHEN YOUR CONTAINER APPLICATION IS IN TROUBLE
16 ARTIFACTS TO CAPTURE WHEN YOUR CONTAINER APPLICATION IS IN TROUBLE16 ARTIFACTS TO CAPTURE WHEN YOUR CONTAINER APPLICATION IS IN TROUBLE
16 ARTIFACTS TO CAPTURE WHEN YOUR CONTAINER APPLICATION IS IN TROUBLE
Tier1 app
 
StrongLoop Overview
StrongLoop OverviewStrongLoop Overview
StrongLoop Overview
Shubhra Kar
 
Real World Lessons on the Pain Points of Node.JS Application
Real World Lessons on the Pain Points of Node.JS ApplicationReal World Lessons on the Pain Points of Node.JS Application
Real World Lessons on the Pain Points of Node.JS Application
Ben Hall
 
Power ai image-pipeline
Power ai image-pipelinePower ai image-pipeline
Power ai image-pipeline
Paulo Sergio Lemes Queiroz
 
WebRTC ... GWT & in-browser computation
WebRTC ... GWT & in-browser computationWebRTC ... GWT & in-browser computation
WebRTC ... GWT & in-browser computation
JooinK
 
Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014
Brian Benz
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
The HTML5 WebSocket API
The HTML5 WebSocket APIThe HTML5 WebSocket API
The HTML5 WebSocket API
David Lindkvist
 
Building Real-Time Applications with Android and WebSockets
Building Real-Time Applications with Android and WebSocketsBuilding Real-Time Applications with Android and WebSockets
Building Real-Time Applications with Android and WebSockets
Sergi Almar i Graupera
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013
Alexandre Morgaut
 
Naive application development
Naive application developmentNaive application development
Naive application development
Shaka Huang
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
Sadaaki HIRAI
 
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか  〜技術選びで注目すべきポイントとは〜Web開発の技術選び、 好き嫌いでやってませんか  〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Yuki Okada
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
Gonzalo Ayuso
 
Android RenderScript on LLVM
Android RenderScript on LLVMAndroid RenderScript on LLVM
Android RenderScript on LLVM
John Lee
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
Sascha Corti
 

Similar to Analyzing the Performance of Mobile Web (20)

Hybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKit
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래
 
16 ARTIFACTS TO CAPTURE WHEN YOUR CONTAINER APPLICATION IS IN TROUBLE
16 ARTIFACTS TO CAPTURE WHEN YOUR CONTAINER APPLICATION IS IN TROUBLE16 ARTIFACTS TO CAPTURE WHEN YOUR CONTAINER APPLICATION IS IN TROUBLE
16 ARTIFACTS TO CAPTURE WHEN YOUR CONTAINER APPLICATION IS IN TROUBLE
 
StrongLoop Overview
StrongLoop OverviewStrongLoop Overview
StrongLoop Overview
 
Real World Lessons on the Pain Points of Node.JS Application
Real World Lessons on the Pain Points of Node.JS ApplicationReal World Lessons on the Pain Points of Node.JS Application
Real World Lessons on the Pain Points of Node.JS Application
 
Power ai image-pipeline
Power ai image-pipelinePower ai image-pipeline
Power ai image-pipeline
 
WebRTC ... GWT & in-browser computation
WebRTC ... GWT & in-browser computationWebRTC ... GWT & in-browser computation
WebRTC ... GWT & in-browser computation
 
Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
The HTML5 WebSocket API
The HTML5 WebSocket APIThe HTML5 WebSocket API
The HTML5 WebSocket API
 
Building Real-Time Applications with Android and WebSockets
Building Real-Time Applications with Android and WebSocketsBuilding Real-Time Applications with Android and WebSockets
Building Real-Time Applications with Android and WebSockets
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013
 
Naive application development
Naive application developmentNaive application development
Naive application development
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか  〜技術選びで注目すべきポイントとは〜Web開発の技術選び、 好き嫌いでやってませんか  〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
Android RenderScript on LLVM
Android RenderScript on LLVMAndroid RenderScript on LLVM
Android RenderScript on LLVM
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 

Recently uploaded

Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 

Recently uploaded (20)

Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 

Analyzing the Performance of Mobile Web

  • 1. Analyzing the Performance of Mobile Web: Challenges and Techniques ARIYA HIDAYAT ENGINEERING DIRECTOR
  • 6. Performance Areas Network Graphics JavaScript
  • 7. Desktop Tools Web Inspector Page Speed WebMetrics Firebug 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 Developers Browser vendors
  • 11. Approaches High-speed Benchmark Camera Inject RF Monitor instrumentation 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. WebCore Di erent WebKit “Ports” graphics Mac Chromium GraphicsContext iOS Android Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack
  • 19. “Understanding Mobile Web Browser Performance” Rajiv Vijayakumar (Qualcomm) Wed 2:40 pm, Ballroom ABCD
  • 22. Automating Network Sni ng (Desktop) phantomjs netsniff.js http://m.bing.com Visualize using online HAR viewer
  • 23. Android WebKit + Network Stack Java 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 NETWORK 06-12 22:57:48.430 D/webcoreglue( 1357): grep NETWORK 0x66d368 http://en.m.wikipedia.org/wiki/ Orchid 06-12 22:57:48.710 D/webcoreglue( 1357): ReceivedResponse NETWORK handle=0x66d368 mimeType=text/html url=http:// en.m.wikipedia.org/wiki/Orchid 06-12 22:57:48.780 D/webcoreglue( 1357): startLoadingResource NETWORK 0x6a8678 http://en.m.wikipedia.org/ stylesheets/android.css 06-12 22:57:48.780 D/webcoreglue( 1357): startLoadingResource NETWORK 0x6ab388 http://en.m.wikipedia.org/ javascripts/jquery.js 06-12 22:57:48.790 D/webcoreglue( 1357): startLoadingResource NETWORK 0x6ab7e8 http://en.m.wikipedia.org/ javascripts/application.js 06-12 22:57:48.790 D/webcoreglue( 1357): AddData NETWORK 0x66d368 4162 http://en.m.wikipedia.org/wiki/Orchid 06-12 22:57:48.790 D/webcoreglue( 1357): AddData NETWORK 0x66d368 8192 http://en.m.wikipedia.org/wiki/Orchid 06-12 22:57:48.790 D/webcoreglue( 1357): AddData NETWORK 0x66d368 1361 http://en.m.wikipedia.org/wiki/Orchid 06-12 22:57:48.980 D/webcoreglue( 1357): AddData NETWORK 0x66d368 8192 http://en.m.wikipedia.org/wiki/Orchid 06-12 22:57:48.980 D/webcoreglue( 1357): AddData NETWORK 0x66d368 803 http://en.m.wikipedia.org/wiki/Orchid 06-12 22:57:49.000 D/webcoreglue( 1357): AddData NETWORK 0x66d368 4702 http://en.m.wikipedia.org/wiki/Orchid 06-12 22:57:49.000 D/webcoreglue( 1357): AddData NETWORK 0x66d368 4507 http://en.m.wikipedia.org/wiki/Orchid 06-12 22:57:49.020 D/webcoreglue( 1357): AddData NETWORK 0x66d368 8192 http://en.m.wikipedia.org/wiki/Orchid 06-12 22:57:49.050 D/webcoreglue( 1357): AddData NETWORK 0x66d368 6750 http://en.m.wikipedia.org/wiki/Orchid
  • 27. Going O ine: Cache Manifest Automatic local storage optimization phantomjs confess.js http://functionsource.com https://github.com/jamesgpearce/confess
  • 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
  • 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
  • 39.
  • 40. 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
  • 41. Example: Travelmate adb 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
  • 42. Keyword vs Identifier instanceof instanceComponent requires checking 9 chars a g h j klmopqxyz
  • 43. 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’
  • 44. Static Code Analysis hammerjs --syntax source-file.js JSON syntax tree Reflect.parse(code) https://github.com/senchalabs/hammerjs
  • 45. Syntax Tree Variable Declaration identifier number var answer = 42; keyword equal sign Identifier Literal Constant answer 42
  • 46. "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
  • 47. Deploy-time Pruning Never used function createList(position, options) { ... some code ... } createList({ x: 0, y: 0}); createList({ x: 0, y: 100});
  • 48. Avoid Object Construction Create + Destroy startTime = new Date(); startTime = Date.now(); // heavy processing // heavy processing elapsed = (new Date()) - startTime; elapsed = Date.now() - startTime;
  • 49. 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); }
  • 53. Today Replicate and analyze on desktop Find, look at, and understand the source code Tweak at the system level + post-processing
  • 54. Future More built-in instrumentation Remote inspection API for test automation
  • 55. THANK YOU! ariya.hidayat@gmail.com ariya.blogspot.com @ariyahidayat