HTML5触屏界面设计与开发

最新推荐文章于 2025-05-28 14:34:12 发布

原创最新推荐文章于 2025-05-28 14:34:12 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了如何优化HTML5触屏页面的加载速度，包括合并CSS，脚本置底，调整图片大小和使用CDN。接着讨论了浏览器缓存、轻触事件、CSS过渡和JavaScript性能优化。还介绍了处理移动端手势操作，如滚动、滑动、缩放和方向改变的策略，以及解决设备缩放和固定定位的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1提高第一次加载的速度

加载页面的顺序

解析域名

发起请求

下载相应

渲染页面

导致页面加载缓慢的几个原因

1HTTP连接数太多

2总的字节数太大

3等待时的渲染阻塞

4网络延迟

5缓存能力差

怎么解决这些常见的问题

1请求数太多

我们可以把需要的css混合成一个文件，使用css每题查询的方法来带图link元素上使用media属性

转换成

@media only screen and (max-width:800px){}

不知道以上代码代表什么意思的同学可以先学习一下响应式布局

不幸的是，通过这样的改变我们并没有发现加载速度改变有多大

所以我们要继续查看究竟是什么使页面加载速度减慢

在查看瀑布图的时候我们发现在加载jQuery完成之前，图像几乎没有开始加载

解决这个的方法比较简单，就是把脚本标签置于页面底部。这样一来。当脚本还在加载时，用户不会看到一个空白页，而且其他的内联的任何资源会和脚本一起并行下载。

其次我们将会发现导致页面加载速度变慢的一大原因就是图片太大。

这里我概括了几种解决办法

1降低图片质量（显然我们不太愿意使用这种方法，这样势必会降低用户体验）

2启用cdn（这是我在阅读相关书籍之前使用的办法，现在网上有许多提供cdn服务的网站，但这也是一个治标不治本的方法）

3根据你所需要的大小加载不同大小的图片，避免浪费（当然通过这种方法在加上cdn的运用应该是不错的效果）

第三个就需要我们去了解用户的使用设备（比如视网膜屏幕和普通屏幕的区别，电脑设备和移动设备的区别）

以上我提到了如何加快第一次的访问速度，接下去我会讲如何加快下一次的访问速度

这里主要运用到了浏览器的缓存功能

主要有常规浏览器缓存，本地存储和应用缓存

接下来要说的就是触屏设备上的轻触和点击事件

我们应该都知道在触屏设备上我们可以使用click时间，但是其为了区分单击还是双击有300ms的延迟，就是这大约300ms的延迟让我们的用户体验降到谷底

为了解决这个移动浏览器有四种类型的触摸事件。

touchstart 触摸开始

touchmove 触摸点改变

touchend 触摸结束

touchcancel 触摸被取消

ie10上支持相同的事件但是有不同的语法

成为pointer 指针

MSPointerDown 触摸开始

MSPointerMove 触摸点移动

MSPointerUp 触摸结束

MSPointerOver 触摸点移动到接触点之上

MSPointerOut 触摸点离开元素

CSS过渡，动画和变换

性能优化

不要使用setTimeout来实现动画，一旦计时器里面的动画运行过慢会产生卡帧。

使用css变换来取代绝对定位（position）

可以采用css动画的形式

javascript的性能优化

1javascript操作dom的代价特别大，比较读取dom中的值和读取js对象中的值，前者所用的时间是后者的七倍之多

所以当获取到dom结构时我们将它储存在一个变量中，利用DOM的指针，避免二次获取相同的dom。

2给用户反馈的优先级是最高的

javascript是单线程的，所以在同一时间只能做一件事。这个线程与操作dom的线程是同一个线程，它被称为UI线程。就像把任务推到一个对列中，队列中的任务会在线程变得空闲时执行。

3延迟执行

当浏览器给用户做反馈时，如果我们需要执行一个类似AJAX这样消耗比较大的操作，我们可以延迟执行。

移动端的手势操作

滚动与滑动

做过移动端开发的人应该都碰到过一个问题

overflow:auto 在某些安卓设备上失效

当然我们也可以避免使用overflow：auto在移动设备上

但当我们必须使用时我们也有两个方法避免以上的问题

使用overthrow.js或者Iscoll来实现overflow.

方向改变

来解决移动设备上横屏与竖屏的布局问题

可以通过@media screen and (orientation:landscape){}

来设置横屏时相应的布局

移动设备的设备上的缩放问题

固定定位和缩放不能很好的在一起工作。在安卓设备中不能同时使用，在ios中会放大整个页面并且产生不可预知的结果。所以如果应用固定定位，你需要在viewport元素属性里添加user-scaleble=no.

1.viewport
这种方法，不是所有的浏览器都兼容
<meta name="viewport" content="width=640,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no, initial-scale=1.0" />
2.百分比
这种方法，可以兼容大部分浏览器，但是修改幅度比较大
.main .login .txt1{margin-top:8.59375%; position:relative;}
3.css transform
这种方法，可以兼容大部分浏览器，但是页面的位置是居中的
.w320
{
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */
}
4.使用响应式布局，但是这样的话得做两个两套界面
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>