淘宝页面及功能比较.docVIP

易趣、淘宝页面及功能比较 刘源源 物流0302 2005-4-9 写在前面的话 高中的时候学校开展差异化（兴趣化）教育，凭着对网络的好奇与兴趣选了一门跟网站建设相关的课程，有幸对Web相关的技术做了一点研究，经在自己的上一点实践。觉得自己还算略有心得实际上是刚刚入门的啦！。本着学以致用的原则，写这篇有针对性的做个小小的分析。例子就选择易趣(ebay中国)和淘宝这对竞争对手吧以下的易趣与淘宝如无特殊说明则分别指代双方的页面。用IE打开各自的站点，从头向下看，乍一看两个站点格局类似--毕竟是竞争对手嘛，连主色调都有些雷同。先引起我注意的是淘宝首页的主导航条，居然是图片做的(分别是“我要买”、“我要卖”、“我的淘宝”、“社区”这个)，而且，那几个图片看起来也不是很漂亮，尤为严重的是，鼠标移到图片上看看，哦，很不好，没有用到Alt这个对图片非常重要的HTML 标记。这对搜索引擎来说，不是很“友好”。看看易趣，主导航条处理的还算不错，看上去舒服一些，当然了，也是用图片做的(有趣的是，易趣的导航条如果不用图片也能做出来一样效果的)，不过鼠标移过去可以看到图片的说明(导航条的图片用了 Alt 标记)。从这一点来说，易趣的页面设计似乎稍稍强那么一点点。在易趣站点导航条的上方，我看到了地图，找遍了淘宝的页面，我没有发现这个比较重要的站点内容。一个精心制作的站点地图对来访的用户和来访的搜索引擎机器人来说，都是很有参考性的。既然前面说到了 Alt 标记，不妨接着看看这两个站点整个页面对图片的标记情况。通过 Mozilla Firefox 的 Pageinfo 工具，淘宝的页面内共有图片个(会有一点点误差)，不过只有处用到了Alt标记。易趣呢，幅图片，设置了个Alt标记，但有内容的只有个。另外一半的标记内是空的。这里所说的两个页面时间以2005-3-27 为参考。检测工具是Firefox。上一步的比较我用了Firefo，需要说明一下各自在Firefox里的显示情况 的是，易趣在页面在Firefox中有了不好的表现：无法正常显示页面出现了变形看出不同了吗 （左面是变形的，右面是正常在IE里看到的）估计是设计的时候没有针对不同的浏览器进行测试，也反映了页面代码设计的结构不太好。而淘宝的页面在Firefox浏览器中显示良好。通过Pageinfo工具我们了解到，淘宝的页面编码是GB2312,而易趣用的是UTF-8，从这一点上如果要说个谁优谁劣有点牵强，但是要肯定的是UTF8的扩展性更好一些，这一点应该也和易趣(ebay中国)前一段时间和总站进行整合有关。开始看看这个两个站点的HTML的源代码。易趣的站点源代码居然有好大一段CSS在那里，复制并粘贴到写字板中，居然有1,693字节之多。对于一个大型电子商务站点来说，这个是大忌！想想看，每个页面如果能省下来1,693字节,那么一天要节省多少流量?而如果每个页面都要多解析1,693字节，无形中会浪费多少金钱呢?淘宝在这一点上处理的还算可以，页面中没有看到单独的CSS段落。下面说点我认为更为关键的内容：结构化Web设计，前文有提及，淘宝页面中没有单独的CSS段落，那么是否意味着页面的结构设计的就比较合理呢？我个人认为，这两个站点的代码设计都很糟糕。虽然淘宝用了独立的CSS文件，不过页面中用了大量的表格，当然，我不是说用表格就不好，那么有什么问题呢？举个例子，淘宝页面中定义表格的样式的时候，我不完全统计了一下，border=0用了39次。这个属性，完全可以在CSS引用文件中用一行代码完成。说这是 1:39 的差别也不算太过份。易趣呢？当然也好不到什么地方去，页面中有55个 border=0标记。至于其他重复定义的属性，更是多得很。也就是说，这两个站点的页面中都存在着大量的垃圾标记。我保守的估计一下，这两个页面都至少能去掉10%甚至更多的无用信息，我的意思是说，去掉这些代码之后，页面风格更为统一，更为美观。而不是以牺牲页面友好性为代价的。对于一个大型电子商务站点来说，每天节省哪怕5%的网络流量是什么概念？用户浏览每个页面会节省更多的时间，相同的时间里就能看更多的页面。而对公司来说，Web服务器的压力就会越小，最主要是，会节省大量的资金!!后台的DBA和程序员们可能正在为优化程序而大伤脑筋，但是页面上却在大量的浪费。那么说，这两个站点都需要所谓的Web重构喽? 这样就需要投入更多的人力的阿，这难道不是在短期内提高了成本？恰恰相反，如果处理得当的话，成本会逐步降低。