Making Web Apps as Smooth as Native

恐怖谷理论

恐怖谷理论是一个关于人类对机器人和非人类物体的感觉的假设。它在1970年由日本机器人专家森政弘提出,森政弘的假设指出,由于机器人与人类在外表、动作上相似,所以人类亦会对机器人产生正面的情感;直至到了一个特定程度,他们的反应便会突然变得极之反感。哪怕机器人与人类有一点点的差别,都会显得非常显眼刺目,让整个机器人显得非常僵硬恐怖,让人有面对行尸走肉的感觉。可是,当机器人的和人类的相似度继续上升,相当于普通人之间的相似度的时候,人类对他们的情感反应亦会变回正面,产生人类与人类之间的移情作用。

Smooth transitions 16ms

适应人眼的刷新速度一般为60Hz即可形成连续的视觉效果,因此动画间隔在16ms以内才比较平滑。

1HZ=1000ms/周期 60HZ=1000ms/16.6666ms

No pauses

100ms是人对慢的感知阈限,在这时间段内所发生的事,用户都会觉得是即时的。

The basics

  • Async everything: defer and async on script tags
  • Even async scripts can block the load event: Start loading your script after onload
  • Reduce HTTP requests with spriting and script concatenation

http://programming.oreilly.com/2014/04/5-ways-to-improve-battery-life-in-your-app.html

Batching

  • Aggressive batching - collect requests asynchronously
  • Callbacks per action and per group
  • Process queues in the background

http://mechanics.flite.com/blog/2012/10/10/improving-performance-with-html5-dns-prefetch/

Rendering

Hardware accelerated transforms

  • Repositioning elements causes a relayout
  • Accelerated animation = paint only
  • First: move element to GPU layer
  • Then: apply a transition or animation

Application Cache

  • being replaced with ServiceWorker

Fastclick

  • github.com/ftlabs/fastclick
  • Removes 300ms delay on touch
  • Programmatic clicks aren’t quite the same - we handle it where we can

Perception

When you can’t make it any faster… make it seem faster.

构建高可用的WebApp

基于TCP的优化思路

  • 无法让延迟时间变小,但可以让延迟数量变少
  • 无法改变三次握手机制,但可以复用连接避免三次握手
  • 无法改变慢启动机制,但可以控制首屏资源包在14KB内来减弱慢启动的影响

初始拥塞窗口数 initcwnd = 10 最大传输单元 MTU = 1500Bytes 首次传输大小 10 * 1500 ~ 14.5Kb 返回头 Response Header ~ 0.5Kb 内容 Body ~ 14Kb

静态资源优化法则

  • C压缩 (Compress) 图片优化、HTML优化、JS压缩、CSS优化
  • A异步 (Async) 非首屏即时资源延迟
  • P并行 (Parallel) 资源非阻塞式加载,合理分资源包最大化并行加载
  • A预先 (Advance) 预连接、预加载、预渲染、内嵌资源、本地存储

HTML5应用缓存

  • 每次缓存更新过程都是一个完备的过程,任意一个缓存列表中的资源请求失败则整体失败。
  • 没有提供对网络场景的判断,如2/3G网络下不更新,WiFi下才更新的机制。
  • 一旦页面跳转或关闭,即使是正在进行的离线资源的请求也将被重置,导致数据流量的浪费。

WebView离线缓存

  • 基于本地缓存命中,而不是基于列表
  • 支持预先打包在客户端,第一次访问即从离线缓存加载
  • 支持增量更新,服务器端计算前后版本间差异,节省带宽
  • 独立进程更新,页面即使跳转或关闭也可在后台保持更新
  • 可主动失效,当缓存的版本存在安全问题时,服务器端可推送失效当前缓存版本,强制访问线上最新版本

触发分层常用技巧(时间换空间)

  • CSS 3D变形 transform: translate3d(0, 0, 0);
  • CSS perspective变形 transform: perspecive
  • CSS动画中含有透明或变形属性
@-webkit-keyframes move {
    from {
        -webkit-transform: translateX(100px);
    }
    to {
        -webkit-transform: translateX(200px);
    }
}