webapp开发小结

近一个月参与了项目组的一个webapp的开发，期间遇到了一些问题，也学到了许多，现总结如下：

1 webapp一般架构和js框架

相对其它的网页，webapp的页面不重载（或极少重载）（SPA）。SPA表现在hash驱动。所有的看似切换页面的效果实际上是通过javascript模拟的，用户通过ajax或jsonp的形式与服务器交互，由前端渲染页面和展示结果，故而需要前端完成更多更复杂的逻辑和计算。通常，构建一个webapp，javascript需要提供和完成以下功能：

（1）对模型，控制器，视图的分离，按照设计app的设计思路来完成一个在浏览器中运行的app（如果采用MVC的话，并不是所有情况下MVC都最好。）

（2）方法、模型和其它数据的按需加载和依赖管理

（3）常用的工具函数，常用的对dom的选择器，包装和常用方法

对于上面的123，我们选择的最终方案是：

（1）MVC框架，运用广泛的backbone + underscore

（2）模型依赖管理框架，项目组自行开发的FileLoader组件，实现了对静态文件的异步加载和缓存

（3）专门针对移动设备的底层通用框架zepto在不用兼容老版本PC浏览器的情况下(比如不用兼容IE6)，更小，更高效

2 页面重构与布局
项目使用的是css3的弹性盒模型 Flexbox。webapp要适配各种分配率，也要支持横竖屏切换时的适配，用flexbox布局特别合适。例如，要布局如图所示的搜索区域：

期望的表现是，不管在何种分辨率下，也不管屏幕是横屏还是竖屏，取消按钮宽度固定，搜索文本框宽度自适应。

重构的dom节点如下：

写css时，为搜索框和取消按钮的父节点$('.search_box')指定两个属性值：display: -webkit-box; -webkit-box-orient: horizontal，接着为$('.search_form')指定属性值：-webkit-box-flex:1，使其占满除取消按钮宽度外的其他宽度。

$('.cancel_btn')只需设置ui指定的width和margin或padding属性。

3 图片压缩缓存方案与清理方案设计

3.1 图片压缩与缓存方案

图片压缩方案：
（1）将本地大尺寸图片渲染到尺寸更小的canvas
（2）通过canvas生成被缩放后的小图的base64字符串

注意：
Android平台canvas.toDataURL()输出图片格式限制w3c标准：image/png；

浏览器可选择实现其他格式android只支持默认格式；Ios支持image/jpg格式输出，可调整压缩质量，用法：canvas.toDataURL(‘image/jpeg’, 0.8)

Android平台借助第三方工具库jpegEncoder：将canvas的argb颜色数组转化为压缩比更高的jpg格式，同时支持设置压缩质量

图片缓存方案：

为了提高移动端的性能，减少对静态资源的请求数，需要对页面中的图片和图标缓存。存储的介质是html5支持的localstorage。

3.2 图片清理方案：

localstorage的存储空间有限，随着页面图片的更新，localstorage中存储的图片越来越多，最终会占满存储空间，因此，需要及时的清理不用的图片。如何判断图片已经没必要存储了呢？最佳策略当然是最近最少使用算法（LRU）。但考虑到这种方式实现起来较麻烦，最后采用了FIFO，即当localstorage存储空间满了的时候，依次计算localstorage中存储的图片占有的空间imgSize和其他资源占有的空间otherSize后，得出需要清理的空间cutSize。然后将图片按存储时间排序并push到imgArr中。轮询imgArr的时候，累加图片的大小。当累加的大小大于cutSize时，停止轮询。

4 多终端适配
设计师提供的ui稿是640*960。最初的适配方案是：
按照ui稿写了一套适配屏幕宽度大于640的css，在此基础上，通过媒体查询，为设备宽度介于480和640的设备写一套css，为设备宽度介于320到480的设备再写一套。
此方案的缺点：媒体查询，几乎需要将涉及到width、height、margin、padding等有值的属性全部重写一把，带来了代码量大、同时需要维护3套css的问题。
例如设备宽度为640时header i的css定义如下：

适配480以上的设备宽度时，我们将width、height、margin缩放了0.75，相应的，背景图也缩放了0.75。

@media only screen and (min-width: 480px) and (max-width:639px){

此外，在Android平台三星N7100上，最新版的Chrome的设备宽度为360，设备高度为640，竖屏时，应用了@media only screen and (min-width:320px) and (max-width: 479px)，但横屏时应用了640的样式，导致横屏时页面文字和图片都放大了。QQ浏览器也如此（360*571）。
最终方案：
不区分分辨率，按照320的UI稿提供一套css，图片使用640的（200*522），使用background-size：100px auto来保证图片清晰度和用户体验。

5 移动端性能优化

移动终端面临的主要问题：
（1）网络数据传输延迟（即便是3G网络）
（2）CPU运算能力（即便是配有1GHz+的设备）

移动终端可以做的优化：
（1）根据设备屏幕来选择加载资源
（2）降低延迟，加快连接速度
（3）提高处理性能

具体手段主要表现在减少 HTTP请求：

（1）使用CSS3来替代一些图片效果(border-radius,text-shadow,background linear、radia gradients,box-reflect)

（2）在CSS和HTML里使用base64编码图像，使用Data URL来渲染图片

（3）避免重定向(很不幸这个在移动设备很常见，比如用iPhone访问yahoo.com会重定向到 m.yahoo.com)

（4）缓存ajax数据

（5）用localStorage/sessionstorage替代cookie（每次HTTP请求cookie都会变成而外加载的数据）

6. 调试与抓包

6.1 调试

用Chrome和android SDK远程调试移动端页面