Web App Checklist

Mobile Web App checklist

目标：高性能Mobile Web App

一、UX和UI

操作节目与边框之间留空隙：

防止操作过程中，触发系统缺省行为，有些是无法disable的。如：向下划过上边框会触发系统状态信息，

清除 300ms的click延时(从用户click到发出event之间有300ms延时)

Android4.4+已经清除了，但是IOS还没有（可以用fastClick）。

FastClick检测到touchend之后，马上发出event

让top bar真正固定，不要被弹出的软键盘顶出去（IOS 8已经解决了问题）

** 用absolute容器分别裹住内容和top bar，作为sibling，并且令内容overflow scroll.

这样， scroll的不是body，而是内容的div。

副作用：

** 双击页面，不在scroll到页面顶部

** back回来的时候，页面scroll的位置丢失了，补救措施，给内容div添加下面样式：

-webkit-overflow-scrolling: touch;

overflow: scroll

禁止overscroll （i.e. 划过底线和顶边）

在cordova/phonegap的 xml config中添加：

或者参考下面的JS

https://github.com/luster-io/prevent-overscroll/blob/master/index.html

阻止copy，paste菜单出现，

在IOS上，给不应该被选中的元素添加样式：

user-select: none;

-{prefix}-user-select: none;

-webkit-touch-callout: none;

在android上

if(navigator.userAgent.match(/Android/i))

noContextMenu.addEventListener('contextmenu', function (e) { e.preventDefault() })

亮显的元素颜色美化，

例如：替换系统缺省的灰色为green

* {

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

}

button:active {

color: green;

}

如果此web App已经被添加到homepage，就可以消除浏览器的底部和底部菜单

并禁止顶部菜单再被触发：

document.addEventListener('touchmove', function(e){

e.preventDefault();

}

document.addEventListener('gesturestart', function (e) {

e.preventDefault();

});

少用display: none，以避免重绘带来的闪烁;

用opacity：0，或者，用translate3d(-9999px, 0, 0)移出屏幕.

不要自己写scroll，不会比浏览器的scroll更smooth，它有native的支持

禁止用户缩放

测试back， forward按钮，不要简单地禁止它

打开IE的 CleratType，让字体更好看一点

二、Performance优化

从Day 1就重视，避免太慢无法优化

提高速度的核心是避免重绘和重排版，常见的措施如下：
- Opacity和transform之外的参数动画慎用，它导致重绘和重排版
- 用GPU加快绘制速度：通过添加下面的属性
  - transform: translateZ ，或者
  - will-change: transform
  - will-change: opacity.
  - 禁止用jQuery的animate 或fade，而用纯CSS动画，Velocityjs或 Impulse，因为：
    - JQuery使用setInterval而不是 requestAnimationFrame驱动动画,
    - JQuery的 css动画功能差.
  - 在Client端，不要resize图像，尽可能下载1：1的图像。因为：
    - 浏览器中存储resize的image的空间非常小，一旦满了，就会溢出旧的，从而导致反复地计算，页面上出现空白区域，或者scroll变得不流畅。
  - 先完成绘制，再动画
    - 将动画完全包裹在requestAnimationFrame里面，因为它是在paint完成之后，才调用的。
不要在scroll和touch中迫使浏览器重新计算Style，改到requestAnimationFrame中。
- 如果修改style，则浏览器马上重新计算Style，虽然不立即绘制
- 在mobile上的scroll是用scroll thread处理的，一个完全独立于JS的thread。而这个scroll thread只有等待scroll event处理完成之后才执行（以便于处理 scrollTop， preventDefault()等要求），所有，长时间的event处理，将会迟滞scroll。

三、Homescreen

像Native App一样，在用户的屏幕有个图标？可以直接点开？

修改homescreen上图标的标题？（IOS）

有1个splash screen？（IOS）

四、离线可用

ServiceWorker
LocalStorage， indexDB

from： https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

posted on 2017-03-17 07:50 动漫引擎阅读(219) 评论(0) 编辑收藏举报

刷新页面返回顶部

动漫引擎

导航

公告

Web App Checklist