心弦

我一直比较在意页面的性能和编码质量，有时候会通过HTML代码的质量来判断一个网站的技术水平。

易趣、eBay和淘宝在网页性能和前端编码质量上的简单对比

昨天下午闲来无事，去久违的易趣转了转，发现他们的浏览器兼容性还是一如既往地好。可看看“我的易趣”页面的源代码，就觉得有点头大－不仅HTML/CSS/JS全部都混杂在一起，而且代码显得非常凌乱，还大量使用了表格来定位。当我把CSS禁用掉，再把浏览器窗口调到320像素这么宽后，网页已经基本无法阅读了。

下图是其YSlow得分，老实说，37分并不是个理想的成绩。对于这样大规模的网站来说，如何通过规范来保证多人协作编码时的质量，以提升工作效率、减少沟通成本，并且给网站提速减负，是个重要且紧急的问题。

易趣的表现让我对eBay很好奇－看看高手云集的eBay情况如何。

结果令人惊讶（如下图），“My eBay”的YSlow得分居然高达97！只有一项因为没有加Expires header而得了B，此外全部是A。这恐怕是我见过的最高的YSlow得分了。

但是这个页面的编码质量并不如想象中的好，问题和“我的易趣”页面如出一辙。强调可访问性（accessibility）的508法案似乎被eBay完全忽视掉了。

不过值得一提的是，eBay的js写得非常强悍，单从函数的命名就可见一斑了。

接下来我又测试了一下“我的淘宝”，淘宝的代码明显漂亮了很多。它的YSlow得分为39（如下图），

从上图来看，淘宝丢分主要在1）过多的引入外部资源，比如18个js和16次DNS查询；2）Apache和CDN的设置（其实根源在各种广告提供商，10个没有经gzip压缩的js里面有9个都是广告相关的）。

替前端鸣冤

有很多人不理解为什么在拥有众多高手的大型互联网站，页面的代码还能如此之乱。难道这些前端开发不知道W3C，不知道js要做到无侵入（unintrusive）么？

当然不是，其实这里面的原因挺多的，也不是一两句话能讲的清楚。在所有的原因中，以下两条可能是最关键的：

1. 缺乏规范，或者具备规范，但缺少强有力的执行机制。在前端打交道最多的三种语言中，只有Javascript算是程序语言，HTML和CSS根本就是描述性的语言。最让人头疼的是，它们远不象具有很多相同特点的XML那么严谨，自身的描述能力又不强，所以几乎不可能写出类似Java那样规范的代码来。程序语言中常用的框架，到了HTML和CSS这里也起不到作用，甚至它们两个根本就产生不了框架（那些所谓的CSS框架，在能力上和真正的程序框架差的太远了，我觉得顶多算是CSS模式[Pattern]）。要部分解决这个问题，我提倡用真正的程序语言，比如Velocity/PHP/Ruby等对HTML进行二次封装，实际上本站上面的很多东西就是靠helper（助手，MVC中View的一个组成部分，可以理解成帮助页面显示的一些程序）渲染出来的；
2. 系统逻辑太复杂，以至于顺利完成工作都变成了一个不小的挑战，更别说还管什么性能和质量了。写到这里想起曾经写过的一个control（控件，MVC中View的一个组成部分，可以理解成页面上的一个复用的元素），在当时紧张的时间里，control里面的代码质量已经算是不错的了（跟我搭档的几个Java程序员这么认为，其实我觉得一般，不过确实没时间写得更好了），可仍没办法做到把HTML、Javascript和Velocity代码完全分开，因为判断的逻辑太多太复杂。以至于在浏览器中看到的东西，比如一个小小的下拉菜单，它背后所隐藏的东西可能超乎想象。