初遇鼓浪屿 2014-06-03 # Life/Photo # No Comments »

五月十六日,第一日,鼓浪屿初遇

从来没有想过,来鼓浪屿竟是因为要拍婚纱照的缘故。我跟老婆为了省钱,选择了首都航空,飞机略显旧,途中竟然还有奇葩的商品推广,顿时成功的将航空旅行高大上的感觉拉回到了绿皮火车的级别。

临近落地就已然感受到了这座城的阴郁,阴天,没有看到太阳,而且楼房看起来都有点年头了,跟想象中的厦门有很大不同。飞机降落在高崎机场,机场很小,只看到坐的密密麻麻人在等待登机,甚显紧凑。走出机场,立即感受到了这座城的湿度和”体温”,跟北京同样的温度,但却感到闷热许多。

出租车司机有点不太实诚,绕了点路。很快我们到了我们联系好的婚纱摄影,付了钱我们便赶往鼓浪屿上指定的入住酒店。

于是我们来到轮渡口,市区和鼓浪屿其实只有一海的距离,很近。码头和周遭的人文都感受到一种80年代的气息,这似乎是一座旧城的感觉。

到了鼓浪屿之后,愈发印证了我的这种感觉,很容易看到人力拉的物料车(四轮车)经过,有些村落的感觉。但这里的旅馆和小店都很别致,起名也都很文艺,像张三疯的奶茶店,联邦调茶局。饭馆多数都是海鲜,我跟我老婆很不习惯这里的食物,最终我们选择康师傅私房牛肉面填饱了肚子。

我们住的是一个小别墅,有个小阳台,一眼就能望到海,是个海景房,不过晚上退潮后,眼前就只是一个泥滩了。

晚上我们又去买了一杯草莓桑葚的马拉桑,途中看到慵懒趴在小路中央的小狗,觉得这里人的生活很是舒适,惬意的感觉,不过后来想想,别人的生活状态谁又能说的准呢,不是么。

明天开拍,有点紧张,要早睡了。希望这几天在这里不仅能完成唯美的婚纱照,也能遇见未知的自己,遇见梦想。总之希望能在这里跳出来想明白一些平日忙忙碌碌的工作里没时间想的事情。

晚安。

2014 Qcon 移动端专场分享的琐碎记录 2014-05-05 # Hodgepodge # No Comments »

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