欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

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

程序员文章站 2022-06-02 08:07:54
...
三年前,当我还在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 ]