Understanding Mobile Web Browser Performance
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Understanding Mobile Web Browser Performance

  • 380 views
Uploaded on

Mobile web performance including metrics, tools, methods and solutions.

Mobile web performance including metrics, tools, methods and solutions.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
380
On Slideshare
380
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Understanding Mobile Web Browser Performance JZ - LBS 12年9月13日星期四
  • 2. Topics • • • • • • • 12年9月13日星期四 Mobile Browser Architecture Mobile Network HTTP:Parallel & Cache Power JavaScript Performance Tools WPO
  • 3. what is a “Webkit” Browser? 12年9月13日星期四
  • 4. History KDE HTML Widget 12年9月13日星期四
  • 5. History KDE HTML Widget 12年9月13日星期四 copy
  • 6. History KDE HTML Widget 12年9月13日星期四 copy KHTML
  • 7. History KDE HTML Widget 12年9月13日星期四 copy KHTML
  • 8. History KDE HTML Widget copy KHTML KJS 12年9月13日星期四
  • 9. History KDE HTML Widget copy KHTML KJS 12年9月13日星期四 fork
  • 10. History KDE HTML Widget copy KHTML KJS 12年9月13日星期四 fork WebKit
  • 11. Android Browser Architecture WebKit WebCore 12年9月13日星期四 JavaScriptCore
  • 12. Android Browser Architecture WebKit WebCore JavaScriptCore git clone https://android.googlesource.com/platform/external/webkit 12年9月13日星期四
  • 13. http://map.baidu.com/img/red_markers.png Time 12年9月13日星期四
  • 14. http://map.baidu.com/img/red_markers.png DNS 12年9月13日星期四 Time
  • 15. http://map.baidu.com/img/red_markers.png 12年9月13日星期四 123.125.114.86 Time map.n.shifen.com map.baidu.com DNS
  • 16. http://map.baidu.com/img/red_markers.png 12年9月13日星期四 123.125.114.86 TCP map.n.shifen.com map.baidu.com DNS Time
  • 17. http://map.baidu.com/img/red_markers.png 12年9月13日星期四 Time ACK SYNACK SYN 123.125.114.86 TCP map.n.shifen.com map.baidu.com DNS
  • 18. http://map.baidu.com/img/red_markers.png 12年9月13日星期四 HTTP ACK SYNACK SYN 123.125.114.86 TCP map.n.shifen.com map.baidu.com DNS Time
  • 19. 12年9月13日星期四 TCP HTTP/1.1 200 OK GET /img/red_markers.png ACK DNS SYNACK SYN 123.125.114.86 map.n.shifen.com map.baidu.com http://map.baidu.com/img/red_markers.png HTTP Time
  • 20. 12年9月13日星期四 TCP HTTP/1.1 200 OK GET /img/red_markers.png ACK DNS SYNACK SYN 123.125.114.86 map.n.shifen.com map.baidu.com http://map.baidu.com/img/red_markers.png HTTP Time
  • 21. Mobile Network 0.4 40% 0.3 30% 30% 3G WIFI 0.2 0.1 0 2G 12年9月13日星期四
  • 22. 2G Network • Download Speed • • RTT(Round Trip Time) • 12年9月13日星期四 15 K/s, or even worse 700ms - 900ms
  • 23. How to Measure RTT 12年9月13日星期四
  • 24. How to Measure RTT • 12年9月13日星期四 ping
  • 25. How to Measure RTT • • 12年9月13日星期四 ping use real TCP connection
  • 26. How to Measure RTT • • • 12年9月13日星期四 ping use real TCP connection tools
  • 27. How to Measure RTT • • • 12年9月13日星期四 ping use real TCP connection tools
  • 28. How to Measure RTT • • • ping use real TCP connection tools ¥12 12年9月13日星期四
  • 29. 12年9月13日星期四
  • 30. RTT 800ms 12年9月13日星期四
  • 31. RTT 800ms DNS 12年9月13日星期四
  • 32. RTT 800ms DNS 12年9月13日星期四 TCP
  • 33. RTT 800ms DNS 12年9月13日星期四 TCP HTTP
  • 34. RTT 800ms DNS 1 RTT 12年9月13日星期四 TCP HTTP
  • 35. RTT 800ms DNS 1 RTT 12年9月13日星期四 TCP 1.5 RTT HTTP
  • 36. RTT 800ms DNS HTTP 1 RTT 12年9月13日星期四 TCP 1.5 RTT 1 RTT
  • 37. Network Detection • W3C Network Information API • • 12年9月13日星期四 android support (none, 2g, 3g, wifi) Measure real request download time
  • 38. HTTP 12年9月13日星期四
  • 39. Parallel Downloads Per Host • • • 12年9月13日星期四 Android:4 - 8 iOS 4.x:6 iOS 5.x:6 - 8
  • 40. Different with Desktop • PC • • Mobile • 12年9月13日星期四 Simultaneously Seldom Simultaneously
  • 41. Different with Desktop • PC • • Mobile • 12年9月13日星期四 Simultaneously Seldom Simultaneously
  • 42. Different with Desktop • PC • • Mobile • 12年9月13日星期四 Simultaneously Seldom Simultaneously
  • 43. Different with Desktop • PC • • Mobile • 12年9月13日星期四 Simultaneously Seldom Simultaneously
  • 44. Different with Desktop • PC • • Mobile • 12年9月13日星期四 Simultaneously Seldom Simultaneously
  • 45. Domain Sharding • 12年9月13日星期四 Increase parallel downloads
  • 46. Downside of Domain Sharding 12年9月13日星期四
  • 47. Downside of Domain Sharding • 12年9月13日星期四 Increase DNS lookups
  • 48. Downside of Domain Sharding • • 12年9月13日星期四 Increase DNS lookups Increase TCP connections
  • 49. No need to consider using domain sharding 12年9月13日星期四
  • 50. No need to consider using domain sharding EXCEPT... 12年9月13日星期四
  • 51. map encountered a problem 12年9月13日星期四
  • 52. map encountered a problem 12年9月13日星期四
  • 53. map encountered a problem 12年9月13日星期四
  • 54. map encountered a problem tiles load error 12年9月13日星期四
  • 55. HTTP Pipelining 12年9月13日星期四
  • 56. HTTP Pipelining 12年9月13日星期四
  • 57. 12年9月13日星期四
  • 58. 12年9月13日星期四
  • 59. no pipelining 12年9月13日星期四
  • 60. no pipelining 12年9月13日星期四
  • 61. no pipelining with pipelining 12年9月13日星期四
  • 62. Mobile Support • • 12年9月13日星期四 Android Support iOS 5 Support
  • 63. 12年9月13日星期四
  • 64. 12年9月13日星期四
  • 65. iOS Safari 12年9月13日星期四
  • 66. iOS Safari 12年9月13日星期四
  • 67. iOS Safari Android Browser 12年9月13日星期四
  • 68. Cache 12年9月13日星期四
  • 69. Mobile Cache Size iPhone4 iPad1 iPad2 OS iOS 4.3 Android 2.x iOS 4.3 iOS 4.3 persistent 0 4 0 0 memory 12年9月13日星期四 Android 100 4 20 50
  • 70. But a little bit chaos there is no consistent data 12年9月13日星期四
  • 71. Cache Limit • • 12年9月13日星期四 Mobile cache is limited Single component size limit
  • 72. Cache Eviction 12年9月13日星期四
  • 73. Cache Eviction • 12年9月13日星期四 Prioritize base on expiration date (Android)
  • 74. Cache Eviction • Prioritize base on expiration date (Android) • 12年9月13日星期四 Far future expiration dates have higher priority
  • 75. Cache Eviction • Prioritize base on expiration date (Android) • • 12年9月13日星期四 Far future expiration dates have higher priority Evict lowest priority items first
  • 76. More about Caching 12年9月13日星期四
  • 77. More about Caching • 12年9月13日星期四 Life Circle:
  • 78. More about Caching • Life Circle: • 12年9月13日星期四 tab switching
  • 79. More about Caching • Life Circle: • • 12年9月13日星期四 tab switching lock screen
  • 80. More about Caching • Life Circle: • • • 12年9月13日星期四 tab switching lock screen restart browser
  • 81. More about Caching • Life Circle: • • • • 12年9月13日星期四 tab switching lock screen restart browser restart phone
  • 82. More about Caching • Life Circle: • • • • • 12年9月13日星期四 tab switching lock screen restart browser restart phone Load from home screen
  • 83. Cache Recommendations 12年9月13日星期四
  • 84. Cache Recommendations • 12年9月13日星期四 Use far future cache expiration headers
  • 85. Cache Recommendations • • 12年9月13日星期四 Use far future cache expiration headers Limit single component sizes
  • 86. Cache Recommendations • • • 12年9月13日星期四 Use far future cache expiration headers Limit single component sizes Use Application Cache, LocalStorage and Database
  • 87. Cache Recommendations • • • • 12年9月13日星期四 Use far future cache expiration headers Limit single component sizes Use Application Cache, LocalStorage and Database Do your own test
  • 88. Cache References • • • • • • • 12年9月13日星期四 Mobile Browser Cache Limits: Android, iOS, and webOS - YUI Blog Mobile Browser Cache Limits, Revisited - YUI Blog Understanding Mobile Cache Sizes - Guy from Mobitest Mobile Browser Cache Sizes – Round 2 - Guy from Mobitest Mobile cacheability - WINK Blog Early findings: Mobile browser cache persistence and behaviour Mobile cache file sizes - Steve Sounder
  • 89. Power 12年9月13日星期四
  • 90. What about battery consumption while loading a web page ? 12年9月13日星期四
  • 91. 12年9月13日星期四
  • 92. 12年9月13日星期四
  • 93. Powser Consumption • • • 12年9月13日星期四 JavaScript: Avoid unused functions CSS: Avoid unused css rules Image: Use jpeg
  • 94. JavaScript Performance • SunSpider benchmark numbers have improved dramatically in rencent years • • 12年9月13日星期四 Android (Jun 2011) < 2.5s Desktop Chrome (Sep 2008) ~ 2.8s
  • 95. Touch, No Click 12年9月13日星期四
  • 96. Touch, No Click • 12年9月13日星期四 Click event delays 400ms
  • 97. Touch, No Click • • 12年9月13日星期四 Click event delays 400ms Use touch event instead, delay < 100ms
  • 98. Common WPO • • • • • 12年9月13日星期四 gzip reduce dns lookups reduce requests minify js and css scripts to the bottom (may be)
  • 99. Image & Icon 12年9月13日星期四
  • 100. Image & Icon • 12年9月13日星期四 Use base64 encoded string
  • 101. Image & Icon • • 12年9月13日星期四 Use base64 encoded string Can be gzipped
  • 102. Image & Icon • • • 12年9月13日星期四 Use base64 encoded string Can be gzipped Size increase 0.8% but save lots of request
  • 103. Tools • • • • • 12年9月13日星期四 Fiddler(PC), Charles(PC, Mac, Linux) Wireshark(PC, Mac, Linux) Ping Pro(iOS) iWebInspector, WEINRE, Chrome for Android, UC Mobitest
  • 104. Q&A thanks 12年9月13日星期四