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页,关于触摸的内容有多少可想而知。值得肯定的是,书中举得例子都比较接地气,实际项目中比较常见。

感谢阅读,希望这篇文章能给你带来帮助!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

Infinity New Tab:重新定义你的Chrome新标签页

Infinity new tab 是一款实用又清新的 Chrome(谷歌浏览器)新标签页功能扩展,可以完美替代默认的新标签页。受插件作者邀请,我特意安装体验了一...

362120
来自专栏十月梦想

HTML基本与主要结构

10920
来自专栏腾讯移动品质中心TMQ的专栏

手把手教你搭建安卓自动化框架之UIAutomator

前言 谷歌对UI测试(UI Tetsting)的概念是:确保用户在一系列操作过程中(例如键盘输入、点击菜单、弹出对话框、图像显示以及其他UI控件的改变),你的应...

3.9K100
来自专栏北京马哥教育

现代Web页面开发流程

通常来说,Web页面开发的流程大致是这样的:设计师(设计师不是美工,就像程序员不是码农一样)提供设计稿,通常是图片格式。然后前端的开发人员 (在ThoughtW...

361120
来自专栏小程序之家

如何入门小程序开发

在上一篇教程中,我们教大家使用微信官方Demo快速搭建了一个小相册,并学会了如何安装开发者工具,如何创建小程序,如何做服务端配置。并利用腾讯云COS实现相册上传...

9.7K80
来自专栏腾讯开源的专栏

【开源公告】高性能的图片框架 LKImageKit 正式开源

LKImageKit LKImageKit 是一个高性能的图片框架,包括了图片控件,图片下载、内存缓存、磁盘缓存、图片解码、图片处理等一系列能力。合理的架构和...

40040
来自专栏编程微刊

手把手教你用vue-cli构建一个简单的路由应用

上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635

12010
来自专栏程序员的碎碎念

JavaGUI编程之·引用类库Beautyeye改变外观

上一期讲到JavaGUI默认界面在win7上显示得比较粗糙,小编在原来的基础上对各种组件的属性进行大量修改才得以让原界面扁平化。上期推文发出后,就有大神提供建议...

1.3K90
来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。

76970
来自专栏武军超python专栏

2018年8月7号升级飞机大战的总结

今天学到的新单词: indentation  n缩进 transform  v改变,变换 collide v碰撞 recursion  n递归

13320

扫码关注云+社区

领取腾讯云代金券