移动开发中网站如何优化

常常做这样一件事，看见一篇博文觉得不错，CTRL+D；看见微博一条感觉有用的分享，收藏；看见一篇*老师讲的教程，觉得不错分享给好友，自己还@我的印象笔记 一下。做的太多太多了，却忘记自己总结了，只有自己拥有了才真正是属于自己的。上周写了篇 《一个简单的特效引发的大战之移动开发中我为什么放弃jquery mobile》收到了很多朋友的意见，主要还是代码质量，原生JS（移动开发接下来要走的路），对比分析不全面等方面比较欠缺。

本文内容申明

内容针对实际开发中涉及CSS,JS,Image方面用到的提供一些参考方案，仅表述个人观点与君交流，内容不全面的方面，请参考参考资料。点击此处鼓励一下unofficial

CSS JS Image 离不开的情愫之请求数

CSS/Js方面我想分享的是一个我遇到的问题，页面内我们包含的是公共的header，其中有一个map页面不一样，只是一张地图。这样一来就可以简单的样式分离，引用一个公共样式，js方面需要用到百度api，仅仅在这个页面内我们require了一个baiyun.mobile.map.js，这个针对地图的，我们在其他页面就无需包含。
Image方面，还记得上文中的例子，JQM版本文件比较大，首次加载耗时问题，二次加载中直接来源于缓存中，耗时就主要来自image请求，当时@码道程工 说道为什么不做一个JQM的css spirit做对比分析呢？这样一来区别应该就不是很大了。实际上这里还可以使用另外一个方法，实际开发中按照实际情况选择方式使用。
Data URI scheme: 这种技术可以让通常单独的元素,如图像和样式表中获取一个 http 请求而不是多个HTTP请求,可以更有效率（这里的效率视情况而定）。
格式：data:image/png(jpeg/gif);base64,image的base64编码
使用：<img src="data:image/png(jpeg/gif);base64,image的base64编码" alt="Data URI scheme测试" />
DEMO：插入了一张Image图片，图片大小124K。

通过Http URI scheme方式加载图片，来看一下请求数。


通过Data URI scheme方式加载图片，来看一下请求数。


通过上面的图片的对比分析可以看出来Data URI scheme在这里并没有优势，原因是gif编码使demo变大了，减少请求数量时我们需要慎重考虑，小图片可以选择这种方式加载出来，上文中我们就可以使用这样的方式来解决，小图标几乎在1K以内。现在还是在使用css spirit，在接下来的项目中或许可以尝试使用一下这种方式。

CSS JS Image 离不开的情愫之文件大小

1.在资料的使用上我们常常习惯了给予的什么文件就直接使用什么文件，PC端拿来一个插件就加上，拿来一个插件就加上，也许文中还是应用的jquery，而非压缩后的jquery.min。css文件也是一个容易忽略的部分，没有压缩，一般正常情况下都可以压缩掉25%左右（数据大致估算，不必参考），徘徊在2G时代的我每月还只有30M，你为什么就不为我想想呢？
2.图片方面上文有提到，这里就不过多描述，关于图片大小，图片质量方面考虑一下。

Js事件之触摸

var isMobileEvent = /ipad|ipod|iphone|android|windows phone/i.test(navigator.userAgent.toLocaleLowerCase())?'touchstart':'click';

var isMobileEvent = 'ontouchstart' in document.documentElement?'touchstart':'click';

PC端我们使用的是click事件，而移动端呢？click也可以使用啊，有效果的呢，难道就没发现点击后悔延迟一下下？据查阅的资料数据看这延迟的时间是300ms，移动端建议使用相应的触摸事件，而PC端我们就还是使用Click事件，这里就需要用到一个JS判定。
本文原创博客地址：http://www.cnblogs.com/unofficial 官网地址： www.pushself.com

参考资料

Data URI scheme：http://en.wikipedia.org/wiki/Data_URI_scheme
性能优化：http://segmentfault.com/blog/laopopo/1190000000367899