H5总结

 

前言：

         2015年下半年开始接手开发iData相关的H5活动和手机端看数据功能，虽然在web开发方面已经有不少校验，但是手机端的web开发还是个小白，从到处查资料，请教其他部门有丰富开发经验的同事开始到现在已经积累了一些经验，当然也是从各种采坑开始，本文依旧旨在总结，对手机端H5开发中需要注意的一下问题列一列，说说自己的看法，大家一起学习：)

 

1、关于js框架选择

         关于js框架选择上遇到了一个难题，用jQuery还是zepto？jQuery应该是大多数人所熟悉的（很多前端设计的同学都会用，虽然他们不一定会使用javascript！），几年发展下来她的体积也是越来越大，目前的jquery-2.2.0.min大约有84K，而zepto是32K，她主打的体积小加载快收到手机端H5开发者的青睐，还有更加重要的一点，她使用了jQuery的语法，从jQuery到zepto是几乎没有学习成本的！所以比较推荐使用zepto。

         看下官方的介绍：

PS：如果是pc端的web，个人觉得就没必要特地改用zepto了，虽然体积小，然而执行效率jquery会比较高（执行效率和脚本文件大小并木有什么关系），更重要的是pc端的web会比较讲究各种高大上的前端交互效果，jquery拥有庞大的组件群，对开发来说是很好的体验。

 

2、关于资源优化

1.         页面背景图片建议用jpg，当然选择webP也不错，webP体积小，不过美中不足的是，WebP格式图像的编码时间“比JPEG格式图像长8倍”。

2.         图片一定要压缩，tinypng是一个不错的工具（https://tinypng.com/， 虽然是叫tingpng，但实际上她支持jpg的压缩了）

3.         合并脚本和样式表，脚本和样式表不要太分散，尽量各自集中在一个文件里面，发布出去之前记得压缩

4.         图片可以适当使用DataUrl。

    什么是适当使用？例如提示用户滑动页面的小箭头等小图片小图标，小图片我们认为没必要作用一个HTTP会话。

    为什么说适当使用？相同一个图片资源DataUrl的体积是二进制格式的4/3，并且不被浏览器缓存，所以说不划算呗。

图片转DataUrl也有在线工具，喏，http://dataurl.net/#dataurlmaker。

 

ps：关于图片我们看一下这张图，同一张图不同格式大小差异很明显：

（来自http://zhitu.isux.us/）

 

 

3、关于页面加载

1.         需要根据不同用户展示不同数据的（也就是说是动态页面），那么请在页面加载的时候一次把数据都请求回来，之后就和服务器端saygoodbye！（除非你要记录用户操作日志...）

2.         按需加载资源（图片、音乐、视频等），如果是很长的一页H5页面，那么建议通过滚屏加载

3.         cdn加速，第三方的资源建议异步去加载它

4.         能缓存在客户端的数据或者资源尽量缓存！用LocalStory，别用cookies了（除非你的后台服务器端需要读cookies）。

5.         小图片尽量合并在一起，用雪碧图（CSS Sprite）

6.         预加载的要有loading进度展示（进度条什么的都可以，别让用户心慌...）

7.         重复之前说的，资源一定要压缩（脚本样式表图片音乐视屏等等等！！！）

 

 

4、关于页面展示

1.         避免使用标签的style属性，用class指定样式，动画建议也写成不同的class

2.         需要使用动画的页面能用CSS3就不要用脚本去实现

3.         能使用requestAnimationFrame的地方就不要用setTimeout（在有些设备上会有问题）

4.         Scroll对CSS3很伤，因为会多次渲染，页面上尽量少用table，渲染起来很伤很伤

5.         灵活css3的 transitions、3Dtransitions。

6.         尽量少用float

7.         尽量少用奇奇怪怪的字体，用系统默认字体

8.         请注意兼容各种浏览器的样式名前缀，尤其是-webkit- ！！！！！

9.         页面click时间使用touchstat或者toucheend来代替，zepto.js推荐使用.bind('tap',callback)。

 

 

5、关于调试

         推荐使用chrome浏览器，可以模拟各种型号手机以及网络环境