高性能移动开发方法.docxVIP

高性能移动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?isnt?available?connection?=?navigator.connection?||?{type:0};??//?Set?connectionSpeed?switch(connection.type)?{?case?connection.CELL_3G:??//?3G??connectionSpeed?=