Web技术：易趣 vs 淘宝

这两个月来，因为工作的需要，对 Web 相关的技术做了一点研究，经过在自己的 站点 上一点实践。觉得自己还算略有心得[实际上是刚刚入门的啦:)]。

本着学以致用的原则，写这篇 Blog 有针对性的做个小小的分析。例子就选择易趣(ebay中国)和淘宝这对竞争对手吧。这里对两个公司的称呼排名按照字母表顺序。以下的”易趣”与”淘宝”如无特殊说明则分别指代双方的 Web 页面。

要说明的是，我这里所说的”Web技术”是个比较狭义的概念，内容将限制在 HTML、XHTML、CSS、Web Design、搜索引擎友好等几个方面上。

用 IE 打开各自的站点，从头向下看，乍一看两个站点格局类似–毕竟是竞争对手嘛，连主色调都有些雷同。先引起我注意的是淘宝首页的主导航条，居然是图片做的(分别是“我要买”、“我要卖”、“我的淘宝”、“社区”这四个)，而且，那几个图片看起来也不是很漂亮，尤为严重的是，鼠标移到图片上看看，哦，很不好，没有用到 “Alt” 这个对图片非常重要的HTML 标记。这对搜索引擎来说，不是很“友好”。看看易趣，主导航条处理的还算不错，看上去舒服一些，当然了，也是用图片做的(有趣的是，易趣的导航条如果不用图片也能做出来一样效果的)，不过鼠标移过去可以看到图片的说明(导航条的图片用了 “Alt” 标记)。从这一点来说，易趣的页面设计似乎稍稍强那么一点点。

在易趣站点导航条的上方，我看到了站点地图(Sitemap)，找遍了淘宝的页面，我没有发现这个比较重要的站点内容。一个精心制作的站点地图对来访的用户和来访的搜索引擎机器人来说，都是很有参考性的。

既然前面说到了 Alt 标记，不妨接着看看这两个站点整个页面对图片的标记情况。通过 Mozilla Firefox 的 Pageinfo 工具，淘宝的页面内共有图片 80 个(会有一点点误差)，不过只有 4 处用到了 Alt 标记。易趣呢，61幅图片，设置了 14 个 Alt 标记，但有内容的只有 7 个。另外一半的标记内是空的。这里所说的两个页面时间以 2004年12月13日22:00 为参考。检测工具是 Firefox 1.0。

上一步的比较我用了 Firefox ，需要说明一下各自在 Firefox 里的显示情况 的是，易趣在页面在 Firefox 中有了不好的表现：无法正常显示。页面出现了变形。估计是设计的时候没有针对不同的浏览器进行测试，也反映了页面代码设计的结构不太好。而淘宝的页面在 Firefox 浏览器中显示良好。得了一分。

通过 Pageinfo 工具我们了解到，淘宝的页面编码是 “GB2312”,而易趣用的是 “UTF8″，从这一点上如果要说个谁优谁劣有点牵强，但是要肯定的是 UTF8 的扩展性更好一些，这一点应该也和易趣(ebay中国)前一段时间和 ebay.com 总站进行整合有关。

开始看看这个两个站点的 HTML 的源代码。易趣的站点源代码，哦，居然有好大一段 CSS 在那里，复制并粘贴到写字板中，居然有 1,693 字节之多。对于一个大型电子商务站点来说，这个是大忌！想想看，每个页面如果能省下来 1,693 字节,那么一天要节省多少流量? 而如果每个页面都要多解析 1,693 字节，无形中会浪费多少金钱呢? 淘宝在这一点上处理的还算可以，页面中没有看到单独的 CSS 段落。

SEO 的努力。在易趣的页面中没有发现明显的 SEO(Search Engine Optimization,搜索引擎优化)的”痕迹”,比较“坦然”。淘宝呢，充分显示了在这方面的“急功近利”，Meta标记中，可以看到”keywords”和”description”部分加入了好长的一串站点常见的产品名字，大家都知道，现在大多数搜索引擎都不关心 Meta 标记中的 Keywords 内容了，这种做法一般被称作“Keywords spam”，是一种很蹩脚的 SEO 方法。看来淘宝对名次还是比较关心的，只是未得其法。这一点也可以理解。

下面说点我认为更为关键的内容:结构化Web设计，前文有提及，淘宝页面中没有单独的 CSS 段落，那么是否意味着页面的结构设计的就比较合理呢？我个人认为，这两个站点的代码设计都很糟糕。虽然淘宝用了独立的 CSS 文件，不过页面中用了大量的表格，当然，我不是说用表格就不好，那么有什么问题呢？举个例子，淘宝页面中定义表格的样式的时候，我不完全统计了一下，border=”0″ 用了 39 次。这个属性，完全可以在CSS 引用文件中用一行代码完成。说这是 1:39 的差别也不算太过份。易趣呢？当然也好不到什么地方去，页面中有 55 个 border=”0″ 标记。至于其他重复定义的属性，更是多得很。也就是说，这两个站点的页面中都存在着大量的垃圾标记。我保守的估计一下，这两个页面都至少能去掉10%甚至更多的无用信息，我的意思是说，去掉这些代码之后，页面风格更为统一，更为美观。而不是以牺牲页面友好性为代价的。

对于一个大型电子商务站点来说，每天节省哪怕5%的网络流量是什么概念？用户浏览每个页面会节省更多的时间，相同的时间里就能看更多的页面。而对公司来说，Web服务器的压力就会越小，最主要是，会节省大量的资金!! 后台的DBA和程序员们可能正在为优化程序而大伤脑筋，但是页面上却在大量的”浪费”。

那么说，这两个站点都需要所谓的 Web “重构”喽? 这样就需要投入更多的人力的阿，这难道不是在短期内提高了成本麽？恰恰相反，如果处理得当的话，成本会逐步降低。结构化设计不可能是一蹴而就的，肯定要有个过渡过程，这之后，站点的维护只需重点针对页面内容，Web 维护人员在需要改版的不需再为页面中表格的各个属性的变动而大伤脑筋，不需要考虑每个段落的字体属性，只需要针对 CSS 进行调整即可达到目的。Web页面也可以达到随虚应变? 似乎太遥远了……

在上面，我零零碎碎的说了一些东西，很是片面，还有好多没有涉及到的内容，比如Web服务、内容挖掘……有些越俎代庖了

参考信息

• 深入亲和力 HTML很简单? CSS 很简单? 看看这个文章可能有的人会改变看法
• http://www.w3c.org