Google+開發團隊分享的5個提升網頁生成速度的經驗

發表於2011-12-01

大家好,我是Google+基礎架構團隊的工程師(Mark Knichel)。早在7月份,當Joseph Smarr開發出了Ask Me Anything欄目後,很多人都想知道一些關於Google+技術架構方面的資訊。我們幾個工程師覺得應該寫一些關於這個題目的文章,給大家分享。

對於Google+團隊,我們頭一個要認真處理的問題就是:頁面生成速度。在谷歌,我們十分在意速度,下面就是我們用來提升速度的5項技術。

1. 我們喜歡Closure

我們喜歡Closure。非常的。我們使用Closure類庫,模板以及編譯器來生成Google+所有頁面上的所有元素——包括驅動這些頁面的JavaScript。但真正讓我們獲得速度的是以下幾點:

— Closure模板即能用於Java也能用於JavaScript,生成的頁面即能在Server端執行,也能在瀏覽器裡執行。通過這種方式,內容總是能理解展現,我們還可以在後臺載入JavaScript(“修飾”頁面,在頁面元素上掛載事件監聽器)

— Closure能讓我們在寫JavaScript指令碼時仍然可以享用嚴格的型別和錯誤檢查,死程式碼清除,跨模組提示,以及其它的很多輔助優化便利。

(訪問 http://code.google.com/closure/ 來獲取更多關於Closure的資訊)

2. 在正確的時間正確的使用JavaScript

為了管理驅動Google+的JavaScript,我們把它分割成小的模組,這樣可以非同步的分別載入它們。你只需要下載最少的必須的模組。由兩種技術來實現這些:

— 客戶端儲存歷史瀏覽記錄的資訊(URL裡的字串資訊代表這你當前處在某個頁面上),用這種方法來調配JavaScript模組。

— 如果JavaScript沒有載入完成,這個頁面上的任何操作都會被禁止,直到載入完成。

這種技術框架也是Google+在客戶端頁面導航時避免重新載入頁面的技術基礎。

3. 頁面之間切換時避免重新整理頁面

一旦JavaScript被載入,所有的頁面內容都使用JavaScript生成,不需要再到伺服器端去取,這樣做效率更高些。我們設定了一個全域性 的監聽器,監聽所有標記的點選事件。如果允許的話,我們會把點選轉化成頁面內部的切換。如果條件不允許,客戶端會生成這個頁面,如果你在連結上使用滑鼠中 鍵或控制鍵的點選,我們會讓瀏覽器按常規連結開啟這個頁面。

頁面上錨標記總是指向一個常規的URL(例如,你在HTML5裡的歷史記錄裡的URL),這樣,你能容易的拷貝/分享這個頁面連結。

4. 部分(HTML)頁面塊重新整理

在客戶端,一旦我們接收到部分資料,我們就立即生成這塊內容,讓它可見,不必等到整個頁面載入後才能顯示。

為了實現這些,我們通過:

— 首次請求時,我們就把所有資料非同步的取回

— 只有在需要生成這部分頁面資料時,才會遇到延遲現象

這種技術也能讓我們儘早的載入CSS,JavaScript,圖片以及其它資源,使網站更快,響應效果更好。

5. iFrame是我們的朋友

為了能並行的載入JavaScript,避免瀏覽器卡住(http://goo.gl/lzGq8),我在頁面的body標記的頂部的一個Iframe里載入JavaScript。在iframe里載入JavaScript增加了程式碼的複雜度(通過Closure,我們很好的解決了這個問題),但是為了速度的提升,值得這樣做。

做一個解釋,你們也許注意到了我們是使用XHR,而不是使用style標記來載入CSS的 – 這並不是我們做的優化,這是做是因為我們達到了IE瀏覽器裡每個樣式表檔案裡CSS選擇器的上限!

最後註解

這些只是整個Google+面紗下事情如何運轉的一小部分介紹,我們以後會寫更多像這樣的文章。請在評論裡留下你的想法!

譯者注:Mark Knichel釋出了這篇文章後,很多人在評論裡表達了不同的觀點,有些人認為iFrame是一種應該被淘汰的技術,有些人認為Closure template影響了程式的可維護性。但我反過來一些,這似乎正說明了谷歌的程式設計師在開發上享有很高的自由度,他們可以使用任何他們自己喜歡的技術。

相關文章