跨越不可能-让WebApp如Native般顺滑

Transcript

1. Qcon 北京 timezhong 跨越不可能! ! Timezhong 让WebApp如Native般顺滑
2. ` TimeZhong ! ! ! ! ! ! ! 仲⾦金⻰龙 社交平台设计中⼼心 QQ空间 ! Id: ⻨麦时 Wehat: timezhong
3. Andrew Betts 英国⾦金融时报实验室负责⼈人 ! ! Twitter: @triblondon PHP和JavaScript程序员
5. 恐怖⾕谷
6. `
8. The basics • Async everything: defer and async on script tags ! • Even async scripts can block the load event:Start loading your scripts after onload ! • Reduce HTTP requests with spriting and script concatenation
9. Prefetch and friends
10. Prefetch and friends 1. Pre-resolve DNS hostnames for assets later in the page: <link rel='dns-prefetch' href=‘hostname-to-resolve.com'> ! 2. Fetch subresources early so they're already there when needed: <link rel='subresource' href=‘/path/to/some/script.js'> ! 3.Pre-fetch resources for likely future navgiations: <link rel='prefetch' href=‘/most/likely/next/page.html'> ! 4.Pre-render an entire page in the background (Chrome only) <link rel='prerender' href='/overwhelmingly/likely/next/page.html'>
11. Hardware acceleration • -webkit-transform: translateZ(0); • -webkit-transform: translate3d(0, 0, 0);
12. translate not absolue
13. Fast Click ! • github.com/ftlabs/fastclick • Removes 300ms delay on touch
14. <meta name="viewport" content="width=device-width"> (or any equivalent that makes the viewport <= device-width) Chrome android 32+
15. <meta name="viewport" content=“minimal-ui"> iOS 7.1+
16. J04
    4BGBSJ "OESPJE
    $ISPNF
    .
    CFUB
    
17. 带来的问题 带来的问题 • 标准对话框⽆无效 (iOS 7.0.3 solved) • ⽆无法打开外部链接 (iOS 7.0.3 solved) • 安装超过4个后出现奇怪问题 • Application Cache异常 • Cookie ⽆无效
18. 还有... • 每次进⼊入重新刷新⻚页⾯面 • 多任务界⾯面，预览图⽚片空⽩白 • ⻚页内跳转
19. A happy family of technologies
20. When you can't make it any faster， make it seem faster.
22. • Providing feedback makes it seem faster. Think about psycology • Overestimating the time remaining makes it seem to finish quicker • Progress feedback that starts sooner finishes sooner • Good analogy with the 'close evelator doors' button, it likely doesn't do anything, but people like it because it makes them feel part of the process, partial control
23. 美好來⾃自知新如故 ! 我們因缺乏好奇⽽而毀滅，⽽而⾮非因缺乏奇蹟⽽而毀滅 ⼀一個廣告⼈人的領悟Rory Sutherland
24. ` Qcon 北京 timezhong 谢谢 ! TIMEZHONG