手机网站的终极优化

2011-05-10 11:34

[mobile, optimization]

在中国特殊国情下,手机网络速度低下,大部分还是GPRS,每个请求几乎都要2s :-(。
并且手机浏览器能同时建立的连接数也低一些

Connections Per HostnameMax Connections
Android 244
Android 3635
iPhone 3655
iPhone 4430
Nokia 9777
Opera Mobile 1024
Opera Mobile 1125

下图是一个典型的手机访问的 waterfall
waterfall

还有手机对cache的支持也比较有限

显然减少每个页面连接数是非常非常有价值的。 Data URI技术非常适合用在这个地方,支持的浏览器也还是不少的。

  •     Firefox 2+
  •     Opera 7.2+  data URIs must not be longer than 4100 characters
  •     Chrome (all versions)
  •     Safari (all versions)
  •     Internet Explorer 8+ data URIs must be smaller than 32k
  •     Internet Explorer 9 does not have 32KiB limitation and allowed in broader elements

手机浏览器可能不支持的有

  • IE Mobile all 6.12-8.12
  • Nokia 51/66/71/82/95
  • PlayStation Portable 2.00
  • Samsung SGHI560
  • WebPilot 8.7
  • Obigo 7
  • Opera 5/6/7 不支持
  • Blackberry 6/8330/8520/9300/9700

以上未列出的系统应该都支持,如:Nokia 后期的系统,IE 8/9,Android,iPhone。

3g.renren.com 上的Logo的HTML代码为

<img alt="renren" src="http://a.xnimg.cn/wap/logo.gif" />

用Data URI代码如下:

<img alt="renren" src="data:image/gif;base64,R0lGODlhTAAWANUAAJXA4ou63ht1u9nq+L3Y7VGXzKBSZeTx+8z
i83Os1u5ANuPu+Pr8/mun1TeHxMfe8ACGytzr93uw2NLm9v3+//7+/63O6ff7/i6BwcdGS+v0+wB8xefy+gBptUCMxu72/Pz
9/vT5/Q9vuNbp+PH4/KDH5d3s+Ch/wA9ttfH3/Pr7/gBerNzr+bDR6+/1+gB0vh94vF2f0PT6/UyTymCf0Nbn9jxdlKnM5gB
jsABuuwBhr1pYhNfq+Nfp+ABms////yH5BAAAAAAALAAAAABMABYAAAb/wJ9wSCwaj8ikcnlkQCAVCqXCrFqv1UrlsoGAvlr
KbxotT6Vnshl91pbDb3SYLIXLo3cQF8JQMb5fGgEYHkI+BSWAICWEQh4YiYqSID4SihSSHh6SEj6en54iloAhLxAXF35+DzC
ehT+fHhoPGK6OnhgPDLu7Kn4Elby9wyIevrydEsrLEiI+wiQ5EDIhqBcPzrawnw4CsbehD9bjwBLj5xc+HuedMxwNHjcXMbX
jHx0QKSQhIQet39s8ZTAA0AMoDNT4KQTgowG/hApD1PABI2KITj5mZLvxKQQ1GRrwffhAIgVGgJ92KFBgQ5tBUABK6tMXw4c
ImSRK5iTB0AcB/30lO9Ws9KnmTBIcfEDQoGHkP5SeDKwkqA4ct5FYTVD0AQCr1w8YWsXw2mmCpw/tOrlwMfIADggcOGiIAMp
TAiG1fKxUkEFbgbo+mApu4MOCCBERBAsu4SOBAx8tBCdobPexCMKKF+iAcOAABwuASwih4WmvArtCAgCOGxe0u8kOWMcdIAL
GANAiBsSd7COss1rOZC9YAWHBggOg65oQwljvXk8IhGit2xn54RqdaznAfqBGLQudCcMgcGCyCAsWHIio8a/6ARPEF5gwwaI
ujR8uhLTa2/dV/pefmIAAYSK0wAILJhDgjAAtBOBMAPMheIJNARCGIH0ESBDAYxGyMP8AcfMNMMCEoeQXQHTASKWAASJEZ4F
oJmSjzgAInMCgiDgScMIJCPwVAI4i9lggYUCOGAqQPaywAY48qGZTdC7AUABzNqyEgmg/eACDEMn5UAIPPCCAgIg8DABmkCI
SUOSZYxJQAplmtlBCCWOWOUANSpI5wggnYBDdD6R5yaUBBjyQmicSCIEADA6MwEMPPjjgQE0OEHZIA4dJIIAIPYnwJQKPVRp
pT5440MOjPUyg5KmoInDBoaEQIIQLDDAHCpYXINDDrod0YpADBXSCKQDdnPBYCZX2UAKPkLYgqQMMteDDrruqugGrp/YwQAh
/1RXAB9qiBVgCJAxALaQIMBaVQwMFNMBYA6Y6cEIDqvXQgLslCMCrs5IyNsK01Kr6gqOoUltCAd74cEIMBJxLQAwknoDIubz
u+lhD7jZkKgDeEGYvpshGSimxjEF6rsCs8jACxSsXTPGuj7r8cg+OZjuzzDRTjPPJOLyQcswzU7ty0DivPHTNRAet884TdOA
ztUArPfTNLxu9K9JUKw21zCpPkMMGQQAAOw==" />

是有点长,效果为renren

花了点时间用 Python 120 行代码实现了个代理,没有一个img请求。

附上BrowserScope的关于浏览器的特性