高性能移动web开发技巧-移动web开发入门

移动终端面临的主要问题：

网络数据传输延迟（即便是3G网络）

CPU运算能力（即便是配有1GHz+的设备）

移动终端可以做的优化：

根据设备屏幕来选择加载资源

降低延迟，加快连接速度

提高处理性能

本文介绍了一些针对移动设备优化技术，特别针对智能移动设备（iOS,Android,WP）。

针对屏幕来优化图片

移动设备有不同屏幕尺寸，分辨率，应当有针对性加载不同的图片内容。

如果你正在开发一个只有一套带有很多图形样式的站点，那就意味着无论用户用何种大小设备都会下载这些巨大的图片。为什么一定要让移动用户下载这些为桌面用户开发的样式图片呢？

不过不用担心，现代很多设备都支持 CSS media queries（媒体选择器）了，通过media queries 我们可以方便的针对不同设备屏幕特性来加载不同版本的样式图片。

/* Screens bigger than 480px */ 
@media only screen and (min-device-width: 481px) { 
#header { background-image: url(header-full.png); } 
} 
 
/* Screens smaller than 480px */ 
@media only screen and (max-device-width: 480px) { 
#header { background-image: url(header-small.png); } 
}

以上css代码中header-full.jpg 会被自动应用在大屏幕设备里，另外一个优化过的小图片(header-small.jpg)则会应用到一些小屏幕上。

另外对于一些高显示密度的设备（如 iPhone4：326PPI），如果使用低于100dpi（dots per inch）分辨率图片，显示效果会不那么理想（fuzzy）！或许可以以牺牲一点点性能的代价换一张高分辨率图片来弥补这个问题。

可以通过media queries 点密度条件判断来加载不同方案：

/* High dpi */ 
@media only screen and (min-resolution: 300dpi), 
  only screen and (-webkit-min-device-pixel-ratio: 1.5), 
  only screen and (min--moz-device-pixel-ratio: 1.5) { 
#header { background-image: url(header-300dpi.png); } 
} 
 
/* Low dpi */ 
@media only screen and (max-resolution: 299dpi), 
  only screen and (-webkit-max-device-pixel-ratio: 1.5), 
  only screen and (max--moz-device-pixel-ratio: 1.5) { 
#header { background-image: url(header-72dpi.png); } 
}

你知道吗？还可以通过 javascript 访问 window.devicepixelratio对象来获取屏幕的分辨率。

针对不同网络类型

Android 2.2 最近引入了一个 navigator.connection对象，开发者可以通过这个对象获取当前设备的网络接入类型。这样就可以通过这个判断来充分利用连接资源。从而针对高速的网络提高一些更加优质的内容。

这是一个接入方式为3G的设备中 navigator.connection 对象包含的键值:

navigator = { 
  connection: { 
    "type": "4", 
    "UNKNOWN": "0", 
    "ETHERNET": "1", 
    "WIFI": "2", 
    "CELL_2G": "3", 
    "CELL_3G": "4" 
  } 
};

通过这些简单的代码我们就能检测网络类型，然后为HTML元素添加不同的CSS class。

// Initialize variables 
var connection, connectionSpeed, htmlNode, htmlClass; 
 
// Create a custom object fallback if navigator.connection isn't available 
connection = navigator.connection || {'type':'0'}; 
 
// Set connectionSpeed 
switch(connection.type) { 
case connection.CELL_3G: 
  // 3G 
  connectionSpeed = 'mediumbandwidth'; 
break; 
case connection.CELL_2G: 
  // 2G 
  connectionSpeed = 'lowbandwidth'; 
break; 
default: 
  // WIFI, ETHERNET, UNKNOWN 
  connectionSpeed = 'highbandwidth'; 
}

这样我们就能为不同网络类型提供优化过的CSS:

.highbandwidth .logo   { background-image:url('logo-high.jpg'); } 
.mediumbandwidth .logo { background-image:url('logo-medium.jpg'); } 
.lowbandwidth .logo    { background-image:url('logo-low.jpg'); }

减少 HTTP请求

这是个老话题了，主要是通过减少服务器传输损耗(roundtrips /round trip time ) 来加速站点。这点在移动网络尤为明显。你可能已经知道以下几点技巧：

使用CSS3来替代一些图片效果(border-radius,text-shadow,background linear、radia gradients,box-reflect)
在CSS和HTML里使用base64编码图像
避免重定向(很不幸这个在移动设备很常见，比如用iPhone访问yahoo.com会重定向到 m.yahoo.com)
缓存ajax数据

这里有一些你可能听过的新技巧：

用Emoji pictograms 替代图片(查看列表)（iOS 2.2+, other Japanese phones）
把通用的CSS和JS放到外联文件里（刚开始会增加请求，缓存后就可以显著减少请求了）
用localStorage替代cookie（每次HTTP请求cookie都会变成而外加载的数据）
用HTML5缓存(cache manifest and client-side databases)来替代传统缓存，可以查看下扩展阅读里关于移动设备缓存的研究

减少javascript定时器动画

JS动画相对比较过时(old-school)，新一些的浏览器都开始支持CSS3变换还有动画，像iOS还有一些桌面浏览器都支持硬件加速。

你或许会想知道怎么通过JS来介入这些新动画特性。其实已经有一些新的核心事件可以使用了：

onwebkittransitionend (ontransitionend for Firefox, onotransitionend for Opera)
onwebkitanimationstart
onwebkitanimationiteration
onwebkitanimationend

对于不支持CSS3动画的浏览器，可以考虑降级使用JS动画（在一些性能较弱的设备会表现不够流畅）。因此在测试设备时，应该尽量不要使用模拟器。因为性能方面的测试很难模拟。

localStorage 和 sessionStorage

localStorage 和 sessionStorage 可以看成javascript对象。sessionStorage的数据会在页面关闭时清空，localStorage则可以长时间存储数据不会因为浏览器关闭而自动删除数据。

但是有一点要注意的：

这两个对象虽然很像常规的JS对象，但是有个缺点是只能存储字符串。所以如果你用他保存对象，可能它记录下来的会是”[object Object]“。悲催吧，不过可以通过 JSON.stringify() and JSON.parse() 来辅助存储：

var user = { 
  firstName: 'Joe', 
  lastName: 'Schmoe', 
  age: 40 
} 
 
// Store the object 
localStorage.userInfo = JSON.stringify(user); 
 
// Retrieve the object 
var user = JSON.parse(localStorage.userInfo);

不同浏览器为(localStorage/sessionStorage)提供的存储空间可能会不一样。但是5Mb貌似是一个公认的最小值。

其他javascript技巧

这边还有点小技巧可以优化移动端的javascript。但并不完整！显然还有更多的技术有待发现。但是这些将让你有个好的开始。

减少表单验证中javascript的使用，取而代之利用HTML5的表单验证功能，如果支持的话：input autofocus attribute，input placeholder text,new form validation (还未完成)
减少初始延迟：即使你用的是WIFI，但是性能不佳的设备仍旧会花很多时间来解析脚本!你可以先加载JS再后解析: loading the JS in a comment block and eval’ing later (一个聪明的方法，来自Gmail Mobile team)
利用新客户端数据库技术(indexedDB已经开始成为受欢迎的标准)，但是iOS4.2与Android2.2还未实现支持
geolocation:保存或缓存用户最后记录的位置
利用WebSokects（目前只有iOS4.2+支持）

结论

要记住移动设备不仅仅只是屏幕大小比较特殊！内容传输与处理也比通常情况来得慢，所以要开始重视这个问题。

这是一个甜蜜而又痛苦的事实：移动设备连接速度与处理能力都比较弱，但是还是可以通过一些可用的很棒的HTML5/CSS3特性来弥补这些不足。

扩展阅读：