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

这段时间在学校没有很多事，就将一直“看不惯”的中国移动的首页给重构了下玩玩。重构之后的网页：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