对于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.js，excanvas.js，jquery.js这样的解决方案，而不是在开发中畏首畏尾，把每个前端开发者都教唆成原教旨主义者（上次我们公司的小麦对我说：前端开发都有这种倾向……我要说这是历史遗留的伤痕，将在世代中流传下去……）


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


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

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

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

NTRPG的Jackyshadow有正版Vista Busines，在坚持使用半年之后，他宣布换回盗版winxp，还详细陈述了自己的看法，对那些不明所以就准备升级到Vista的国内用户来说，我觉得这篇文章很有参考价值，经作者允许，发到这里来：

正版Win Vista Business, 用了前前后后差不多半年左右, 今天撤下来换装了XP

我的机器配置:

P4 3.0Ghz – E Prescott
2GB DDR400
Nvidia 6600GT
320GB+80GB
ADSL

Vista的好处:

- 新的开始菜单设计不错, 比之前的开始菜单整洁容易管理得多, 其实不必管理也可以很整洁, 不会出现传统Windows”所有程序”呼啦一下子半个屏幕都被菜单遮住的情形

- 面包渣地址栏是非常好的想法, 用习惯後效率很高

- 像管理和组策略这类比较高级的应用都有傻瓜式的access和向导—当然这个意义不是很大: 傻瓜式用户不需要高级应用, 用高级应用的一般都不会是完全的傻瓜用户

坏处:

- 几乎是个和XP一模一样的操作系统, 你可能要跟我争论它用了什么新技术,新的外壳,新的内核等等, 但事实上讲, 它的用户体验和XP非常接近, 接近到有点让人怀疑300多美元是不是被MS骗去了

- UI上有严重的问题.

Explore 不能记忆上次被关闭时的尺寸和位置是最明显的. 考虑到XP中不太存在这个问题, 可以说这是个bug. 但这个bug非常非常的讨厌. 对于大屏幕用户来说简直就是腰斩用户体验, 你要么每次都去重新拽窗口尺寸, 要么就忍受在那个800×600(可能还不到)的窗口里用滚轮看内容….

号称改进过的复制文件进度对话框完全是个摆设. 上面的时间预估, 传输速率不仅仅是不准的问题, 比如你拷贝一个很大的文件, 实际需要5分钟, 经常会前四分钟这个对话框一直显示:估计剩余时间0, 传输速率0.0mb/s, 然后在最后一分钟里显示传输速率n GB/s.

Explore上的菜单Panel被隐藏掉了. 需要按alt才能激活. 当要执行比较高级的设置时比较繁琐–比如更改是否显示隐藏文件/后缀之类的. 当然这个panel可以被设置成始终显示–然而它的模样和整个界面格格不入, 放在上面十分难看.

图标, 大部分常见的图标在Vista里都有进化, 不仅仅体现在外观–Vista带来的新图标标准尺寸为512×512(顺便说一下OS X N年前就在用这个尺寸了), 这样当你在用滑块选择浏览尺寸时可以把图标放到很大很大而仍然保持漂亮的外观—而问题就在这里了: 很多,事实上是绝大部分Windows平台的软件, 图标都没有这么大的尺寸, 结果放大後有些图标很漂亮(一般都是Vista自带的), 而大部分应用软件图标则全是色块, 惨不忍睹. 这还不算完, Vista自己有些图标也不是512×512的, 比如著名的”无法识别的文件类型”图标, 这是曾经被公认为GUI历史上最丑陋然而最长寿的图标(从Win 3.x时代就活跃在第一线的上古之神一样的存在), 在Vista中不仅保持着本色, 而且连个高分辨率版本都没有. 所以假如你那打扮的漂漂亮亮的数字照片/媒体文件夹里不慎有个.bak或者.cache这种经常由数字设备/软件自动生成的临时文件, 你就会有一种粥和老鼠屎的关联感.

图标之二, 这是Vista的另一个Bug, 早在Beta公测阶段就有很多人指出了, 但微软好像根本就没搭理(事实上前面好多缺点在Beta时期就有很多人提出了, 但微软都没有吊). Vista桌面上的图标(除去系统图标之外)都有Alpha channel的问题. 第三方的图标周围会有一个虚线的方框, 显示出该ico文件真正的尺寸, 这个方框的明显程度取决于你的墙纸. 本来这或许可以叫做新的UI风格, 但有的图标有这个框框有的没有就实在很古怪了, 同样的, 这个问题从未在XP中出现过, 所以应该是Vista的bug

- 性能

在我这个配置上, 基本操作的性能没有显著下降. 但进行对性能要求比较高的应用时性能下降很明显. 例如HD播放, 同样的配置和软件, 1080p在XP上一切正常, 但在Vista上会卡, 时间长了声音和画面就会失去同步. 游戏同样的设置基本上会有10个FPS的下降(峰值)

Vista 会强行对媒体文件获取缩略图并作针对性的searching index(后者涉及到处理大量meta data, 在单核处理器上极为消耗资源), 在打开含有大量媒体文件的文件夹时系统速度会显著下降–一直到不能忍. 然而假如将这个功能关掉, 所有的图片都会变成千篇一律的图标而不是预览图,让人对其中取舍十分苦恼

- 兼容性

在我这里很是问题. 好多04年以前的游戏甚至都不能安装(用以XP的兼容方式运行也不可以). 网络上对XP的机器不是很友好, 会有严重的通信障碍. 与XP机器共享文件偶尔可以成功, 但大部分时间都无法复制共享驱动器上的内容(微软有一个未公开的hotfix修正这个问题, 但要求用户打客服电话索求, 我跟微软客服的一个印度阿三–无疑是微软outsourcing到印度的客服中心–磨了半天他也没给我, 我都不知道他有没有听懂我的问题, 当然我也不确定我是否听懂了他说的是什么)

另外Vista有微软的天才程序员们嵌入的网络自动优化协议, 这个协议在一部分牌子的Router构建的小型局域网上会造成数据风暴导致整个网络堵塞瘫痪–最棒的部分在于, 整个小型局域网上哪怕只有一台Vista的机器也一样会被日. 我所在的局域网正是可以被日的类型, 还好这套协议可以通过命令行关掉….但繁琐程度也超出一般用户的能力范围了(比如需要关闭部分服务, 更改策略, 取消UAC, 还要找到新的command promote–好像是出于安全原因Vista把”运行”扔掉了)

总之我对Vista很是失望, SP1出来之前是不打算再碰他了, 目前来说对任何人都不推荐这个操作系统, 现在市面上没有好的破解的Vista对玩家也是一大幸事, 还是继续玩VLK的XP吧, Vista全是噩梦

由于形势所迫（不仅因为GFW），我不得不放弃Blogger重新建立一个稳定的BLOG，熟悉WP的插件加上制作这个主题花了4天时间，超乎想象了……时间主要浪费在设计、浏览器兼容上面……本帖我将用来发牢骚，并且分享一些经验教训，没兴趣的同学可以跳转到其他地方去了……

页面设计在中途大幅度修改了3次，这次我想恢复到传统风格，因为如今那种简洁大字体大空白色彩明亮固定宽度居中对齐边缘有阴影的WEB2.0风格太普遍了，作为代表个人形象的BLOG，我希望有一些不同的个性，而且我虽然也喜欢“简洁”，但不喜欢“简单”。本来是想把WEB2.0的设计元素和配色与奇幻游戏元素结合在一起，但尝试过之后发现很困难，主要是配色很难，而且“留白”在WEB2.0风格里确实占很重要的地位，但在这个页面里我没办法留很多空白（何况最初就决定要做三栏布局）。与做图和配色相比，我还是更喜欢写代码，所以我懒得花更多时间来完善目前的设计了……

这个BLOG的布局可以说是实验风格的……三栏的液态布局，左栏的宽度是自适应的，还有一部分内容固定在窗口顶部，无论怎样拖滚动条，它都会随着页面移动，实际上我是受了Westeros的启发才想用这种相对窗口固定的设计，但是实现起来很麻烦（Westeros的效果其实也只支持IE7和FIREFOX，在IE6里会变得像框架布局一样），如果用JS来实现，移动就不可能是平滑的，衔接的效果不好，用CSS来实现却有很严重的缺陷，首先IE7以下版本的浏览器不支持position:fixed属性，必须用HACK来模拟，我采用的方法是用一个DIV来包含所有元素，在IE7以下版本里给它height:100%;overflow-y:auto;的属性，把顶部元素的定位改成绝对，所以IE6用户看到的右侧滚动条其实不是浏览器本身的……

由于用了两种布局方式，而液态布局的三栏里既有浮动也有非浮动，再加上中间的羊皮纸效果必须在左右边缘采用不同的背景图，很多地方的定位都要精确到像素……所以这个主题的CSS写起来很头疼，DEBUG花了很多时间，目前在opera里似乎还有一个毛病，但我一向都是歧视opera用户的（因为占有率才0.8%左右嘛），暂时懒得改了……

由于设计上的限制，有2个地方的布局不得不用JS来调整，一个是改变顶部fixed层的宽度，因为它的定位方式是fixed或absolute，无法做出液态的宽度（也就是说宽度随浏览器的大小自动填充，但是与右侧总保持固定距离），另一个是让左栏和中栏的高度相等，由于无法使用统一的背景图片，所以这里也只能用JS来调整……

我倒不在意什么“预留退路”、“无障碍”之类的JS设计观念，反正如今在WEB上混没有JS已经寸步难行了，而且我没有用JS来影响内容…………但是用JS来调整布局会遇到另一个问题，如今的JS代码都是放在window.onload里运行的，因为页面加载完成、DOM建立之前，很多方法都不能用，但问题在于，window.onload不仅要等DOM加载完，还要等图片（指img标签）加载完，我的BLOG页面里整合了很多东西，每篇文章的题图、YUPOO的相册、豆瓣的封面……如果要等这些东西都加载完才修正布局，显然是不现实的，幸好我在国外一个BLOG上找到解决办法（地址忘记了，抱歉），可以在onload事件触发之前、DOM刚加载完时就执行修正布局的函数：

DOMsinit就是我要执行的函数，第三个参数本来是布尔值，用来决定事件在冒泡还是捕获阶段触发，但DOM加载的事件显然没这些东西，所以必须传空值，以上是适合标准兼容浏览器的方法，对IE要用完全不同的代码（放在HTML里）：

ie_onload.js就是要执行的函数……为了IE要专门增添一个JS文件，真是麻烦……我还没搞清除defer是什么鬼东西，反正这样用就没错了……

就算你只是使用window.onload，也要考虑到：WP本身和某些插件，都可能有自己的JS函数，会用到window.onload，如果你直接写window.onload=function(){……..}，就会把其他功能覆盖掉，一定要用这类方法：

本来我还希望用户在改变浏览器窗口大小后，顶部的宽度也能跟着调整（因为用CSS实现的自适应都有这种效果），所以用了window.onresize事件，但大家都知道，即使是液态布局，当窗口小于一定宽度后，布局也会乱掉，因为容器虽然可以自动变形，但内容却不会改变，浮动定位在这方面最敏感……由于我的BLOG页面里内容比较多，所以宽度不能少于900多px，在window.onresize里我也做了相应的处理，但是问题就出来了……这个该死的事件在不同浏览器里的行为不一致，在按住窗口边框——拖动——放开鼠标的操作之后，onresize在firefox里会触发1次，在IE7里会触发2次，而在IE6里……居然触发3次……结果就是：限制最小宽度的函数在IE6里会导致浏览器假死……我觉得没必要为这种BUG自找麻烦，所以把onresize改成这样了：

version>=7 和 aVersion.indexOf(“MSIE”)==-1 都是浏览器校验，表示只有当IE版本大于或等于7，或者在非IE浏览器里，才限制页面的最小宽度……

本来还想加一些JS效果，比如可折叠的侧栏widget之类，但是把兼容性改下来之后就完全没心情了………………

最后还是回到设计话题，自适应宽度的布局其实还是比较迎合大屏幕（高分辨率），可以充分利用空间，改善用户体验，但是如果页面里内容比较紧凑，那么对于普通分辨率的用户（1024×768）来说，效果反而不如固定宽度……目前主流的BLOG设计是固定宽度，单栏或两栏，底部再加上一栏放各种列表，所以我的布局方法虽然技术上麻烦的多，但也许并不讨好，那也没办法的事……