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);
    }
}