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

开发 前端
因为我同意他的观点,并且我正在找新的任务,于是就决定接受这个挑战,让YouTube的视频播放页面的体积减到100KB以下。那天晚上从旧金山回家的火车上,我编写了一个基本的原型。

[[59826]]

三年前,当我还在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 ]

原文链接:http://www.aqee.net/page-weight-matters/

责任编辑:张伟 来源: 外刊IT评论网
相关推荐

2023-03-29 09:37:49

视频播放器应用鸿蒙

2010-03-09 08:44:59

HTML 5YouTube

2023-03-29 09:32:15

视频播放器应用鸿蒙

2010-01-18 15:39:41

互联网

2020-03-10 10:43:21

机器学习人工智能计算机

2017-01-15 14:52:15

Android交互动画视觉效果

2010-01-21 13:34:31

HTML 5Youtube

2016-12-09 08:56:54

2016-11-22 08:50:23

2017-05-02 09:12:20

QQ空间

2009-05-22 18:51:23

2017-10-25 20:42:13

频播放量秒拍链路优化

2009-07-03 18:12:49

JSP页面

2022-04-06 14:25:19

视频跨页面技术

2012-08-27 13:44:01

Google

2023-06-18 07:51:27

2023-02-07 09:09:48

视频文件存储

2011-11-22 09:32:28

HTML 5

2009-07-06 18:23:56

Struts和JSPJSP页面

2012-07-27 15:47:18

YouTube
点赞
收藏

51CTO技术栈公众号