Google專家分享網(wǎng)站優(yōu)化最新技術(shù)

時間：2023-08-15 14:36:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-08-15 14:36:01 來源：網(wǎng)站運(yùn)營

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

Colt McAnlis 目前是 Google 公司的關(guān)注于原生客戶端的開發(fā)工程師，在此之前他曾經(jīng)作為一名系統(tǒng)和圖形程序員就職于游戲行業(yè)的 Blizzard、Ensemble 和 Petroglyph 等公司。Colt 討論和解決了當(dāng)前移動 Web 開發(fā)者們感到最棘手問題之一：JavaScript 的性能。因為 JavaScript 解析引擎使用 GC (垃圾回收機(jī)制)管理內(nèi)存，所以基于 Web 的 JavaScript 應(yīng)用程序可能會遭遇性能問題，尤其是在移動客戶端上。McAnlis 告訴 Web 開發(fā)者聽眾: “你們不應(yīng)該依靠垃圾回收器?！?br>
GC 通過自動將程序不再需要的內(nèi)存返回到操作系統(tǒng)來幫助程序員。不過用C和 C++ 等低級別的語言編寫代碼來管理內(nèi)存是一個艱苦的過程，并且不管怎樣，這樣的語言不被瀏覽器所原生支持。

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

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

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

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

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

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

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

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

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

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

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

減少 HTTP 請求

使用 CDN 技術(shù)

設(shè)置 HTTP 文件頭過期和緩存控制字段

啟用 Gzip 壓縮

盡量把樣式表放在頁面頂部

盡量把 Javascript 代碼放在頁面底部

避免 CSS 表達(dá)式

將 Javascript 和 CSS 外鏈

減少 DNS 查找

避免重定向

刪除重復(fù)腳本

配置 Etags

緩存 Ajax