HTML5触摸界面设计与开发
HTML5触摸界面设计与开发
2017-12-14 张子阳 推荐: 3 难度: 3
这本书大体可以分为三个部分：移动端的优化、动画的实现方法、滑动和手势。
移动端的优化
首先讲了移动端和电脑端的一些不同，讲到了viewport的概念和相关的虚拟像素、媒体查询，借助媒体查询来实现横屏、竖屏的区别显示。
接着讲到了提高页面响应速度的优化策略。下面列出的优化策略，小部分书中未涉及，既然提到这个了，我就顺便补充一些。。。
- 不同资源放到不同的子域名下，提升浏览器并行处理速度（来自同一域名下的资源，浏览器并行下载数一般是6-8个）。
- 减少连接数：多个css、多个js、多个零散小图片，可以分别合并成一个文件。
- 压缩合并后的 css、js 文件，html文件也可以进行压缩（前端工具压缩）。
- 将js脚本文件放置在页面底部。
- 使用Google的PageSpeed工具获得优化建议。
- 优化图片尺寸，将图片作为背景写到css中，然后再通过媒体查询，为不同的设备加载不同的图片（免脚本，但图片尺寸需要提前知道）。
- 启用Http缓存（需在服务端添加HTTP缓存头：Expires）
- 启用Http压缩（服务端压缩，通常用GZip压缩文本型文件，对jpg等图片文件效果不大，反而增大服务器开销）
- 使用localstorage创建一个本地缓存层。
- 应用缓存（Application cache），未联网时依旧可用（个人认为这个作用不大，因为不好管理缓存过期）。
除了上面这些小技巧以外，还专门用一个章节讲了“PJAX”，开始我也不懂这个是什么，看了以后其实就是使用 history api + ajax 来实现单页的效果。
这个例子我后面补上
动画的实现方法
这一节讲解了实现动画的几种方式：
- 使用setTimeout，效率最低，占用javascript线程。
- 使用Css3 transition，效率高，用于制作简单动画，推荐
- 使用Css3 animation，效率高，transition无法实现时，推荐使用
- 使用requestAnimationFrame（请求动画帧），当transition和animation无法实现时使用，用来替代setTimeout，灵活性最高
使用requestAnimationFrame和setTimeout的一个最大区别就是：它只接受一个回调函数，并无法设置时间。因此，在不同浏览器下的执行频率是不同的！除此以外，它需要加浏览器前缀（webkit、moz、ms），不及setTimeout通用。下面的例子演示了固定函数执行时间（不限制次数），和固定函数执行次数（不限制时间）的不同。
例子：固定函数执行时间 Chrome 63下，每秒大概执行58次。
例子：固定函数执行次数 Chrome 63下，执行100次大概1800毫秒。
所有例子都通过查看源码来了解
滑动和手势
这部分几乎全是实例，也就是代码+代码讲解的方式进行，但是作者的讲述方式不够好，应该先展示最终结果，再讲一步步的实现过程。要么就是翻译的水平一般，总之看得有点晕。
几个例子是：
- 无限滚动。即根据scrollTop等属性判断页面是否到底部，如果到底部则异步刷新。
- 支持手指滑动的Switch开关特效
- 触摸控制的灯箱效果（lightbox）
- 左右滑动翻页（Swipe）
- 双指缩放图片
这些例子除非全部实现一遍，否则看一遍留下不了太多印象。这些都是很好的练习题，很多我之前实践过，但都耦合在项目中，没有提取出来。有时间的话也做几个范例出来。
其实知识点不多，实际都是对touchstart、touchmove、touchend三个事件的处理而已。
总得来说，这本书还可以，按是真正有价值的部分比较少。标题是“触摸界面的设计与开发”，实际一大半都在讲性能优化，而这些性能优化技巧又是很普遍的，和“触摸”没什么太大关系。而书本身又只有薄薄的200页，关于触摸的内容有多少可想而知。值得肯定的是，书中举得例子都比较接地气，实际项目中比较常见。
感谢阅读，希望这篇文章能给你带来帮助！