你的网站使用Flash了吗?

标签: 产品设计 flash 设计思想 | 发表时间:2011-07-27 20:27 | 作者:P迪 黑熊
出处:http://www.alibuybuy.com

两年前,我们开发了一套基于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.安全限制

Flash10.0之后,增加了一个安全限制——当URLLoader以标准文件上传的方式发送POST请求的时候,需要由用户的UI操作(鼠标点击或按键事件)触发。因为我们对用户的图片做了处理,已经无法再通过FileReference上传,只能通过URLLoader。这个安全性限制规定每次发起一个上传文件的URLLoader请求,都必须让用户点击一下鼠标才可以。如果用户选择了20张图片,就要点击20次鼠标。这显然是无法接受的。因此我们放弃了用标准文件上传,采用普通post形式。代价是失去了对上传进度的跟踪,不知道文件上传的百分比;同时服务器端也需要改造。

改变

最近,我们做了一个决定:开发一个类似功能的ActiveX控件,替代Flash作为图片上传的主要解决方案。ActiveX的优势是性能,不足之处在于只能在Windows+IE浏览器中使用,但实际上我们的Flash上传目前也只能在IE中使用。Flash真的适合像阿里巴巴这样的网站使用吗?闭源和性能是Flash最大的问题。但在HTML5被广泛支持前,Flash和传统Ajax还是我们最主要的富客户端应用开发技术,相对于ActiveX、Silverlight、JavaFX、Gear等技术来说,Flash还是有安装率优势的。我们看到Adobe最近在新功能开发方面非常给力,值得称赞,但基础的功能的持续完善对开发者也同样重要。目前Flash依然是我们很重要的RIA技术,但是HTML5完全到来的那一天,现在很难说。

来源:http://www.ued163.com/?p=1813


© 推荐 for 互联网的那点事, 2011. | Permalink | No comment | Add to del.icio.us
Post tags: ,

你可能也喜欢:

能带上飞机的瑞士军刀:Victorinox超薄闪存 (@toodaylab)

俄罗斯支持研发MARM“万能”存储器,取代DRAM和Flash (@tech2ipo)

Nielsen:如何设计出更好的网站

东西方文化对网站设计的影响 有些相似,但也有不同

2010年最佳Flash网站
无觅

Feed enhanced by Better Feed from Ozh

相关 [网站 flash] 推荐:

你的网站使用Flash了吗?

- 黑熊 - 互联网的那点事
两年前,我们开发了一套基于Flash的文件(主要是图片)上传RIA应用,提供给阿里巴巴的用户使用. 如果你使用过Wordpress或flickr上传图片,你应该已经用过类似的产品. 这个程序基于YUI Uploader开发,增加了一个实用的功能——在客户端先将图片缩小,再上传到服务器. 用户用数码相机拍摄的照片往往有600万以上的像素,但产品图片放到阿里巴巴网站上显示,并不需要这么大的像素,通常等比例缩小到1024×1024之内就可以了.

Flash真的适合做网站应用吗?

- 競 - Flashlight
两年前,我们开发了一套基于Flash的文件(主要是图片)上传RIA应用,提供给阿里巴巴的用户使用. 如果你使用过Wordpress或flickr上传图片,你应该已经用过类似的产品. 这个程序基于YUI Uploader开发,增加了一个实用的功能——在客户端先将图片缩小,再上传到服务器. 用户用数码相机拍摄的照片往往有600万以上的像素,但产品图片放到阿里巴巴网站上显示,并不需要这么大的像素,通常等比例缩小到1024×1024之内就可以了.

Flash or HTML5,网站开发人员该如何选择?

- - mo-Android
Flash还是HTML5,对我们网页制作人员来说是个很艰难的选择,Apple iPhone/iPad不支持Flash,Adobe也宣布放弃Flash在移动平台,转而开始全面支持HTML5,但是HTML5真的就那么理想吗. HTML5也还是存在很多问题的:. 1、HTML5标准目前还是起草阶段,各大浏览器厂商支持的视频格式也不统一:IE(MP4),Firefox(WebM/Ogg),Chrome(MP4/WebM/Ogg).

12佳精美的国外 Flash 网站模板下载(附源文件)

- - 博客园-梦想天空
  本文收集了12佳精美的国外Flash网站模板,附带源文件下载. Flash网站页面美观,互动性强,可以声形并茂,实现普通的HTML网站不能制造出的质感和动作,特别是动态的视觉特果,能给人以震撼视听的效应. 下面这些免费得Flash模板有企业模板,摄影模板,个人模板等等,赶紧挑喜欢的下载吧. 30佳精美的免费Flash网站模板下载.

flash存储器(NOR Flash和NAND Flash)

- - CSDN博客推荐文章
Flash存储器经历了最初应用于个人计算机BIOS( basic input output system)存储、嵌入式系统的标准存储器,到目前在某些笔记本电脑中代替磁盘作为外存储器,并被引入到企业级存储的高端存储阵列中,Flash存储技术已经得到很大的发展. 作为一种电可擦除可编程只读存储器,Flash存储器不但能在不移除存储芯片的情况下进行擦除和编程操作,还具有非易失性、固态性、体积小、重量轻、抗震动、高性能、低能耗等优点.

Flash之死

- - 技术改变世界 创新驱动中国 - 《程序员》官网
文 / Francisco Kattan. Adobe公司决定停止面向移动浏览器的Flash开发工作,但导致Flash最终失败的原因却不甚明朗. VisionMobile特邀作者Francisco Kattan撰文就导致Flash消亡的一连串事件进行了分析. 自Adobe宣布将停止开发面向移动浏览器的Flash以来,人们就展开了激烈讨论,很多Flash开发人员表示惊诧和怀疑,分析师们不停地放马后炮,甚至有人恳请Adobe辞退首席执行官.

如何禁用flash

- - 膘叔
本来是不想禁用的,但发现机器的风扇就一直没停过,CPU消耗的最大的就是firefox下的flash插件 .没辙了.我还是禁用它吧. 嗯flashblock即可,但其实我是想从软件的底层就直接禁用它.可惜没有好的办法....只能用插件了.网上类似的教程还有很多,比如这个:. 内容来源:http://orzl.com/weblog/disable-the-flash-on-mac.

Google Swiffy把Flash变成HTML5

- Caiwangqin - 36氪
由于Flash被苹果拒之门外,很多开发者在开发产品时都不得不在Flash和HTML5之间做出选择. 今天Google发布的一个新工具让天平再次偏向HTML5这边,它就是Swiffy. Swiffy可以把Flash文件转换成HTML5标准. 该项目源于Google移动广告团队,开发动机就是有些设备不支持Adobe的格式,因此无法显示Flash动画.