Understanding Mobile Web Browser Performance
•
1 recomendación•1,741 vistas
Mobile web performance including metrics, tools, methods and solutions.
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Understanding Mobile Web Browser Performance
- 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日星期四
- 12. Android Browser Architecture WebKit WebCore JavaScriptCore git clone https://android.googlesource.com/platform/external/webkit 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日星期四
- 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日星期四
- 57. 12年9月13日星期四
- 58. 12年9月13日星期四
- 62. Mobile Support • • 12年9月13日星期四 Android Support iOS 5 Support
- 63. 12年9月13日星期四
- 64. 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
- 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
- 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
- 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
- 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
- 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)
- 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