Understanding Mobile Web
Browser Performance
JZ - LBS

12年9月13日星期四
Topics
•
•
•
•
•
•
•

12年9月13日星期四

Mobile Browser Architecture
Mobile Network
HTTP:Parallel & Cache
Power
JavaScript Perfo...
what is a “Webkit” Browser?

12年9月13日星期四
History
KDE HTML
Widget

12年9月13日星期四
History
KDE HTML
Widget

12年9月13日星期四

copy
History
KDE HTML
Widget

12年9月13日星期四

copy

KHTML
History
KDE HTML
Widget

12年9月13日星期四

copy

KHTML
History
KDE HTML
Widget

copy

KHTML

KJS

12年9月13日星期四
History
KDE HTML
Widget

copy

KHTML

KJS

12年9月13日星期四

fork
History
KDE HTML
Widget

copy

KHTML

KJS

12年9月13日星期四

fork

WebKit
Android Browser Architecture
WebKit

WebCore

12年9月13日星期四

JavaScriptCore
Android Browser Architecture
WebKit

WebCore

JavaScriptCore

git clone https://android.googlesource.com/platform/external...
http://map.baidu.com/img/red_markers.png

Time

12年9月13日星期四
http://map.baidu.com/img/red_markers.png
DNS

12年9月13日星期四

Time
http://map.baidu.com/img/red_markers.png

12年9月13日星期四

123.125.114.86

Time
map.n.shifen.com

map.baidu.com

DNS
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
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.ba...
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.ba...
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.b...
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.b...
Mobile Network
0.4

40%

0.3

30%

30%

3G

WIFI

0.2

0.1

0

2G
12年9月13日星期四
2G Network
•

Download Speed

•
•

RTT(Round Trip Time)

•

12年9月13日星期四

15 K/s, or even worse

700ms - 900ms
How to Measure RTT

12年9月13日星期四
How to Measure RTT
•

12年9月13日星期四

ping
How to Measure RTT
•
•

12年9月13日星期四

ping
use real TCP connection
How to Measure RTT
•
•
•

12年9月13日星期四

ping
use real TCP connection
tools
How to Measure RTT
•
•
•

12年9月13日星期四

ping
use real TCP connection
tools
How to Measure RTT
•
•
•

ping
use real TCP connection
tools

¥12
12年9月13日星期四
12年9月13日星期四
RTT 800ms

12年9月13日星期四
RTT 800ms
DNS

12年9月13日星期四
RTT 800ms
DNS

12年9月13日星期四

TCP
RTT 800ms
DNS

12年9月13日星期四

TCP

HTTP
RTT 800ms
DNS

1 RTT

12年9月13日星期四

TCP

HTTP
RTT 800ms
DNS

1 RTT

12年9月13日星期四

TCP

1.5 RTT

HTTP
RTT 800ms
DNS

HTTP

1 RTT

12年9月13日星期四

TCP

1.5 RTT

1 RTT
Network Detection
•

W3C Network Information API

•
•

12年9月13日星期四

android support (none, 2g, 3g, wifi)

Measure real requ...
HTTP

12年9月13日星期四
Parallel Downloads Per Host
•
•
•

12年9月13日星期四

Android:4 - 8
iOS 4.x:6
iOS 5.x:6 - 8
Different with Desktop
•

PC

•
•

Mobile

•
12年9月13日星期四

Simultaneously

Seldom Simultaneously
Different with Desktop
•

PC

•
•

Mobile

•
12年9月13日星期四

Simultaneously

Seldom Simultaneously
Different with Desktop
•

PC

•
•

Mobile

•
12年9月13日星期四

Simultaneously

Seldom Simultaneously
Different with Desktop
•

PC

•
•

Mobile

•
12年9月13日星期四

Simultaneously

Seldom Simultaneously
Different with Desktop
•

PC

•
•

Mobile

•
12年9月13日星期四

Simultaneously

Seldom Simultaneously
Domain Sharding
•

12年9月13日星期四

Increase parallel downloads
Downside of Domain Sharding

12年9月13日星期四
Downside of Domain Sharding

•

12年9月13日星期四

Increase DNS lookups
Downside of Domain Sharding

•
•

12年9月13日星期四

Increase DNS lookups
Increase TCP connections
No need to consider using domain sharding

12年9月13日星期四
No need to consider using domain sharding

EXCEPT...

12年9月13日星期四
map encountered a problem

12年9月13日星期四
map encountered a problem

12年9月13日星期四
map encountered a problem

12年9月13日星期四
map encountered a problem

tiles load error

12年9月13日星期四
HTTP Pipelining

12年9月13日星期四
HTTP Pipelining

12年9月13日星期四
12年9月13日星期四
12年9月13日星期四
no pipelining

12年9月13日星期四
no pipelining

12年9月13日星期四
no pipelining

with pipelining

12年9月13日星期四
Mobile Support

•
•

12年9月13日星期四

Android Support
iOS 5 Support
12年9月13日星期四
12年9月13日星期四
iOS Safari

12年9月13日星期四
iOS Safari

12年9月13日星期四
iOS Safari

Android Browser
12年9月13日星期四
Cache

12年9月13日星期四
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月...
But a little
bit chaos
there is no consistent data

12年9月13日星期四
Cache Limit

•
•

12年9月13日星期四

Mobile cache is limited
Single component size limit
Cache Eviction

12年9月13日星期四
Cache Eviction
•

12年9月13日星期四

Prioritize base on expiration date (Android)
Cache Eviction
•

Prioritize base on expiration date (Android)

•

12年9月13日星期四

Far future expiration dates have higher pr...
Cache Eviction
•

Prioritize base on expiration date (Android)

•
•

12年9月13日星期四

Far future expiration dates have higher ...
More about Caching

12年9月13日星期四
More about Caching
•

12年9月13日星期四

Life Circle:
More about Caching
•

Life Circle:

•

12年9月13日星期四

tab switching
More about Caching
•

Life Circle:

•
•

12年9月13日星期四

tab switching
lock screen
More about Caching
•

Life Circle:

•
•
•

12年9月13日星期四

tab switching
lock screen
restart browser
More about Caching
•

Life Circle:

•
•
•
•
12年9月13日星期四

tab switching
lock screen
restart browser
restart phone
More about Caching
•

Life Circle:

•
•
•
•
•
12年9月13日星期四

tab switching
lock screen
restart browser
restart phone

Load f...
Cache Recommendations

12年9月13日星期四
Cache Recommendations
•

12年9月13日星期四

Use far future cache expiration headers
Cache Recommendations
•
•

12年9月13日星期四

Use far future cache expiration headers
Limit single component sizes
Cache Recommendations
•
•
•

12年9月13日星期四

Use far future cache expiration headers
Limit single component sizes
Use Applica...
Cache Recommendations
•
•
•
•

12年9月13日星期四

Use far future cache expiration headers
Limit single component sizes
Use Appli...
Cache References
•
•
•
•
•
•
•
12年9月13日星期四

Mobile Browser Cache Limits: Android, iOS, and webOS - YUI Blog
Mobile Browser...
Power

12年9月13日星期四
What about battery consumption
while loading a web page ?

12年9月13日星期四
12年9月13日星期四
12年9月13日星期四
Powser Consumption
•
•
•

12年9月13日星期四

JavaScript: Avoid unused functions
CSS: Avoid unused css rules
Image: Use jpeg
JavaScript Performance
•

SunSpider benchmark numbers have improved dramatically in rencent
years

•
•

12年9月13日星期四

Andro...
Touch, No Click

12年9月13日星期四
Touch, No Click

•

12年9月13日星期四

Click event delays 400ms
Touch, No Click

•
•

12年9月13日星期四

Click event delays 400ms
Use touch event instead, delay < 100ms
Common WPO
•
•
•
•
•
12年9月13日星期四

gzip
reduce dns lookups
reduce requests
minify js and css
scripts to the bottom (may be)
Image & Icon

12年9月13日星期四
Image & Icon
•

12年9月13日星期四

Use base64 encoded string
Image & Icon
•
•

12年9月13日星期四

Use base64 encoded string
Can be gzipped
Image & Icon
•
•
•

12年9月13日星期四

Use base64 encoded string
Can be gzipped
Size increase 0.8% but save lots of request
Tools
•
•
•
•
•
12年9月13日星期四

Fiddler(PC), Charles(PC, Mac, Linux)
Wireshark(PC, Mac, Linux)
Ping Pro(iOS)
iWebInspector, W...
Q&A
thanks

12年9月13日星期四
Upcoming SlideShare
Loading in...5
×

Understanding Mobile Web Browser Performance

258

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total Views
258
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
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日星期四
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×