Google+開發團隊分享經驗

本文是從 Mark Knichel 這篇文章翻譯而來。

大家好，我是 Google+ 基礎架構團隊的工程師。早在 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 影響了程序的可維護性。但我反過來一些，這似乎正說明了谷歌的程序員在開發上享有很高的自由度，他們可以使用任何他們自己喜歡的技術。