Limbo: 混沌位面 ———— 这里既空虚又充实,没有规则,没有约束,创造来自思考,生存依赖想像,现实源自梦想。
首页 给我发Email! 订阅 跟踪我的twitter信息

写javascript是否要“预留退路”

cloudbook.jpg早上收到一封邮件,问的正好是我一直如哽在喉的事情:

对于web开发中的预留退路问题,我一直犹豫不决。在安全方面,自然是不能完全相信JavaScript,这点是确定的。但在用户体验方面,是否真的需要处处”预留退路”,照顾那些不支持JS或者对JS支持不好的用户吗?而UED工程师们又一直在说,不”预留退路”会惹恼数量不少的用户,但却从没有人提起具体会是多少用户、多少比例。不知道YY大神手里有这方面的数据吗?记得YY您在建立Limbo混沌海的时候,就选择了”不预留退路”的方式,不知当初又是出于什么原因这样考虑的呢?非常想听听您对”预留退路”问题的看法,期待您的回信。

这种设计观念,或者说原则,不管它叫什么名字,比如“预留退路”/“平稳退化”(Graceful Degradation),“渐进增强”(Progressive Enhancement),“不唐突的javascript”(Unobtrusive JavaScript)……从UE的角度来说是非常重要的,它的重要性不仅仅来自“有多少比例的用户不开启javascript支持”,而是因为如今访问web的方式正在变的越来越丰富多样,平板电脑(Tablet PC),上网本(netbook),掌上电脑(UMPC/MID),手机,iphone/ipod touch,这些平台有完全不同的性能,屏幕尺寸,浏览器,和操作方式,它们对javascript的支持也可能不一致(比如我以前抱怨过iphone的差别)。很多“严肃”的网站还需要考虑到“可访问性”(Accessibility),要保证能支持屏幕阅读器之类的设备,让那些有视觉缺陷的用户也可以无障碍的使用。此外还有语义网方面的要求,随着web2.0带来的海量信息,互联网也在向一台超级计算机的方向发展,需要靠网络本身去处理网络上的信息,而不是靠人的肉眼去一张网页一张网页的识别,现在的网页不仅仅是供人阅读,同样也需要面向机器,所以不能因为javascript的使用而影响到内容,让机器无法抓取和识别。

不过,以上这些观念有两方面的局限性:

第一,它们仅仅适用于传统的,“文档”式的网页,互联网的原始形态,只是内容的组织形式和传播手段,对于多数网页来说,内容才是根本,JS只是锦上添花,或者说是调料,最重要的是保证内容的完整语义,可访问性,以及适应过去/现在/未来的多种平台的能力。但是,除了“文档”类型的网页,现在也开始兴起大量的”web应用”,它们是在线的服务,也是在线的软件,对它们来说,浏览器是一个容器,网页是一种界面呈现方式,数据是异步获取的,频繁变化的,而且是细粒度的(比如并非一篇完整的文章,而是一若干来自数据库的字段),虽然同样以内容为中心,但是在这个语境里,“内容”是指纯粹的数据,而并非整块整块的HTML,一旦缺少了界面的交互功能,缺少了JS程序的支持,数据根本就无法呈现,也就根本不具备访问这些应用的条件,对于这种类型的网页来说,“预留退路”并非是不可侵犯的信条。

更多情况下,网页是复合的,会同时包含文档和软件应用的特点,于是就应该有选择的采纳那些适用于自己的原则,比如把JS和CSS与内容有效的分离,兼容多种平台,保证核心内容能被搜索引擎抓取,等等。

有一个很好的例子是土豆网的播放页,这是在土豆网全站当中,最重要同时也是web应用特征所占比例最大的页面之一,javascript和flashplayer对它来说是必不可少的基础运行环境,所以你可以看到它的html设计跟其他页面有很大差别:

  • script标签出现在html顶部——在其他网页里,我们习惯把css放在顶部,js放在底部,让页面先呈现,之后再附加行为,但是在播放页面里,播放器是最重要的内容,播放器加载的速度是最关键的用户体验。
  • HTML里会包含JS代码——只有一处,就是TUI.player.load,理由同样是为了保证播放器加载速度这个核心用户体验,不得不祭出document.write这种“非常不提倡”的必杀技来写入flash元素
  • 有大量内容通过AJAX获取——比如评论,还有侧栏里的某些模块。因为它们是分离的数据,并非主要内容
  • 没有使用正常的流式布局——player和toolbar都是脱离文档的独立区域,采用绝对定位
  • 侧栏上的视频截图并没有把原始文件地址放在src属性里——延迟加载,如果不拖动滚动条,很多图片就不会无意义的下载

但是在很多方面同样也要做到Unobtrusive:

  • 对于核心内容,比如视频信息,作者信息,都是遵循文档式网页的设计原则,对搜索引擎友好
  • 在豆单播放页里,播放器下面的界面列表虽然是一个界面元素,但是也应该包含在文档的语义中,所以采用html的UL/LI来实现


第二个局限性是:这些原则早晚会过时。以前WaSP成员们千辛万苦推广这些观念的时候,互联网上到处都是惨不忍睹的网页,建立标准和规范,进行观念的革新,这些需求胜过了对技术的应用,而现在web标准早已普及,web应用需要进一步发展。以前Douglas Crockford,PPK在传道的时候,国外的网站还必须支持ie5.5甚至5.0之类的浏览器,恶劣的环境让web设计者和开发者们必须自我约束JS的使用,避免形成门槛。而现在,ie6在国外的占有率已经开始低于firefox(20%),很多网站已经开始放弃对ie6的支持,google和yahoo也在引导用户替换ie6。刚才我提到过,通过各种移动设备访问web的用户正在迅速增多,而这些设备对JS的支持不一致,但是这就像桌面电脑上的发展过程一样,同样是一个暂时现象,随着webkit变成iphone,android,palm pre这些新平台的统一标准,Mozilla也在积极把XUL技术应用到移动平台,环境的变化其实比桌面电脑要快的多。

我认为Graceful Degradation,Progressive Enhancement,Unobtrusive JavaScript这类东西都不适合过度的鼓吹,它们只是基础概念,是在特定时期特定环境中形成的经验和指导,而不应该是束缚前端开发人员和产品设计人员的教条,实际上,这些保守的观念来自技术的局限,而技术的局限不是我们逃避使用技术的理由,相反,我们可以仍然使用技术来打破这些局限,我们需要的是像ie7.jsexcanvas.js,jquery.js这样的解决方案,而不是在开发中畏首畏尾,把每个前端开发者都教唆成原教旨主义者(上次我们公司的小麦对我说:前端开发都有这种倾向……我要说这是历史遗留的伤痕,将在世代中流传下去……)


================吐槽结束的分割线================


最后回复两个邮件里的问题……

关于用户的统计数据,土豆网是有的,可以想象由于多数用户比较大众和小白,IE6的比例相当高,比较冏的是,腾讯TT的比例也很高,等同于Firefox,我必须说它那种跟QQ绑定在一起,经常无意中启动,启动之后就设置为默认浏览器的套路,确实很强大……在普通用户当中,“默认”是强大的力量,默认的通常就是最熟悉的,最熟悉的就是最好的……不过,统计数据有时并不能真正反映出用户数量,比如Opera用户在你的统计数据里只占到0.01%,你就要思考一下究竟是Opera用户确实只有这么多,还是你的网站对Opera支持太差,导致人家都不来……

关于我的blog……其实我很早就计划重做这个blog了,现在的版本是一年半前的,从技术上来说很幼稚,我都懒得优化和修补了……但是,即使重做,我仍然不会把别人的“用户体验”放在第一位,就像侧栏里说明的那样:“优先满足个人喜好”。blog有很多类型,有的是个人媒体,有的是文集,有的是日记,有的是个性化空间,而我想要的blog是“个人信息聚合”,除了满足阅读的需求,必然还要包含大量个性化内容,也就是说,用户首先是我,其次才是读者和我的好友,而对于阅读者来说,浏览方式不止一种,比如我自己就更习惯用google reader来阅读blog,如果用户愿意选择网页形式来访问,就会被强加很多个性化内容,桀桀桀,喜欢的继续看,不喜欢的关掉页面离开,这也算双向选择罢……

- 分类: 纯水, JavaScript, 用户体验, Blogger, web服务/应用

    发表评论
  • 2009.01.20 17:15, Ven 说:

    感谢YY的答复,太充实了!对”web应用“的观念印象深刻。

    回复

  • 2009.02.07 23:58, qewr 说:

    在webapp开发过程中,Graceful Degradation,Progressive Enhancement,Unobtrusive JavaScript这些原则也还是有指导意义的,提醒我们的设计要适当分层,代码(js,css,html)应当适当分离。但如果没有来自客户的需求,就不必抱着教条不放,强求关了js或关了css也能跑。

    回复

  • 2009.02.28 19:01, Shawphy 说:

    大赞!

    回复

  • 2009.03.03 18:40, z.Yleo77 说:

    我是抱着深入了解 graceful degradation,但我发现你给出了更好的答案,呵呵。

    回复

  • 2009.03.22 15:52, 河伯 说:

    教主是强大的~
    关于右边吐槽里的土豆豆单播放页要改成每次切换节目都刷新页面了,为什么啊……
    我比较喜欢上土豆就是因为用户体验比较好的的说= =b
    关于程序我是一窍不通啦……但好歹我自认是感觉会成员的说……

    回复

  • […] 来源:写Javascript是否需要“预留后路” http://www.limboy.com/2009/01/20/is_javascript_need_degradation/ […]

    回复

  • 2009.04.20 16:59, adam 说:

    就像明城所说的网页就像巧克力,内容、css、js,从里到外变得越来越华丽

    回复

  • 2009.08.23 18:04, 路人甲 说:

    其实BLOG并非是单纯性的面向主人,如果只是面对自己,不如写日记。这种既开放又保持主动的格局隐含了一层含义“正因为是你的,所以才是被众人接受的”。绝对封闭不用说,那是日记。但如果只注意和用户的友好度,不考虑自身特色,那不过是优秀的博客模板提供者。

    回复

  • 2009.09.03 01:22, 胡龙科 说:

    嗯,说得非常有道理,之前在看Javascript dom编程艺术的时候接触到这些思想和理念,但是在做项目的过程中,发现一些东西都不能过分的要求!

    回复

  • 2009.10.13 14:44, hi 说:

    我只想说。。这个blog很华丽。。看的我眼红

    回复

(一定要填写)

(一定要填写, 不会公开喔!)

GOSPEL OF YY

    I am Andrew Ryan, and I'm here to ask you a question. Is a man not entitled to the sweat of his brow?

    'No!' says the man in Washington, 'It belongs to the poor.'

    'No!' says the man in the Vatican, 'It belongs to God.'

    'No!' says the man in Moscow, 'It belongs to everyone.'

    I rejected those answers; instead, I chose something different. I chose the impossible. I chose...Rapture, a city where the artist would not fear the censor, where the scientist would not be bound by petty morality, where the great would not be constrained by the small!

    -- Andrew Ryan
    Bioshock