手机端性能优化

  性能优化       2016-01-23

原生应用很“快”,原生应用的动画渲染的很平滑,按钮及时响应用户的点击,当App加载数据时也不会有什么问题。让你的网站像原生应用一样,意味着你需要尽可能的提高你网站响应及交互的速度。本文总结几种提高Web App性能的方法。

给按钮添加触摸状态

在提高网站的性能中最重要的是用户所感知的网站的速度,而最简单的提高站点感知性能的方法,是给网站增加”active”状态。

任何时候访问者点击网站上的一个按钮,必须等待300毫秒才知道到底发生了啥。浏览器设置了这个超时时间,之后可以确保用户不会进行一些其他操作,例如双击。因此等待1/3秒后,浏览器知晓了用户的动作,并执行最初的点击。当这个动作发生后,按钮被一个灰色的东东覆盖。

这是很糟糕的用户体验。Nielsen组织进行了一项研究,发现任何高于100ms的延迟都会让用户认为他们在等待,他们可能只想进行一次跳转。然而很多的移动网站,包括我做的那些,没有考虑这个感知问题。设计师通常的设计是触摸时按钮或者链接保持原样。

为了让你的网站感觉更快,你需要让你的按钮立即响应用户的触摸,给用户一个明显的视觉指示:有些事情正在发生。有一个很赞的属性用在网站上的按钮或链接,就是:active伪类。

不幸的是,无论是iOS还是android,当按钮或者链接被点击时都忽略了这个属性,为了激活这个状态,需要添加一个简单的事件绑定到页面的JavaScript中:

  1. document.addEventListener("touchstart", function(){}, true);

之后可以用css定义active状态的样式,去掉点击时的高亮:

  1. -webkit-tap-highlight-color: rgba(0,0,0,0);

对按钮设置这两个属性,用户会立即感觉到界面响应了用户的操作,即使最终的响应速度是一样的。你只是让你的界面即时反馈了用户的行动,而不会让用户傻等300 ms再看看到底干了啥。

需要注意的是:设置后在UC浏览器中依然无效

如果想去除300ms延迟,可以使用fasttap或fastclick,它的原理代码如下:

  1. // From: http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
  2. $.event.special.tap = {
  3. setup: function() {
  4. var self = this, $self = $(self);
  5. // Bind touch start
  6. $self.on('touchstart', function(startEvent) {
  7. // Save the target element of the start event
  8. var target = startEvent.target;
  9. // When a touch starts, bind a touch end handler exactly once,
  10. $self.one('touchend', function(endEvent) {
  11. // When the touch end event fires, check if the target of the
  12. // touch end is the same as the target of the start, and if
  13. // so, fire a click.
  14. if (target == endEvent.target) {
  15. $.event.simulate('tap', self, endEvent);
  16. }
  17. });
  18. });
  19. }
  20. };

本文最后更新于2016-01-23 08:46:30