丁宇 | blog

我一直比较在意页面的性能和编码质量，有时候会通过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代码完全分开，因为判断的逻辑太多太复杂。以至于在浏览器中看到的东西，比如一个小小的下拉菜单，它背后所隐藏的东西可能超乎想象。

其实4月29日早上就从北京回杭了，只是现在才抽出时间来记录这次短暂的旅行。

先说D2。

第一场讲座是周爱民先生带来的“前端设计与开发的基本模式”。周爱民的技术水平之高无须赘言，因此我对本场是非常期待的。听下来却发现演讲中纯粹的软件技术探讨不多，内容以UI设计为主，听软件技术专家讲UI设计倒是头一遭，并且其中有些观点确实是独辟蹊径，以另一种视角阐释了UI设计中的焦点、布局和分辨率的关系等问题，虽然也有相当部分有失偏颇（比如混淆了“视觉焦点”和“界面上所获得的焦点”的含义），但总的来讲仍能给UI从业者带来不少有益的思考。

演讲时周爱民问了个问题：GUI中的WIMP是什么意思？大概是问题太初级，没人好意思举手。我便说了句“Window、Icon、Menu和Pointing device”，结果就骗了本周大侠的新书（如下），哈！

第三场名为“Enterprise Ajax in PHP”。主讲人Hedger Wang一上来就提出了一大堆看起来相当吓人的名词，听着听着却发现，这不就是拥有一个Front-Controller的MVC加JSON嘛！不过既然作为专题讲出来，想必肯定是在此方面经验丰富。于是我提了个一直困扰我的问题：在一个拥有复杂交互的系统中（想象一个拥有几十个对话框的CRM系统），各种Ajax事件会非常多，此时如何管理这些事件就成了一个比较麻烦的事情。可惜可惜，看起来Hedger对这个问题也没什么经验。另外不知道是不是因为年轻气盛的缘故，Hedger给人一种盛气凌人的感觉，交谈起来很不舒服。并且当我听到他宣称Prototype和jQuery“不适合企业级应用”时，我也就没兴趣再问下去了。

有趣的是，我站在台上提问的照片，上了cnBeta（下图就是），哈哈！

最后一场是年轻有位的Yahoo!资深工程师章亦春带来的“Nifty web apps on an OpenResty”，因为有丰富的Perl经验和背景，章给我的感觉是新一代的Unix hacker。他的OpenResty框架能够让开发人员更关注于客户端（浏览器端）编程，而把服务器端变为一个单纯的API提供者和数据源。这个想法本身倒是不坏，我只是不明白其应用场景是怎样的，究竟是怎样的原始需求催生了这个框架呢？另外，OpenResty完全使用Javascript来CRUD数据，并操控各种浏览器行为，此时性能如何保障？可能由于时间的关系，章当时的回答并没有解决上述问题。

此外，OpenResty中的“Resty”表现在何处？这也是当时我没能领会的。从演讲时那个留言板的例子来看，在翻页时URL始终为http://server/path/to/posts.html（因为都是通过JSON来更新其中数据的），恐怕类似http://server/path/to/posts/page3.html这样的URL更加Rest化吧！章同学看到本文不妨解答一下 ：）

本届D2上虽然演讲数量不多，但质量都比较高。希望下届的D2能够以收费的形式来举办，以期进一步提升其素质。

今天使用我写的jQuery Countdown Plugin时，遇到一个特殊的需求：要停止正在进行的倒计时。

Google了一下，发现window.clearTimeout可以做这事儿，但要求首先获得window.setTimeout的句柄，我在写这个plugin时并没有考虑这点，又不想加个句柄变量到jQuery对象中，于是再度Google，并发现了一个window.clearTimeout的很奇怪的用法，可以自动获得句柄：

window.clearTimeout(setTimeout("0")-1);

这条语句确实能够满足我的需求，可我不明白这是什么意思，哪位高手能给解释下？

根据这个发现，我顺便更新了plugin－加了个stop()方法，详细用法和下载见这里。

此外一个有趣的现象就是：在IE和FF下，window.setTimeout返回的句柄不同。在IE下，它是一个8位的数字，并且每次刷新页面时这个数字以3递增；在FF下，它是个各位的数字，并且刷新时不会有变化。

写了一个简单的倒计时（countdown）插件，用法非常简单：

$('div.countdown').countdown({seconds: 3,callback: 'helloWorld()'});

上例中，这个插件会在div.countdown中插入3秒钟的倒计时，直到0为止并调用helloWorld()这个函数。

这个插件有两个选项：

• seconds - 从多少秒开始倒计时；
• callback - 可选，倒计时结束时执行的回调函数。

目前的版本是0.2，下载地址如下：

• jquery.countdown.js，2kb
• jquery.countdown.min.js，1kb

更新记录：

0.2。加入了stop()方法，可以停止一个正在进行中的倒计时。

我正在阅读《Pro CSS and HTML Design Pattern》一书，下面是对HTML Structure一章的读书笔记。

纵览

这本书中很多概念和通常意义上的不同，下面的图片是我根据这本书HTML Structure部分的内容整理出来的，点击放大：

dl、dt和dd

从结构上说，定义列表中所有的术语都是同义词，所有的定义都是对这些术语的不同解释（"Structurally, a definition list implies all its terms are synonyms and all its definitions are alternate definitions of its terms")。这句话令我百思不得其解：dt标签所包含的术语怎么会是同义词？书里面继续解释道：HTML规范也指出定义列表也可以有更广泛的应用，比如列出演讲者和他们的演讲主题。如果这个例子没有弄错的话，我想作者使用“同义词（synonym）”的初衷，是想表达dt在逻辑上层面的一致性，而非内容上的一致性。

colgroup和col

老实说，这两个标签我从来没用过，恐怕连听说都是第一次。稍微Google了一下，发现了一篇名为“理解表格二：其他表格相关标签及属性”的文章，详细深入的介绍了这两个标签。作者水平很不错，推荐去他的blog看看。

W3C规范中block-level和inline elements的区别

W3C Recommendation中的7.5.3一节简要介绍了block-level和inline elements的区别：

• 内容模型（Content model）

  基本上，block-level elements可以包含inline elements和其它的block-level elements，inline elements只包含数据和其它的inline elements。如此区分是为了突出这样的概念，即block elements比inline elements描绘更大的结构。

• 格式（Formatting）

  默认情况下，block-level elements的格式和inline elements的有所不同。block-level elements通常开启一个新行，而inline elements则不会如此。

• 方向性（Directionality）

  block-level elements和inline elements在继承方向信息时有所不同。这里的方向指的是文字书写方向，比如中文通常是由左向右，或由上向下。

block elements和内容的关系

block elements用来定义结构，它不能和内容在逻辑上并列；同理，内容必须呈现在block elements中。由于HTML的Docuemnt Type Definition语言的局限，HTML校验器一般无法检测出block elements和内容混杂的情况，因此在编写HTML时需小心。