移动端微博读书浅尝.ppt

移动端微博读书浅尝
迟斌时间:2013-9-12
项目背景
微博读书无阅读页
尝试基于HTML5做移动端web
项目产品方案
项目技术方案
Mysql
weibo OpenAPI
sae storage
PHP
Websql
localstorage
Sencha touch
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分章分页、全书分页
分页算法
新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博
新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪。
style="overflow:hidden"
新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博
新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博
style="overflow:hidden"
新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博新浪微博
2S!!!
效果对比
版本
设备
数据未渲染到页面计算分页
数据放到页面div里计算分页

iPhonoe4


iOS7
iPhone5



iPad mini


flyme
魅族MX


MIUIV5
小米2


PHP计算超大9MB书籍分页
473KB《哈利波特与魔法石》
结论:PHP负责全书分页加速打开速度、JS负责当前章分页
离线
静态资源
Manifest
数据库
WebSql