移动终端面临的主要问题:
- 网络数据传输延迟(即便是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'); }
这是个老话题了,主要是通过 减少服务器传输损耗(roundtrips /round trip time ) 来加速站点。这点在移动网络尤为明显。你可能已经知道以下几点技巧:
这里有一些你可能听过的新技巧:
JS动画相对比较 过时(old-school), 新一些的浏览器都开始支持CSS3变换还有动画,像iOS还有一些桌面浏览器都支持硬件加速。
你或许会想知道怎么通过JS来介入这些新动画特性。 其实已经有一些新的核心事件可以使用了:
对于不支持CSS3动画的浏览器,可以考虑降级使用JS动画(在一些性能较弱的设备会表现不够流畅)。因此在测试设备时,应该尽量不要使用模拟器。 因为性能方面的测试很难模拟。
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。 但并不完整! 显然还有更多的技术有待发现。但是这些将让你有个好的开始。
要记住移动设备不仅仅只是屏幕大小比较特殊! 内容传输与处理也比通常情况来得慢,所以要开始重视这个问题。
这是一个甜蜜而又痛苦的事实: 移动设备连接速度与处理能力都比较弱,但是还是可以通过一些可用的很棒的HTML5/CSS3特性来弥补这些不足。
隐者黑鹰
联系客服