Cal Henderson 是大名鼎鼎的 Flickr 網(wǎng)站的開(kāi)發(fā)者之一.在一篇名為 Serving JavaScript Fast 的文章中,他介紹了用于 Flickr 站點(diǎn)應(yīng)用優(yōu)化的技巧,讀罷感覺(jué)獲益良多."嚼一下別人的饃",概括一下該文的主要內(nèi)容.
Flickr 是 Web 2.0 的代表站點(diǎn)。面對(duì)的網(wǎng)絡(luò)問(wèn)題除了一般 Web 站點(diǎn)都會(huì)有的內(nèi)容優(yōu)化之外, 還有必須要靈活處理 JavaScript 與 CSS 的頻繁變化后部署分發(fā)帶來(lái)的復(fù)雜性。
設(shè)定文件大小的策略 首先面臨的一個(gè)問(wèn)題是把所有的 JavaScript 與 CSS 放到一個(gè)文件中好呢,還是分割成多個(gè)文件 ? 從減少網(wǎng)絡(luò)請(qǐng)求的角度上考慮, 前者更好,后者差。但是從并行的角度考慮, IE 與 Firefox 默認(rèn)情況下都只能同時(shí)從一個(gè)域請(qǐng)求兩個(gè)資源. 這會(huì)在很多情況下給用戶帶來(lái)不良的使用體驗(yàn)--必須所有的文件都下載完畢才可以看到像樣的頁(yè)面. Flickr 采用了折衷的辦法--在保持文件數(shù)量盡可能少的情況下,把 JavaScript 與 CSS 分成多個(gè)子文件. 這在開(kāi)發(fā)上帶來(lái)了復(fù)雜性,但是對(duì)性能的收益是巨大的。
壓縮的優(yōu)化問(wèn)題 毫無(wú)疑問(wèn),對(duì)站點(diǎn)內(nèi)容進(jìn)行壓縮是一個(gè)比較常用的 Web 優(yōu)化手段.但是并不一定都能達(dá)到理想的效果.原因在于 mod-gzip 模塊不但消耗服務(wù)器端 CPU 資源,也消耗客戶端 CPU 資源. 而且, mod_gzip 壓縮文件后創(chuàng)建的臨時(shí)文件是放到磁盤(pán)上的,這也會(huì)給磁盤(pán) IO 帶來(lái)嚴(yán)重的問(wèn)題. Flickr 采用的是 Httpd 2.x 以后支持的 mod_deflate 模塊.壓縮操作都在內(nèi)存中進(jìn)行.mod_deflate 在 Httpd 1.x 是不可用的, 不過(guò)可以通過(guò)創(chuàng)建 RAM 盤(pán)的方式來(lái)間接提高性能.
當(dāng)然, mod_gzip 到也不是一無(wú)是處, 對(duì)于預(yù)壓縮的文件, 還是有好處的. 而且, 采用壓縮的時(shí)候,也要注意策略. 圖片文件壓縮就沒(méi)什么必要了(Flickr 上圖像多, 而且壓縮得不到什么好處). Flickr 只對(duì) JavaScript 和 CSS 進(jìn)行壓縮. mod_gzip 新一點(diǎn)的版本能夠自動(dòng)通過(guò)配置 mod_gzip_update_static 選項(xiàng)自動(dòng)處理 預(yù)壓縮的文件. Cal 也指出這個(gè)特性在一些舊版本的瀏覽器上會(huì)出問(wèn)題.
壓縮的另一個(gè)主要手段是內(nèi)容的壓縮. 針對(duì) JavaScript 可以進(jìn)行通過(guò)減少注釋、合并空格、使用緊湊的語(yǔ)法等小技巧(Google 的所有腳本都非常難讀,而且非常緊湊,思想類(lèi)似).當(dāng)然,經(jīng)過(guò)這樣處理的 JavaScript 可能帶了很多括號(hào)不容易解析,Flickr 使用了 Dojo Compressor 來(lái)構(gòu)建解析樹(shù)。Dojo Compressor 開(kāi)銷(xiāo)很低,而且對(duì)于最終用戶是透明的. JavaScript 的處理方法介紹過(guò),CSS 處理則相對(duì)簡(jiǎn)單.通過(guò)簡(jiǎn)單的正則表達(dá)式替換(比如把多個(gè)空格替換為一個(gè)空格符), 最高可以獲得 50% 的壓縮比。
Caching 的優(yōu)化 Flickr 的開(kāi)發(fā)者充分利用了 Http 1.1 規(guī)范定義的 Etag 與 Last-Modified 機(jī)制 來(lái)提高 Caching 的效率. 值得注意的是,Cal 介紹了一個(gè)在負(fù)載均衡條件下的 e-Tag 小技巧. 即可以設(shè)定 Apache 通過(guò)文件調(diào)整時(shí)間與文件大小獲得 E-Tag ,而默認(rèn)情況下, Apache 是通過(guò)文件節(jié)點(diǎn)獲取 e-Tag 的。當(dāng)然,這也不是很完美,因?yàn)闀?huì)影響 if-modified-since 。
靈活運(yùn)用 mod_rewrite 據(jù)說(shuō) Flickr 網(wǎng)站應(yīng)用是進(jìn)行每日構(gòu)建的(Daily Build)。 如果沒(méi)有一個(gè)靈活的機(jī)制恐怕這是不可想象的。而且,在 Flickr 這樣的站點(diǎn), 內(nèi)容的修改同步的處理都是很讓人頭疼的難題. 他們的利器是 mod_rewrite 的靈活運(yùn)用。通過(guò)配置 URL 重寫(xiě)規(guī)則,很容易切換到不同的環(huán)境下。聽(tīng)起來(lái)很簡(jiǎn)單, 但是沒(méi)有一定的 Web 技術(shù)功力談何容易做到 ?!
通過(guò)這幾個(gè)主要方法的運(yùn)用,我們看到了如夢(mèng)幻一般高性能的 Flickr .