性能是任何一個(gè)網(wǎng)站成功的關(guān)鍵，然而，如今日益豐富的內(nèi)容和大量使用 Ajax 的 Web 應(yīng)用程序已迫使瀏覽器達(dá)到其處理能力的極限。在最近舉行的O'Reilly Velocity 會(huì)議上，來(lái)自 Google 的工程專家 Colt McAnlis 和 Steve Soulders 分享了最新的前端優(yōu)化技術(shù)，包括“減少對(duì)瀏覽器 GC 垃圾回收機(jī)制的依賴”和“頁(yè)面預(yù)獲取”等。

Colt McAnlis 目前是 Google 公司的關(guān)注于原生客戶端的開(kāi)發(fā)工程師，在此之前他曾經(jīng)作為一名系統(tǒng)和圖形程序員就職于游戲行業(yè)的 Blizzard、Ensemble 和 Petroglyph 等公司。Colt 討論和解決了當(dāng)前移動(dòng) Web 開(kāi)發(fā)者們感到最棘手問(wèn)題之一：JavaScript 的性能。因?yàn)?JavaScript 解析引擎使用 GC (垃圾回收機(jī)制)管理內(nèi)存，所以基于 Web 的 JavaScript 應(yīng)用程序可能會(huì)遭遇性能問(wèn)題，尤其是在移動(dòng)客戶端上。McAnlis 告訴 Web 開(kāi)發(fā)者聽(tīng)眾: “你們不應(yīng)該依靠垃圾回收器。”

    GC 通過(guò)自動(dòng)將程序不再需要的內(nèi)存返回到操作系統(tǒng)來(lái)幫助程序員。不過(guò)用C和 C++ 等低級(jí)別的語(yǔ)言編寫(xiě)代碼來(lái)管理內(nèi)存是一個(gè)艱苦的過(guò)程，并且不管怎樣，這樣的語(yǔ)言不被瀏覽器所原生支持。

    許多 JavaScript Web 應(yīng)用存在的問(wèn)題是，JavaScript 引擎會(huì)在看似隨機(jī)的時(shí)間執(zhí)行其垃圾回收的例行任務(wù)，這樣會(huì)使得應(yīng)用程序暫時(shí)變慢。例如，視頻應(yīng)用的幀頻可能會(huì)降低，或者應(yīng)用程序執(zhí)行操作的時(shí)間可能會(huì)從標(biāo)準(zhǔn)的 3 至 5 毫秒跳躍到可引起人注意的 20 毫秒。

McAnlis 引用了一個(gè)研究結(jié)論說(shuō)，總體而言，若要讓 GC 在不被用戶察覺(jué)的情況下工作，系統(tǒng)內(nèi)存至少需要六倍于現(xiàn)在的設(shè)備所使用的內(nèi)存。而考慮到移動(dòng)設(shè)備有限的內(nèi)存與其運(yùn)行的需要大量?jī)?nèi)存的應(yīng)用程序的數(shù)量，這會(huì)是一個(gè)苛刻的要求。

    閉包是一種擴(kuò)大本地定義變量可用性的程序員友好型技術(shù)，其使用的增加加劇了這一問(wèn)題。例如，jQuery 是一種被廣泛使用的依靠閉包的 JavaScript 庫(kù)，其結(jié)果是在內(nèi)存分配中造成大量的揮霍。

當(dāng)提及閉包在其所消耗的內(nèi)存的量方面是多么的不可預(yù)測(cè)時(shí)，McAnlis 說(shuō):“閉包所引起的問(wèn)題嚇到我了。”他建議，為了提高性能并更好地管理內(nèi)存，開(kāi)發(fā)人員應(yīng)該使用一種類似于中間件庫(kù) Emscripten 所使用的方法，這種方法正被用于構(gòu)建高性能的 HTML5 Web 游戲。

    Emscripten 把用C和 C++ 編寫(xiě)的代碼轉(zhuǎn)換成 JavaScript, 使其可以從應(yīng)用程序自身內(nèi)部管理內(nèi)存。基于 Emscripten 的程序會(huì)預(yù)先從系統(tǒng)中分配出一塊內(nèi)存。程序員連同 Emscripten 一起決定何時(shí)不再需要內(nèi)存，并把這部分未使用的內(nèi)存歸還到其內(nèi)部的可用內(nèi)存中。JavaScript 引擎不對(duì)程序做任何垃圾回收工作，所以不會(huì)影響程序的性能。

McAnlis 說(shuō)，一般而言，利用這項(xiàng)技術(shù)編寫(xiě)的程序可比典型的 JavaScript 程序的運(yùn)行速率高兩至四倍，并免于遭受由于 GC 的操作而帶來(lái)的偶爾性能滯后。

Steve Soulders 負(fù)責(zé) Google 公司的 Web 性能和開(kāi)源組織。他是 Firebug 性能分析擴(kuò)展工具——YSlow 的創(chuàng)造者，也是O'ReillyWeb 性能與運(yùn)作會(huì)議 Velocity 的聯(lián)合主席。他曾經(jīng)在 Yahoo!擔(dān)任 Chief Performance。Steve 在另一個(gè)講座中，提到了部分新興瀏覽器技術(shù)，這些新興技術(shù)的作用在于頁(yè)面被用戶請(qǐng)求之前的預(yù)獲取。Soulders 解釋道，這個(gè)想法就是，瀏覽器應(yīng)該能夠在用戶請(qǐng)求頁(yè)面之前便預(yù)見(jiàn)到其可能想看的下一頁(yè)。“你不知道用戶的下一步會(huì)是什么，但是你能從他/她在剛剛請(qǐng)求的頁(yè)面上的意圖找到更多的線索”，Soulders 說(shuō)。然后他解釋了開(kāi)發(fā)利用這一知識(shí)的幾種技術(shù)。

開(kāi)發(fā)人員可以向一個(gè)頁(yè)面的超鏈接添加 HTML dns-pre-fetch, pre-fetch 和 pre-render 標(biāo)簽。一旦一個(gè)頁(yè)面被加載，此類標(biāo)簽可以在用戶請(qǐng)求之前，命令瀏覽器去獲取在這個(gè)原始頁(yè)面中被鏈接的頁(yè)面的部分內(nèi)容。dns-pre-fetch 標(biāo)記告訴瀏覽器查找 Web 頁(yè)面鏈接所指向的頁(yè)面的域名，pre-fetch 標(biāo)簽告訴瀏覽器抓取整個(gè)頁(yè)面，pre-render 告訴瀏覽器構(gòu)建整個(gè)頁(yè)面，就好像瀏覽器正在一個(gè)隱藏的選項(xiàng)卡上顯示這個(gè)頁(yè)面。當(dāng)被部署時(shí)，所有這三個(gè)種標(biāo)簽可以縮短請(qǐng)求 Web 頁(yè)面和顯示那個(gè)頁(yè)面的時(shí)間間隔。

Soulders 警告開(kāi)發(fā)者要明智地使用這些標(biāo)簽，因?yàn)樗鼈儠?huì)增加帶寬和處理器的使用率。但在許多情況下，例如在一個(gè)登陸或者顯示搜索結(jié)果的頁(yè)面上，有相當(dāng)高的可能性，用戶將點(diǎn)擊其于頁(yè)面上發(fā)現(xiàn)并已經(jīng)被交付的鏈接之一。不同的瀏覽器對(duì)于這些標(biāo)簽的支持各不相同，但大多數(shù)瀏覽器制造商似乎在向其即將到來(lái)的新版本添加對(duì)它們的支持。

瀏覽器本身也有一些加快網(wǎng)頁(yè)交付速度的方法，如 DNS 預(yù)解析和 TCP 預(yù)連接。利用 DNS 預(yù)解析，通過(guò)觀察用戶在導(dǎo)航欄中開(kāi)始鍵入的字母是什么，或者甚至通過(guò)例行獲取用戶最常訪問(wèn)的 Web 網(wǎng)站的 IP 地址等操作，瀏覽器可以預(yù)見(jiàn)到下一個(gè)將被訪問(wèn)的站點(diǎn)的域名。TCP 預(yù)連接通過(guò)類似的手段預(yù)見(jiàn)用戶的下一步行動(dòng)。Soulders 說(shuō)，它通過(guò)打開(kāi)端口并針對(duì)一個(gè)最終請(qǐng)求設(shè)置所有協(xié)議，來(lái)“預(yù)熱”與站點(diǎn)的連接。

提起網(wǎng)站優(yōu)化，許多前端開(kāi)發(fā)者會(huì)立刻想到 Yahoo 的網(wǎng)站優(yōu)化準(zhǔn)則，隨著研究和技術(shù)的不斷發(fā)展，規(guī)則也從最初的 14 條增長(zhǎng)到了如今的 34 條，但是最核心的一些基本原則依然被網(wǎng)站開(kāi)發(fā)者作為圣諭，包括：

    減少 HTTP 請(qǐng)求
    使用 CDN 技術(shù)
    設(shè)置 HTTP 文件頭過(guò)期和緩存控制字段
    啟用 Gzip 壓縮
    盡量把樣式表放在頁(yè)面頂部
    盡量把 Javascript 代碼放在頁(yè)面底部
    避免 CSS 表達(dá)式
    將 Javascript 和 CSS 外鏈
    減少 DNS 查找
    避免重定向
    刪除重復(fù)腳本
    配置 Etags
    緩存 Ajax
    ……