Google專家分享網站優化最新技術
性能是任何一個網站成功的關鍵，然而，如今日益豐富的內容和大量使用 Ajax 的 Web 應用程序已迫使瀏覽器達到其處理能力的極限。在最近舉行的O'Reilly Velocity 會議上，來自 Google 的工程專家 Colt McAnlis 和 Steve Soulders 分享了最新的前端優化技術，包括“減少對瀏覽器 GC 垃圾回收機制的依賴”和“頁面預獲取”等。
Colt McAnlis 目前是 Google 公司的關注于原生客戶端的開發工程師，在此之前他曾經作為一名系統和圖形程序員就職于游戲行業的 Blizzard、Ensemble 和 Petroglyph 等公司。Colt 討論和解決了當前移動 Web 開發者們感到最棘手問題之一：JavaScript 的性能。因為 JavaScript 解析引擎使用 GC (垃圾回收機制)管理內存，所以基于 Web 的 JavaScript 應用程序可能會遭遇性能問題，尤其是在移動客戶端上。McAnlis 告訴 Web 開發者聽眾: “你們不應該依靠垃圾回收器。”
GC 通過自動將程序不再需要的內存返回到操作系統來幫助程序員。不過用C和 C++ 等低級別的語言編寫代碼來管理內存是一個艱苦的過程，并且不管怎樣，這樣的語言不被瀏覽器所原生支持。
許多 JavaScript Web 應用存在的問題是，JavaScript 引擎會在看似隨機的時間執行其垃圾回收的例行任務，這樣會使得應用程序暫時變慢。例如，視頻應用的幀頻可能會降低，或者應用程序執行操作的時間可能會從標 準的 3 至 5 毫秒跳躍到可引起人注意的 20 毫秒。
</blockquote>McAnlis 引用了一個研究結論說，總體而言，若要讓 GC 在不被用戶察覺的情況下工作，系統內存至少需要六倍于現在的設備所使用的內存。而考慮到移動設備有限的內存與其運行的需要大量內存的應用程序的數量，這會是一個苛刻的要求。
閉包是一種擴大本地定義變量可用性的程序員友好型技術，其使用的增加加劇了這一問題。例如，jQuery 是一種被廣泛使用的依靠閉包的 JavaScript 庫，其結果是在內存分配中造成大量的揮霍。
</blockquote>當提及閉包在其所消耗的內存的量方面是多么的不可預測時，McAnlis 說:“閉包所引起的問題嚇到我了。”他建議，為了提高性能并更好地管理內存，開發人員應該使用一種類似于中間件庫 Emscripten 所使用的方法，這種方法正被用于構建高性能的 HTML5 Web 游戲。
Emscripten 把用C和 C++ 編寫的代碼轉換成 JavaScript, 使其可以從應用程序自身內部管理內存。基于 Emscripten 的程序會預先從系統中分配出一塊內存。程序員連同 Emscripten 一起決定何時不再需要內存，并把這部分未使用的內存歸還到其內部的可用內存中。JavaScript 引擎不對程序做任何垃圾回收工作，所以不會影響程序的性能。
</blockquote>McAnlis 說，一般而言，利用這項技術編寫的程序可比典型的 JavaScript 程序的運行速率高兩至四倍，并免于遭受由于 GC 的操作而帶來的偶爾性能滯后。
Steve Soulders 負責 Google 公司的 Web 性能和開源組織。他是 Firebug 性能分析擴展工具——YSlow 的創造者，也是O'ReillyWeb 性能與運作會議 Velocity 的聯合主席。他曾經在 Yahoo!擔任 Chief Performance。Steve 在另一個講座中，提到了部分新興瀏覽器技術，這些新興技術的作用在于頁面被用戶請求之前的預獲取。Soulders
解釋道，這個想法就是，瀏覽器應該能夠在用戶請求頁面之前便預見到其可能想看的下一頁。“你不知道用戶的下一步會是什么，但是你能從他/她在剛剛請求的頁 面上的意圖找到更多的線索”，Soulders 說。然后他解釋了開發利用這一知識的幾種技術。</p>
開發人員可以向一個頁面的超鏈接添加 HTML dns-pre-fetch, pre-fetch 和 pre-render 標簽。一旦一個頁面被加載，此類標簽可以在用戶請求之前，命令瀏覽器去獲取在這個原始頁面中被鏈接的頁面的部分內容。dns-pre-fetch 標記告訴瀏覽器查找 Web 頁面鏈接所指向的頁面的域名，pre-fetch 標簽告訴瀏覽器抓取整個頁面，pre-render 告訴瀏覽器構建整個頁面，就好像瀏覽器正在一個隱藏的選項卡上顯示這個頁面。當被部署時，所有這三個種標簽可以縮短請求 Web 頁面和顯示那個頁面的時間間隔。
Soulders 警告開發者要明智地使用這些標簽，因為它們會增加帶寬和處理器的使用率。但在許多情況下，例如在一個登陸或者顯示搜索結果的頁面上，有相當高的可能性，用 戶將點擊其于頁面上發現并已經被交付的鏈接之一。不同的瀏覽器對于這些標簽的支持各不相同，但大多數瀏覽器制造商似乎在向其即將到來的新版本添加對它們的 支持。
瀏覽器本身也有一些加快網頁交付速度的方法，如 DNS 預解析和 TCP 預連接。利用 DNS 預解析，通過觀察用戶在導航欄中開始鍵入的字母是什么，或者甚至通過例行獲取用戶最常訪問的 Web 網站的 IP 地址等操作，瀏覽器可以預見到下一個將被訪問的站點的域名。TCP 預連接通過類似的手段預見用戶的下一步行動。Soulders 說，它通過打開端口并針對一個最終請求設置所有協議，來“預熱”與站點的連接。
提起網站優化，許多前端開發者會立刻想到 Yahoo 的網站優化準則，隨著研究和技術的不斷發展，規則也從最初的 14 條增長到了如今的 34 條，但是最核心的一些基本原則依然被網站開發者作為圣諭，包括：
- 減少 HTTP 請求
- 使用 CDN 技術
- 設置 HTTP 文件頭過期和緩存控制字段
- 啟用 Gzip 壓縮
- 盡量把樣式表放在頁面頂部
- 盡量把 Javascript 代碼放在頁面底部
- 避免 CSS 表達式
- 將 Javascript 和 CSS 外鏈
- 減少 DNS 查找
- 避免重定向
- 刪除重復腳本
- 配置 Etags
- 緩存 Ajax
- ……
</ul>來自: InfoQ<span id="shareA4" class="fl"> </span>本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！