手机网站的终极优化
2011-05-10 11:34
[mobile, optimization]
在中国特殊国情下,手机网络速度低下,大部分还是GPRS,每个请求几乎都要2s :-(。
并且手机浏览器能同时建立的连接数也低一些
Connections Per Hostname | Max Connections | |
Android 2 | 4 | 4 |
Android 3 | 6 | 35 |
iPhone 3 | 6 | 55 |
iPhone 4 | 4 | 30 |
Nokia 97 | 7 | 7 |
Opera Mobile 10 | 2 | 4 |
Opera Mobile 11 | 2 | 5 |
下图是一个典型的手机访问的 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==" />
是有点长,效果为
花了点时间用 Python 120 行代码实现了个代理,没有一个img请求。
附上BrowserScope的关于浏览器的特性