Understanding Mobile Web Browser Performance

962 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
962
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Understanding Mobile Web Browser Performance

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

×