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远程调试移动端页面
http://www.zuixiami.com/?p=34794
通过Mac远程调试iPhone/iPad上的网页
http://www.chinaz.com/mobile/2012/0927/276750.shtml
用weinre远程调试移动网页
http://www.imququ.com/post/remote-debugging-with-weinre.html
6.2 抓包
使用Fiddler抓包
http://ming.sinaapp.com/?p=218
posted on 2013-04-27 11:21 cccccccccccc 阅读(864) 评论(0) 编辑 收藏 举报