快好知 kuaihz

你的网站使用Flash了吗?

两年前,我们开发了一套基于Flash的文件(主要是图片上传RIA应用,提供给阿里巴巴的用户使用。如果你使用过Wordpress或flickr上传图片,你应该已经用过类似的产品。这个程序基于YUI Uploader开发,增加了一个实用的功能——在客户端先将图片缩小,再上传到服务器。用户用数码相机拍摄的照片往往有600万以上的像素,但产品图片放到阿里巴巴网站上显示,并不需要这么大的像素,通常等比例缩小到1024×1024之内就可以了。借助于Flash对图片先缩小再上传的技术,我们在没有增加服务器投入的情况下,将原先上传图片的尺寸限制由250KB/张提升到了5MB/张。同时,Flash上传还比传统HTML表单方式上传有更好的体验,例如可以多选一批文件同时上传、可以实时展示上传进度、选择文件时可以过滤非图片文件。

这个组件获得了很大的成功。上线后不久,阿里巴巴网站上用户的图片上传数量由日均1万张左右上升至日均15万张左右。但在这个上传应用投入应用的两年中,我们遇到了各种问题。

1. BUG

在基于IE多标签浏览器中的伪沙箱问题就不说了,最严重的是cookie的问题。使用FileReference.upload的方式上传文件,http请求中附带的cookie信息不一定是当前浏览器进程的cookie,在Firefox、chrome等非IE浏览器中非常严重,可能传输的是IE中的cookie。即便是IE,也可能传输的cookie内容和当前页面的cookie记录不符合。这直接导致服务器端在收到文件之后的安全验证中失败。而对于阿里巴巴这样的大型网站,有比较成熟的java web框架,要去掉对cookie的依赖非常麻烦。于是结果就是,首先我们只有在用户使用IE系浏览器的时候才使用Flash上传,其次我们隔三岔五的还会收到使用IE的某些客户的投诉,在花费了大量的时间排查之后,我发现是由于cookie的问题导致上传失败。这个bug已经存在很多年,但是随着Flash从9升级到10,许多版本过去了,问题依然没有被解决。对于闭源的Flash,我们也帮不上忙。

2.性能

相对于现今数码相机的像素量,5MB的大小限制非常保守。但大于5M的时候,在一些低配置的电脑上,读取文件内容的时候就会发生浏览器假死现象。假死很容易导致浏览器崩溃,所以我们采取了保守的限制——5MB。

另外一个性能消耗是将BitmapData编码成JPEG文件的时候。Adobe提供了JPEGEncoder,但由于是Array实现的,所以性能是个问题。编码一个2880×2880的图片在一台中等配置的电脑上大约需要15秒时间。

我用Vector改写了这个类,时间缩短为3.5秒左右。使用Alchemy,时间进一步缩短到1.5秒左右。但还是不够安全,所以最后采用了异步Vector的方式,延长编码的时间,以保证程序的稳定性。(评测在这里)

3.图片质量

Flash内置的最好的图片缩小算法(用BitmapData.draw,并将smoothing参数设为true),在缩小图片的时候容易产生锯齿。因此我改写了Jacwright提供的缩小算法,图片质量的问题解决,但代价是性能又降低了一些。

4.安全限制

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:你的网站使用Flash了吗?  使用  使用词条  Flash  Flash词条  网站  网站词条  
设计

 闲言碎语:设计沟通三级跳

第二部分如约而至,继上篇中提到的协同的问题,虽然构架稍微清晰,流程也有针对性的调整,但是在做事的过程中,人和人之间如何打交道还是成败的决定因素。好的事情由于坏的...(展开)

设计

 产品未来导向,你真的知道吗?

身为一个产品经理都要以数据作为核心,然后对上线产品数据都会有自己预估。可是估计前提是什么?首页,要对行业市场数据有着准确认知。其次就是要对未来趋势有着深入的解读...(展开)