我优化YouTube视频播放页面的故事

 

三年前，当我还在YouTube做一名web程序员时，有一位资深的工程师发了一通牢骚，说播放视频的页面体积太大。这个页面体积已经膨胀到了高达 1.2MB，包含有数十次的请求。这个工程师公开的宣称说，“如果他们Quake能在100KB的体积下克隆出我们的页面，我们没有理由达不到这个体 积！”因为我同意他的观点，并且我正在找新的任务，于是就决定接受这个挑战，让YouTube的视频播放页面的体积减到100KB以下。那天晚上从旧金山 回家的火车上，我编写了一个基本的原型。我决定限制页面上的功能数，只保留一个标题，一个视频播放器，五个相关视频，一个分享按钮，一个插旗工具和十条评 论——是通过AJAX加载的。我把这个任务命名为“羽毛”。

即使这样一个有限的功能，页面的体积仍然达到250KB。我深入代码查看，发现我们的优化工具(比如闭包编译工具)无法清理这个页面上实际没有使用 的代码(也许不该责备这些工具，这种情况下任何工具都做不到)。想进一步减少代码，唯一的方法就是手工优化CSS，JavaScript和图片。经过辛苦 的三天努力，我已经把页面做到了相当的精瘦，但仍然没有低于100KB。因为我刚刚写完了一个HTML5视频播放器，我决定用它来替换体积笨重的 Flash播放器。砰！98KB，只有14个请求。对这个页面设置了一些基本监视后，我们对一小部分人开放了这个页面。

经过了一周数据的收集，数据有了，但它们却让我困惑。羽毛版下的页面的总体平均延迟时间实际上是增加的。我减少了总的页面体积，减少了页面请求的次数，但数据显示在加载羽毛视频播放页却花了更长的时间。这是不可能的事情。深入挖掘数据，经过在浏览器上的反复试验，没有任何结果。我基本上要放弃这个版本了，我的信仰几乎被完全击溃，正在此时，一个同事发现了其中的奥秘：地理因素。

当我们标注了数据的地理信息，把所有信息按区域划分进行对比，我们看到了地区，比如东南亚，南美，非洲，甚至西伯利亚等地在流量上呈现的不对称增加。进一步调查揭示，在这些地区，羽毛版的页面的平均加载时间超过2分钟！这意味着，一个普通的视频，大概1兆左右，会需要20分钟来加载！人们为了等待这个页面就如此痛苦，更别提视频了。可纵观这些地区，他们之前根本无法观看YouTube，因为等了很久也看不到什么。而在羽毛版下，尽管要等2分钟才能看到视频的第一帧，但不管怎样，事实上是可以看到了。在过去的一周里，羽毛版在这个地区很受欢迎，所以我们的数据被他们弄的完全不平均了。大量以前不能观看YouTube的人现在突然可以了。

通过开发羽毛，我学到了一个关于世界其它地方网络状况的很有价值的认识。我们很多人有幸能生活在一个有高速宽带的地方，但实际上仍然有很大的区域不是这样。通过让客户端的代码变少变轻，你就能完全开启一个新的市场。

[本文英文原文链接：Page Weight Matters ]