移动端微博读书浅尝,迟斌 时间：2013-9-12,项目背景,微博读书无阅读页,尝试基于HTML5做移动端web,项目产品方案,项目技术方案,Mysql,weibo OpenAPI,sae storage,PHP,Websql,localstorage,Sencha touch 2.2,javascript,CSS3,HTML5 manifest,Memcache,遇到,4个苦逼。,3个周。,n个功能。,不会PHP，学！,干不完，加班！,太复杂，砍！,一期总结,base64图片读取问题。,CSS3造成页面崩溃。,CPU占用高造成假死甚至崩溃,内存回收,websql限制问题,移动端手势支持不够NB,Sencha Touch框架。,响应式布局,Manifest缓存。,webSql,2B,NB,核心问题,OLD,全书加载，按P划段,CSS3自动分栏全书内容,密集for循环计算 算当前页 算总页数 跳转到某页 转屏resize,NEW,页面只渲染当前页前一页后一页,按P划段，固定字高、行宽高得到行数,PHP分章分页、全书分页,分页算法,新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博,新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪。,“overflow:hidden“,新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博,新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博,“overflow:hidden“,新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博,2S!,效果对比,PHP计算超大9MB书籍分页,473KB哈利波特与魔法石,结论：PHP负责全书分页加速打开速度、JS负责当前章分页,离线,静态资源,Manifest,数据库,WebSql,手势,touchStart,touchMove,touchEnd,性能提升,减少HTTP请求,GZIP压缩,用transition代替scroll,用requestAnimationFrame代替传统的move事件实现,回收Event、Component等对象,js动态加载,移动浏览器是？,警惕所有产生页面渲染的操作,浅尝但不辄止,图文混排,功能完善 批注系统 分章目录 图书分组 图书管理后台,丰富手势交互,感谢,chibin58,李习君BigHead,超高校級的_蓝调君,轻松加简单,Q&A,