无线端设计和重构需要注意的一些方面
2014-03-19
重构端需要注意的方面：
- 首次加载的HTTP请求数不要超过5个，大小不超过60kb。
- 图片可以使用base64减少请求，图片大小最好小于5kb。
使用fiddler软件限速来模拟移动端2G场景下的使用情况。
首先我们要了解一下2G和3G的上网速率是多少。
一般联通和移动的2G都是使用GSM网络制式。根据Q-zone的多普勒测速数据报告，2G的传输速率为14.0374Kb/s,3G传输速率为60.1967Kb/s，WiFi的70.8728Kb/s，还有一个未知网络，不知道是不是EGPRS（即2.5G）网络，传输速率是36.3655Kb/s。
上面的速率是平均值，会上下浮动，所以我们可以看到2G下如果你一张图片就10多K，可想而知展现时是什么样子。
我们可以通过fiddler来模拟限速，因为fiddler本来就是个代理，它提供了客户端请求前和服务器响应前的回调接口，我们可以在这些接口里面自定义一些逻辑。Fiddler的模拟限速正是在客户端请求前来自定义限速的逻辑，此逻辑是通过延迟发送数据或接收的数据的时间来限制网络的下载速度和上传速度，从而达到限速的效果。
fiddler提供了一个功能，让我们模拟低速网路环境。启用方法如下：Rules → Performances → Simulate Modem Speeds。勾选之后，你会发现你的网路瞬间慢下来了很多。至于慢下来后网络速度是多少，则由CustomRules.js 中如下程序控制的：
if (m_SimulateModem) {
// Delay sends by 300ms per KB uploaded.
oSession["request-trickle-delay"] = "300";
// Delay receives by 150ms per KB downloaded.
oSession["response-trickle-delay"] = "150";
}算法就是 1000/下载速度 = 需要delay的时间(毫秒)，比如50kB/s 需要delay20毫秒来接收数据，所以根据你需要的网络速度来修改上述值。
【注】：存档之后，原本已经勾选的Simulate Modem Speeds 会被取消勾选，需要再到Rules → Performances → Simulate Modem Speeds 勾选。
border-image
移动端需要适应不同的设备宽度，所以利用border-image来设置背景是非常方便的。