当前 WEB APP 开发的最佳实践
by LYRIC WAI on APR 27 2013 with COMMENTS
前段时间 forecast.io 家的 App 挺火挺热（请用 iPhone Safari 打开链接http://forecast.io，然后添加到桌面看看效果 ）。接着官方博客释出了一篇文章，可以认为是当前 Mobile Web App 开发的最佳实践，我先总结一下：
- 不要刻意模仿 iOS 的默认样式和交互。毕竟是 Web App，肯定会有模仿不到位的地方，这样会很快露出马脚；用自己的风格和交互则不会有这样的问题，没有参照物也就不容易察觉错误，容易糊弄过去。
- 不要做得像个网站。
- 只用硬件加速的 CSS 3 属性做动画效果。说白了，只使用 translate3d 系属性，而且使用 transition 时也不可以应用到没有硬件加速的属性上。
- 不要自己实现滚动条。使用
-webkit-overflow-scrolling: touch而不是采用类似iScroll 这样的东西。 - Web 技术上还做不好的事情就别JB做。
- 用 FastClick 和 AppCache 提升用户体验。
- 吃自己狗粮。
看到第 3 点没？其实现在做 Web App 门槛挺高，应付奇葩的 Javascript 实现所导致奇葩范式还算好，关键在于面对这么一坨从 Web 诞生至今延续下来的开发环境。换言之，假如现在微软释出一套大一统 SDK，包含从 MS DOS 到 .Net 4 的所有 API，会好学到哭么。奇迹，但是 W3C 做到了。
另外在 Chrome Dev Tools 里打开 Show paint rectangles 和 Show composited layer borders 选项就能直观地看到浏览器是怎么渲染你的 Web App 的。对于观察硬件加速的优化效果来说很有帮助。
言归正传，对于第 4 点，可能对 Mobile Web App 更适用。桌面 Web App 使用大数据的动态列表还是用 iScroll 这样的实现吧，效果比原生滚动强不是一点半点。
接下来几点是我总结的，面向基于 Angular.js 框架的大型 Web App 的优化实践，不过我想某些点对别的框架也适用。
- 不要写…大型… Web App …（有气无力）
- Model 的观察者要小要短.
- 高频事件（例如 WebSocket ）的回调函数中需要对 View 进行修改的，用 throttle 控制事件频度。
- 一个页面中不要超过 2000 条 Angular 表达式。
- Angular.js 使用 dirty check 实现数据绑定，因此在 digest cycle 中尽量减少深度比较，仅仅包含会导致 View 变化的操作。
- 除非万不得已，不要操作 DOM。
- 局部性原理：操作 DOM 的语句尽可能连续地放在一起。
- 多条语句连续地操作 DOM 时，用 setTimeout 分割它们可以得到明显效果。
- 不要滥用 setTimeout。
- 程序很慢，但是人类更慢。除非有明显的性能问题，否则不要过度优化（例如使用以上优化方式），只会搞得更糟。
不过话说回来，总算看到了 Web App 的一线曙光，其诸多优势让人没法忽视。所以先从 Hybird App 开始吧。别说你讨厌 Hybird App，其实它早就潜入我们身旁你都不一定感觉得到。例如 Tweetbot（最初的 OS X 版），SpeedTao 还有 …… 微信。其实吧，说不喜欢的，只不过是技术性偏执罢了。