Google+開發(fā)團(tuán)隊(duì):提升頁面生成速度5大法寶
對(duì)于Google+團(tuán)隊(duì),我們頭一個(gè)要認(rèn)真處理的問題就是:頁面生成速度。在谷歌,我們十分在意速度,下面就是我們用來提升速度的5項(xiàng)技術(shù)。
1. 我們喜歡Closure
我們喜歡Closure。非常的。我們使用Closure類庫,模板以及編譯器來生成Google+所有頁面上的所有元素——包括驅(qū)動(dòng)這些頁面的JavaScript。但真正讓我們獲得速度的是以下幾點(diǎn):
— Closure模板即能用于Java也能用于JavaScript,生成的頁面即能在Server端運(yùn)行,也能在瀏覽器里運(yùn)行。通過這種方式,內(nèi)容總是能理解展現(xiàn),我們還可以在后臺(tái)加載JavaScript(“修飾”頁面,在頁面元素上掛載事件監(jiān)聽器)
— Closure能讓我們?cè)趯慗avaScript腳本時(shí)仍然可以享用嚴(yán)格的類型和錯(cuò)誤檢查,死代碼清除,跨模塊提示,以及其它的很多輔助優(yōu)化便利。
(訪問 http://code.google.com/closure/ 來獲取更多關(guān)于Closure的信息)
2. 在正確的時(shí)間正確的使用JavaScript
為了管理驅(qū)動(dòng)Google+的JavaScript,我們把它分割成小的模塊,這樣可以異步的分別加載它們。你只需要下載最少的必須的模塊。由兩種技術(shù)來實(shí)現(xiàn)這些:
◆ 客戶端保存歷史瀏覽記錄的信息(URL里的字符串信息代表這你當(dāng)前處在某個(gè)頁面上),用這種方法來調(diào)配JavaScript模塊。
◆ 如果JavaScript沒有加載完成,這個(gè)頁面上的任何操作都會(huì)被禁止,直到加載完成。
這種技術(shù)框架也是Google+在客戶端頁面導(dǎo)航時(shí)避免重新加載頁面的技術(shù)基礎(chǔ)。
3. 頁面之間切換時(shí)避免刷新頁面
一旦JavaScript被加載,所有的頁面內(nèi)容都使用JavaScript生成,不需要再到服務(wù)器端去取,這樣做效率更高些。我們?cè)O(shè)置了一個(gè)全局 的監(jiān)聽器,監(jiān)聽所有標(biāo)記的點(diǎn)擊事件。如果允許的話,我們會(huì)把點(diǎn)擊轉(zhuǎn)化成頁面內(nèi)部的切換。如果條件不允許,客戶端會(huì)生成這個(gè)頁面,如果你在鏈接上使用鼠標(biāo)中 鍵或控制鍵的點(diǎn)擊,我們會(huì)讓瀏覽器按常規(guī)鏈接打開這個(gè)頁面。
頁面上錨標(biāo)記總是指向一個(gè)常規(guī)的URL(例如,你在HTML5里的歷史記錄里的URL),這樣,你能容易的拷貝/分享這個(gè)頁面鏈接。
4. 部分(HTML)頁面塊刷新
在客戶端,一旦我們接收到部分?jǐn)?shù)據(jù),我們就立即生成這塊內(nèi)容,讓它可見,不必等到整個(gè)頁面加載后才能顯示。
為了實(shí)現(xiàn)這些,我們通過:
◆ ***請(qǐng)求時(shí),我們就把所有數(shù)據(jù)異步的取回
◆ 只有在需要生成這部分頁面數(shù)據(jù)時(shí),才會(huì)遇到延遲現(xiàn)象
這種技術(shù)也能讓我們盡早的加載CSS,JavaScript,圖片以及其它資源,使網(wǎng)站更快,響應(yīng)效果更好。
5. iFrame是我們的朋友
為了能并行的加載JavaScript,避免瀏覽器卡住(http://goo.gl/lzGq8),我在頁面的body標(biāo)記的頂部的一個(gè)Iframe里加載JavaScript。在iframe里加載JavaScript增加了代碼的復(fù)雜度(通過Closure,我們很好的解決了這個(gè)問題),但是為了速度的提升,值得這樣做。
做一個(gè)解釋,你們也許注意到了我們是使用XHR,而不是使用style標(biāo)記來加載CSS的 – 這并不是我們做的優(yōu)化,這是做是因?yàn)槲覀冞_(dá)到了IE瀏覽器里每個(gè)樣式表文件里CSS選擇器的上限!
***注解
這些只是整個(gè)Google+面紗下事情如何運(yùn)轉(zhuǎn)的一小部分介紹,我們以后會(huì)寫更多像這樣的文章。請(qǐng)?jiān)谠u(píng)論里留下你的想法!
譯者注:Mark Knichel發(fā)布了這篇文章后,很多人在評(píng)論里表達(dá)了不同的觀點(diǎn),有些人認(rèn)為iFrame是一種應(yīng)該被淘汰的技術(shù),有些人認(rèn)為Closure template影響了程序的可維護(hù)性。但我反過來一些,這似乎正說明了谷歌的程序員在開發(fā)上享有很高的自由度,他們可以使用任何他們自己喜歡的技術(shù)。
原文:http://www.aqee.net/google-plus-infrastructure-team-talk-tech/
【編輯推薦】