专栏首页分布式系统和大数据处理HTML5触摸界面设计与开发

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 条评论
登录 后参与评论

相关文章

  • Linux入门很简单

    因为计划以后用Linux作为服务器操作系统,并购买了腾讯云的服务器,安装了CentOS。但由于自己对于Linux知之甚少,于是就想买一本比较简单的入门书。最后选...

    张子阳
  • 从一个范例看XML的应用

    如果你已经看了《Asp.Net Ajax的两种基本开发模式》 这篇文章,你可能很快会发现这样一个问题:在那篇文章的方式2中,客户端仅仅是发送了页面上一个文本框的...

    张子阳
  • C#网络编程(同步传输字符串) - Part.2

    在与服务端的连接建立以后,我们就可以通过此连接来发送和接收数据。端口与端口之间以流(Stream)的形式传输数据,因为几乎任何对象都可以保存到流中,所以实际上可...

    张子阳
  • 这么简单的Redis面试题都不懂,怎么拿offer?

    随着系统访问量的提高,复杂度的提升,响应性能成为一个重点的关注点。而缓存的使用成为一个重点。redis 作为缓存中间件的一个佼佼者,成为了面试必问项目。本文分享...

    lyb-geek
  • TiDB 原理与实战|架构师实践日

    摘要 本篇文章出自七牛云和 PingCAP 联合主办的架构师实践日上,来自 PingCAP 的开发工程师李霞分享的《 TiDB 原理与实战》的演讲,介绍了目前分...

    IT大咖说
  • 3道Redis高频面试题详细解析

    随着系统访问量的提高,复杂度的提升,响应性能成为一个重点的关注点。而缓存的使用成为一个重点。redis 作为缓存中间件的一个佼佼者,成为了面试必问项目。本文分享...

    程序IT圈
  • 面试被问频率最高的几道Redis面试题

    Redis相关面试题确实很多,主要是因为知识点很多,但是面试的时候,不可能都问个遍,所以本文就来总结一下,面试被问频率最高的几道Redis的面试题。

    田维常
  • 这几道 Redis 面试题都不懂,怎么拿 Offer?

    随着系统访问量的提高,复杂度的提升,响应性能成为一个重点的关注点。而缓存的使用成为一个重点。redis 作为缓存中间件的一个佼佼者,成为了面试必问项目。

    芋道源码
  • 这几道Redis面试题都不懂,怎么拿offer?

    随着系统访问量的提高,复杂度的提升,响应性能成为一个重点的关注点。而缓存的使用成为一个重点。redis 作为缓存中间件的一个佼佼者,成为了面试必问项目。本文分享...

    Spark学习技巧
  • 这几道Redis面试题都不懂,怎么拿offer?

    随着系统访问量的提高,复杂度的提升,响应性能成为一个重点的关注点。而缓存的使用成为一个重点。redis 作为缓存中间件的一个佼佼者,成为了面试必问项目。本文分享...

    java思维导图

扫码关注云+社区

领取腾讯云代金券