[[59826]]

三年前，當(dāng)我還在YouTube做一名web程序員時(shí)，有一位資深的工程師發(fā)了一通牢騷，說(shuō)播放視頻的頁(yè)面體積太大。這個(gè)頁(yè)面體積已經(jīng)膨脹到了高達(dá) 1.2MB，包含有數(shù)十次的請(qǐng)求。這個(gè)工程師公開(kāi)的宣稱說(shuō)，“如果他們Quake能在100KB的體積下克隆出我們的頁(yè)面，我們沒(méi)有理由達(dá)不到這個(gè)體 積！”因?yàn)槲彝馑挠^點(diǎn)，并且我正在找新的任務(wù)，于是就決定接受這個(gè)挑戰(zhàn)，讓YouTube的視頻播放頁(yè)面的體積減到100KB以下。那天晚上從舊金山回家的火車上，我編寫(xiě)了一個(gè)基本的原型。我決定限制頁(yè)面上的功能數(shù)，只保留一個(gè)標(biāo)題，一個(gè)視頻播放器，五個(gè)相關(guān)視頻，一個(gè)分享按鈕，一個(gè)插旗工具和十條評(píng) 論——是通過(guò)AJAX加載的。我把這個(gè)任務(wù)命名為“羽毛”。

即使這樣一個(gè)有限的功能，頁(yè)面的體積仍然達(dá)到250KB。我深入代碼查看，發(fā)現(xiàn)我們的優(yōu)化工具(比如閉包編譯工具)無(wú)法清理這個(gè)頁(yè)面上實(shí)際沒(méi)有使用 的代碼(也許不該責(zé)備這些工具，這種情況下任何工具都做不到)。想進(jìn)一步減少代碼，唯一的方法就是手工優(yōu)化CSS，JavaScript和圖片。經(jīng)過(guò)辛苦 的三天努力，我已經(jīng)把頁(yè)面做到了相當(dāng)?shù)木荩匀粵](méi)有低于100KB。因?yàn)槲覄倓倢?xiě)完了一個(gè)HTML5視頻播放器，我決定用它來(lái)替換體積笨重的 Flash播放器。砰！98KB，只有14個(gè)請(qǐng)求。對(duì)這個(gè)頁(yè)面設(shè)置了一些基本監(jiān)視后，我們對(duì)一小部分人開(kāi)放了這個(gè)頁(yè)面。

經(jīng)過(guò)了一周數(shù)據(jù)的收集，數(shù)據(jù)有了，但它們卻讓我困惑。羽毛版下的頁(yè)面的總體平均延遲時(shí)間實(shí)際上是增加的。我減少了總的頁(yè)面體積，減少了頁(yè)面請(qǐng)求的次數(shù)，但數(shù)據(jù)顯示在加載羽毛視頻播放頁(yè)卻花了更長(zhǎng)的時(shí)間。這是不可能的事情。深入挖掘數(shù)據(jù)，經(jīng)過(guò)在瀏覽器上的反復(fù)試驗(yàn)，沒(méi)有任何結(jié)果。我基本上要放棄這個(gè)版本了，我的信仰幾乎被完全擊潰，正在此時(shí)，一個(gè)同事發(fā)現(xiàn)了其中的奧秘：地理因素。

當(dāng)我們標(biāo)注了數(shù)據(jù)的地理信息，把所有信息按區(qū)域劃分進(jìn)行對(duì)比，我們看到了地區(qū)，比如東南亞，南美，非洲，甚至西伯利亞等地在流量上呈現(xiàn)的不對(duì)稱增加。進(jìn)一步調(diào)查揭示，在這些地區(qū)，羽毛版的頁(yè)面的平均加載時(shí)間超過(guò)2分鐘！這意味著，一個(gè)普通的視頻，大概1兆左右，會(huì)需要20分鐘來(lái)加載！人們?yōu)榱说却@個(gè)頁(yè)面就如此痛苦，更別提視頻了。可縱觀這些地區(qū)，他們之前根本無(wú)法觀看YouTube，因?yàn)榈攘撕芫靡部床坏绞裁础６谟鹈嫦拢M管要等2分鐘才能看到視頻的第一幀，但不管怎樣，事實(shí)上是可以看到了。在過(guò)去的一周里，羽毛版在這個(gè)地區(qū)很受歡迎，所以我們的數(shù)據(jù)被他們弄的完全不平均了。大量以前不能觀看YouTube的人現(xiàn)在突然可以了。

通過(guò)開(kāi)發(fā)羽毛，我學(xué)到了一個(gè)關(guān)于世界其它地方網(wǎng)絡(luò)狀況的很有價(jià)值的認(rèn)識(shí)。我們很多人有幸能生活在一個(gè)有高速寬帶的地方，但實(shí)際上仍然有很大的區(qū)域不是這樣。通過(guò)讓客戶端的代碼變少變輕，你就能完全開(kāi)啟一個(gè)新的市場(chǎng)。

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

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