关于 Web SQL Database 的失败尝试

2011-06-17 03:21:32
作者：郑凯

离线存储通常是存文本数据，最典型的例子当属 Gmail 的邮件，作为一个失败的尝试，这两天的成果就是一个结论：可以用离线存储存图片，但是性能太差，写完之后用 iPod Touch 3 一跑，感觉自己写的不是 demo，而是 benchmark。

演示页面在 [url]http://soulogic.com/lab/201106/websqlimage/[/url]

想法是这样：所有图片标签没有 src 属性，而有一个等值的 psrc 属性，用 JS 扫描所有的 img 标签，以 psrc 作为 key 来查询是否存有该图片（data:base64 格式的），有就直接赋值到 src，没有则 src = psrc，并且下个钩子，在图片读完后把图片内容的 base64 存到 web sql database 里。

这么傻的处理方式有两个原因：1.让现有的众多网页尽可能小的做改动，2.其实这事 expires max 就够了，但手持终端里浏览器到底能分配多少 cache 实在很难说，而很多高质量图片（例如游戏材质）实在经不起太多次加载，现阶段的国情是要考虑流量。

失败的原因是让 touch 3 里 Safari 再跑个 sqlite 来处理这事，非常卡，有一次由于图片太多太大，直接把 Safari 卡没了。尽管在 PC 上的 Chrome 跑起来还好，尽管如果能用 JS 控制图片缓存是个很美妙的事情，尽管用这种方法存图片连 Ctrl + F5 都不会重新加载图片

把图片转成 data:base64 格式要用到 canvas，但试了几下也没找到 [url=http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#dom-imagedata-height]interface ImageData 的宽高属性[/url]——我要用这个来找到图片的原始宽高（对应 iPhone 4 的视网膜屏，通常需要用 CSS 让图片缩小一半，这样才能让图片的像素跟硬件分辨率对应上），但不想花时间去研究是浏览器支持问题还是我的用法问题，直接用了一个 12 年前的古老技巧复制 src 来回避了

[img][file=130][/img]

但无论如何算是对[url=http://www.html5rocks.com/en/features/storage]离线存储[/url]有些概念了，恶补了现代 JS 满世界挂 callback 的使用方法，以及第一次了解 sqlite（以前真没碰过）

现在的浏览器已经有意思得多，而且跟以前不同的是，现在大部分功能已经不仅仅是概念演示了，而是[b]真的能用[/b]。据说 Firefox 小组自称他们最棒的作品是 IE 7（导致了它的出现），那可以说 Chrome 对这个世界最大的贡献不是 V8，而是 Chrome 这个版本升级癖让所有的浏览器都开始活跃起来、支持新功能