无可赖何_{阿肆的个人博客}

这段时间在学校没有很多事，就将一直“看不惯”的中国移动的首页给重构了下玩玩。重构之后的网页：http://www.ivershuo.com/did/for_cmcc

下面是重构的效果：

可以看出重构之后的页面大小(131.1K+127.3K=258.4K)不到原网页大小(525.5)一半，HTTP请求大幅度的减少。单从经济方面来说，也算不小的一笔开销节约了。

首先说说原网页有哪些地方不够合理吧：

1. HTML标签混乱，结构不够合理；
2. 过多的图片装饰；
3. 浏览器兼容做得不好；
4. 可访问性有待加强；
5. 多余的样式和脚本（因为首页和内页的布局几乎完全不同）；
6. 那么大的一个FLASH放在内容前段！

所以在重构的时候主要从这几方面下手。使用XHTML+CSS重写结构和样式，完全通过W3C验证，HTML代码从原来的834行精简成342行；尽量兼容流行的浏览器（经测试，在WIN平台下的Firefox3、IE6、IE7、Opera9.6、Chrome2、Safari4 beta表现基本和原网页一致）；重做装饰图片，减少HTTP请求；增强可访问性，使用可禁用、兼容且无侵入式的脚本。最后我觉得首页的那个大FLASH——并且正在我准备重构的时候，他又换了个更大的FLASH——对于页面的载入影响比较大，何况还是使用的用户并不多的移动线路，曾经我使用教育网的时候就很难完整的刷开移动的首页，所以对于这个FLASH个人颇有微词。

上图显示了页面主要重构的部分，下面列表的每项对应上图相应数字热点区域：

1. 这里主要简单的做了个SEO的优化，思想借鉴了Google搜索结果页面的LOGO编写方式。关于细节可以查看原代码，至于可行性有待讨论（在CSS森林群里面讨论时，来自腾讯重构组的鬼和飘不赞同隐藏IE下无效图片的红叉）；
2. 个人认为这里是整个页面最杂乱的地方，没有办法，我得保留原来的呈现。优化了这里几个元素的底图，对英文版链接动态样式底图合并，并保证图片失效下的可用性（具体方法查看源代码）。搜索按钮使用border样式替换原背景样式。省公司的下拉链接添保证了禁用js下的可用性；
3. 这里优化底图。不过使用了一个多余的标签，并不是完美的重构，希望能找到更好的方法；
4. 这块的结构动了大手术，解决原网页在结构上的不科学、浏览器的不兼容及js禁用下tab无法切换的等诸多问题；
5. 这里解决在Firefox等浏览器下不显示背景问题，及下拉链接添保证了禁用js下的可用性。

在文档结构上，吝啬的使用了Zeldman推荐的“i”、“j”、“c”文件夹分别保存图片、脚本和样式表，并且将网页需要动态替换的广告图片另外存放以便后台程序处理（真正使用中不推荐使用名称为“ad”的文件夹，以免被广告拦截软件拦截）。

这是一个基础的网站重构的例子，对于想了解网站重构的朋友或许有点帮助。当然在正式的重构中还有很多需要做的，也希望各位朋友指导我需要改善和提高的地方。

最后要说的，大家不要批评中国移动的网页开发人员，他们比我们大多数人优秀，技术比我们也强，只是在真正的实施中会有其他不可控的客观原因，如历史原因、产品经理或者老板的压力等。所以我更希望在中国各位网站负责人能真正重视网站重构，因为他确实能使你节省钱，获得更多的客户……

下面这个写给豆瓣看的，各位可以无视：doubanclaim4ab4a8b8908a8c2b

下面这张图是在腾讯校园招聘的"招聘行程"页面抓下来的(使用的浏览器是Firefox3)：

主要内容是图上标明(3)的地方，但是在Firefox、Chrome、Safari浏览器下，这部分等于是完全不可以见的。同时这里是通过iframe引用的另外一个页面，如果引用的是一个动态页可能还想得通，因为可能为了方便修改数据，但是引用的却是一个html静态页面，似乎就没有必要了。

"返回首页"的按钮设置在了(2)的位置而这里的"首页"又指的是哪一页呢？tencent首页，招聘首页，还是校园招聘首页？在位置(1)的地方你想或许有个回到招聘首页的连接吧？没有！那里就是一副图片。

下面这张图片依旧是Firefox用户的优待：

有趣的是,城市是你无法选择到的,如果你使用的是Firefox浏览器。

招聘虽然没必要做成淘宝/支付宝UED那么cool，或者豆瓣那么的有意思，但是至少要能使用吧？看腾讯招聘中多个职位需要”熟悉LINUX/UNIX操作和开发环境“，而真正在linux环境下的用户却无法到达腾讯，因为他们通向腾讯的大门（招聘网站）是ie only的，而他们却没有ie（如果没有双系统的话）。

今天看了twinsenliang的博客,知道腾讯缺的不是前端人员,他们有很不错的前端人才!

-12月04日

我认为，在写网络程序时，要把每个用户都想像成满怀恶意的黑客高手，他们每个都想暴露你的数据库！安全是最重要的；在做网页设计时，要把每个用户都想像成刚接触电脑的电脑盲，他们连超链接是什么都不知道，可用性是最重要的。

而我觉得网页设计比网络编程更难，写程序时，遇到了难题，查查手册，google一下，基本就能搞定。但是一个网页，可能反复修改N多次还不能达到满意的要求，尤其是基于浏览器的原因，一个细节可能怎么都调不好。

而所有的一切，都是为了用户。当我不断的在用户和设计者身份间切换时，我学会了特别注意下面的细节处理：

1,首要的，尊重W3C标准，尊重每个浏览器，尊重每个用户。

2,不要忘记给radio和checkbox标签的说明文字加上label标签，你可以不必多辛苦，但是你的用户将不用玩“看你能不能点到我”的游戏；

3,翻转效果图片做在同一张图片上，然后用css定位位置。这样就不会出现当mouseover时图片未加载而出现什么都没有的情况。

4,一般情况下，对用于有明显表现意义的小图片（如Loading图片）进行预加载。

5，记住script只是页面功能的增强而不是增加。

6，noscript标签不要放在页面内容最前面，这样搜索引擎可能直接抓取了类于“抱歉！我们的网站需要启用jabascript才能正常浏览”作为摘要。你仍旧可以使用css将它绝对定位在页面的顶端。

7，如果你的<a>标签仅为了实现onclick，而不是真的需要连接，那么记得在代码后面加上"return false"，以避免将页面带到顶部（不过从语义化角度上来说，不建议将<a>这样用）。

8，无论如何，给验证码图片加个方便的刷新连接。

9，当作品完成后，亲自观看一下至少一位用户怎样使用你的产品，然后你绝对会有至少一处地方想要修改。

而一旦你知道哪点是重要的，你就要将这点应用到你的设计里去，就像每天的吃饭睡觉一样，就会变成习惯，变成一种需要，而不是只会说却永远忘记做的口号。