【转载】当前 WEB APP 开发的最佳实践

当前 WEB APP 开发的最佳实践

by LYRIC WAI on APR 27 2013 with COMMENTS

前段时间 forecast.io 家的 App 挺火挺热（请用 iPhone Safari 打开链接http://forecast.io，然后添加到桌面看看效果 ）。接着官方博客释出了一篇文章，可以认为是当前 Mobile Web App 开发的最佳实践，我先总结一下：

1. 不要刻意模仿 iOS 的默认样式和交互。毕竟是 Web App，肯定会有模仿不到位的地方，这样会很快露出马脚；用自己的风格和交互则不会有这样的问题，没有参照物也就不容易察觉错误，容易糊弄过去。
2. 不要做得像个网站。
3. 只用硬件加速的 CSS 3 属性做动画效果。说白了，只使用 translate3d 系属性，而且使用 transition 时也不可以应用到没有硬件加速的属性上。
4. 不要自己实现滚动条。使用 -webkit-overflow-scrolling: touch 而不是采用类似iScroll 这样的东西。
5. Web 技术上还做不好的事情就别JB做。
6. 用 FastClick 和 AppCache 提升用户体验。
7. 吃自己狗粮。

看到第 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 的优化实践，不过我想某些点对别的框架也适用。

1. 不要写…大型… Web App …（有气无力）
2. Model 的观察者要小要短.
3. 高频事件（例如 WebSocket ）的回调函数中需要对 View 进行修改的，用 throttle 控制事件频度。
4. 一个页面中不要超过 2000 条 Angular 表达式。
5. Angular.js 使用 dirty check 实现数据绑定，因此在 digest cycle 中尽量减少深度比较，仅仅包含会导致 View 变化的操作。
6. 除非万不得已，不要操作 DOM。
7. 局部性原理：操作 DOM 的语句尽可能连续地放在一起。
8. 多条语句连续地操作 DOM 时，用 setTimeout 分割它们可以得到明显效果。
9. 不要滥用 setTimeout。
10. 程序很慢，但是人类更慢。除非有明显的性能问题，否则不要过度优化（例如使用以上优化方式），只会搞得更糟。

不过话说回来，总算看到了 Web App 的一线曙光，其诸多优势让人没法忽视。所以先从 Hybird App 开始吧。别说你讨厌 Hybird App，其实它早就潜入我们身旁你都不一定感觉得到。例如 Tweetbot（最初的 OS X 版），SpeedTao 还有 …… 微信。其实吧，说不喜欢的，只不过是技术性偏执罢了。