http://192.168.1.171/ol/

重构后效果图：

可能表面上看不出来什么，但细细体味之后便会发现不同之处。且听我慢慢道来……

一切用数据说话，要对比的第一步，自然是整体页面大小、http请求数等了。打开firebug，请看：

线上版本
http请求数16个（主页面1个，css文件6个，js文件1个，图片9个），其中有一个重复icon.gif可以忽略不计，而附带的两个结果图片是xhr请求结果后动态添加的。
整体页面大小为161.8KB。

重构版本
http请求数11个（主页面1个，css文件2个，js文件2个，图片6个），其中有一个重复icon.gif可以忽略不计，无附带多余的其它请求，结果图片已合并到icon.gif中。
整体页面大小为39.4KB（gzip过）。

—

仅看数据对比，并不能体验到什么，那么细节上的重构、改动和用户体验等我列表一下，你就会明白。线上版本甚至有很危险的bug存在。

主页面
唯一的一个html页由7.2KB重构至3.18KB，不仅标签数量更少，而且将原本混在内容中的js部分提取出来。控制导航栏的放置在nav.js中，全站共享；唯一和此页面相关的passport.js单独保存。这也是为什么重构后1个js文件反而变成2个的原因（并不是失误）。

css文件
由6个变为2个，线上版本过于冗余，加在太多不相干的文件（比如room房间的css）。重构后一个全局globle.css，外加一个与页面相关的login.css。而且线上版本通过css来import另外的css，后期渲染会影响浏览器速度。

js文件
前面已经说过为何1个变为2个了。导航栏全站都有，所以应该提出单独的js文件进行缓存，而与账户控制相关的js则提取与此页面单独关联。

图片
由9个缩减至6个，合并可能合并的图片，这点线上版本已经做的很好了。改进的3张中2张是将xhr的结果请求合并到icon.gif中；另外一个就是将nav的背景图重新提取，用border-color代替边框颜色，并将渐变图合并到同一个bg.gif中。

—

好了，再说说用户体验上的改进，这点要看纯js功力了。

以注册为例，侦听keyup事件发送xhr请求验证用户名是否已经被注册。那么假如已经被注册了，显示结果是什么呢？
“不可用，请使用不少于3个字母数字组合。”
这是告诉用户已经被抢注名字了么……

keyup事件在诸多浏览器上表现不一，ie上支持输入和回退触发，ff上虽无回退，但却支持所有按键触发！
所以了，想搞死浏览器或者服务器太简单了：一个按键精灵，疯狂任意键，瞬间n多xhr请求冲上前去……
就算没恶意的人，打字快一点的话，xhr请求是无序的，说不定后面的返回结果就被前面的延迟覆盖了，orz……

再看看密码重复，我把重复密码输入和密码一样，ok没问题。我再更改密码，结果依然正确！那我再更改用户名试试看怎么样？好奇怪啊……

用户id输入中文会如何？也产生了一个xhr请求，而且本身就包含无效的字符的话继续输入还会产生新的xhr请求。虽说前端验证没有后端可靠，可是必要的前端验证可以节省很多非必要的消耗。

在用户名无效后关闭密码框，可是重复密码框却仍然打开。下面的注册按钮却依然可以用，而取消按钮却一直不可用。

—

花了一天多时间重构了下，感觉收获还是蛮多的。想做好一流的页面和交互以及体验，真得不是一件容易的事。