你的网站使用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.安全限制

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

时间: 2024-07-29 20:08:20

你的网站使用Flash了吗?的相关文章

让Win8中的IE10可以打开所有网站的Flash

  为了让Windows8与Windows RT用户获得更安全的浏览保护,微软对IE浏览器中对Flash内容的访问做了相应的限制,只有在微软白名单上的可信网站才能在IE浏览器中正常运行 Flash内容.这样虽然可以更好的保护了我们的安全,但也给我们浏览网站带来一定不便.例如浏览一些不知名的网站时,若该网站使用Flash开发的则直接无法打开. 好在微软的这个白名单文件是保存在本地的,我们可以通过修改本地白名单文件的方法来实现让任意网站都可以打开Flash内容. 首先为了保证我们修改过的本地白名单文

网站基于flash实现的Banner图切换效果代码_javascript技巧

本文实例讲述了网站基于flash实现的Banner图切换效果代码,该实例的主要切换功能是由flash完成的.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

小议制作Flash网站及flash应用的技巧

技巧 flash网站技巧拾零 1. 快速更新网站文字 在Flash网站各子界面制作过程中,网站文字可以通过复制.粘贴.甚至直接导入文本的方式进行.这里介绍的方法是连A4Desk都不用打开,直接修改文本文件即可更新网站文字了.因为在制作Flash网站时,在软件安装目录下会自动生成一个import文件夹,该文件夹里的每一个文本文件的内容都和网站页面的内容相对应的,找到相应的文本文件即可进行修改了. 2. 快速修改菜单标签 在制作在Flash网站时,修改菜单标签是通过执行"Edit→Section N

通过网站首页FLASH浅谈用户体验度

最近,正在接手一个网站主推关键词是深圳婚礼策划,深圳婚庆公司,深圳婚庆,目前网站的排名是:深圳婚礼策划49,深圳婚庆公司55,深圳婚庆 84,这个网站比较特别,首页Flash结构,虽然以前也有接触,但是,对于这种首页全Flash结构的网站还是得好好谈谈它的用户体验度与SEO的那点儿关系.我通过Site命令可以看到快照是3月4日,谷歌PR值是3.很明显,首页Flash网站结构对于百度快照还是有一定影响的.因为搜索引擎对于识别Flash还是有一定的难度,所以,造成了一定的抓取困难,一定程度上影响了网

HTML网站标准Flash页面通过校验

1.embed是非法的 <embed>标签是Netscape的私有标签,虽然<embed>标签应用广泛存在,但是从HTML3.2,HTML4.0到XHTML1.0,W3C都没有收录这个标签.使用<embed>标签的页面将不能通过W3C校验. 2.应该用object W3C推荐的是<object>标签.甚至在XHTML2中,<img>都要被<object>所取代.用<object>方法插入flash的代码是: <obj

网站基于flash实现的Banner图切换效果代码

 具体实现代码如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

IE10为网站添加Flash支持

从现在开始,Windows 8和Windows RT中的Metro版IE10默认支持Flash了.当前,桌面版IE10兼容所有Flash网站,Metro版IE10支持兼容性视图(CV)列表中的所有网站.     这个兼容性视图列表其实就是白名单,虽然绝大部分含有Flash内容的网站都已经在白名单中,微软也会对这份名单进行不断更新,不过还是有一些网站不在其中,当使用Metro版IE10打开这些网站时,它们的Flash内容会被屏蔽.     如果解决这个问题呢?很简单,将你需要的网站加入IE10兼容

禁止视频网站使用Flash P2P上传

众所周知中国的网络国情,还有一大部分人活在电信/网通这两个老流氓的adsl线路上.目前中国电信4m的ADSL基本在400k/s的下载速度和50k/s的上传速度(这里我就不说bps了,就说大家能看到的下载速度),又由于ADSL的不对称速度技术,如果你上传的时候占满了这50k,那么基本你的下载带宽是无法使用的,把ADSL想象成一根水管,水流是可以随意控制的,这根水管同时要担负上水和下水的作用,如果直径的90%用来上水了,那么就只有10%可以下水了. 应用的例子就是你在用QQ传一个比较大的文件给朋友,

中国地产互动网站全FLASH 设计策划案例

设计 创意初始:力求 讲山清水润讲江南温婉讲气质讲在北方讲独特人文园林讲互动在中国元素衍生讲时光流转,四季切换,用网络平台展现平日无法企及的视觉效果.在VNOISE团队一致努力下网站如期进行项目地址http://www.bjtlsy.com显示格式选取 1024*768 (占81%)的浏览用户按惯例 我们开始进行设计大纲:经过创意部门的开会,起草了一个方向性的大纲.大体从导向入手,考虑一个初次访问者的浏览层次如下图 去粗取精,概括为:游园体验!完全要摒弃那种条框将中国概念削弱.弱化网站结构,体现