何俊談阿里巴巴前端性能優化最佳實踐-筆記

網站頁面前端優化對網站核心頁面基於Wise load的原則作定點性能優化，減小HTTP請求，減小DNS請求時間，減小頁面DOM的數量，作一些圖片、JS壓縮等。減小HTTP請求方案：阿里開發了自動合併CSS和JS靜態文件的框架，對於減小頁面DNS數方面採用前端延遲加載框架，主要負責頁面加載時只加載首屏，用戶滾動頁面時才加載二屏或三屏，這樣對網站的性能包括流量都是很大的提高和節約。

Web I/O（高併發）方面的優化，使用高性能Web服務器，另外在冬天頁面處理上，儘量地減小冬天頁面所佔比例，採用一些動態頁面靜態化技術，例如反向代理技術，頁面片斷的局部緩存像ESI（Edge Side Include）這樣的技術，加快Web請求。

小知識：ESI是一種數據緩衝/緩存服務器，它提供將Web網頁的部分（這裏指頁面的片斷）進行緩衝/緩存的技術及服務。由Oracle公司和Akamai Technologies公司制定規格，Akamai公司提供對應的信息傳送的服務。

特色：

以往的數據緩衝服務器和信息傳送服務以頁爲單位制做,複製到數據緩衝服務器中，因爲其對應要求而進行傳送,因此向網絡軟件等根據用戶的輸入,內容會動態地轉變的網頁傳送信息的時候,就很可貴到高效率。

因爲在ESI中是部分地緩衝網頁，使用基於XML的標記語言，指示想要緩衝的頁面部分。由此，頁面內分爲動態地變動的部分和靜態的不變動的部分(網站內的共通菜單等)，只將靜態的部分有效地發送到服務器中。

應用調優，大部分大部分Web應用的性能瓶頸都來自咱們程序員實際編碼中一些很差的寫法。這點咱們能夠經過一些profile工具定位性能瓶頸，例如應用堵塞XML解析，咱們可以拿到性能瓶頸列表，而後再針對這些性能瓶頸作一些性能調優。在阿里巴巴，咱們線上應用已經部署了一些基於字節碼加強進行網站實時監控的腳本，它能夠實時抓取應用堆棧以及一些運行狀況，這樣咱們第一時間就能掌握到應用的瓶頸，從而作一些有針對性的調優。

目前在數據庫方面咱們遇到的問題是海量數據的爆炸性增加，在這方面你們的思路基本是一致的，無外乎是數據水平切分和垂直切分。

在性能調優方面的一些最佳實踐，包括特別須要注意的地方？

第一是咱們在作性能優化以前要制定很是詳細的目標量化產出，首先要對性能現狀作深刻分析，而後根據量化指標制定一些Roadmap，例如目前應用吞吐率、頁面響應時間，咱們但願經過性能優化在Q二、Q三、Q4分別達到一個什麼樣的性能指標，經過量化的性能指標作一些特定性能優化設計，有計劃的性能調優效果會好一些。
     第二要防止過分性能優化設計，由於性能優化成本比較高，基本上優化到必定程度要考慮到投入產出比問題，過分的性能優化不只會帶來浪費，甚至會致使架構更加負責，帶來一些可維護性的問題。
      第三要注意性能優化是爲用戶服務的，性能優化有兩個方向，一個方向是增長應用吞吐量，減小網絡和應用服務器的投入，另一個方向是作一些用戶體驗方面的提高，例如前端優化，這兩個方向我更傾向於後者，由於有數據代表，用戶訪問受到頁面響應時間制約，頁面每慢10%就會有等比例用戶流失，因此前端優化不利致使商業上的損失遠比後端優化節約的成本要多。

第四是性能優化會受到商業需求制約，不一樣商業需求對性能優化要求不同，我舉個例子，咱們在作前端優化時會作一些圖片自動壓縮，就這點來講，不一樣行業對圖片質量要求不同，好比服裝行業比機械行業圖片質量要求高不少，因此咱們須要針對不一樣行業設定不一樣的壓縮比，這也是咱們須要考慮的。
     此外還要考慮性能優化成果如何保持的問題，就是如何作持續發展的性能優化，咱們主要經過兩個方面，一個方面是制定一些性能優化的最佳實踐，嚮應用開發人員灌輸性能的理念，讓性能的理念深刻到他們平常工做中，另一個方面是實時監控系統運行狀況，第一時間把出現的性能瓶頸解決掉，這樣才能保持性能優化可持續發展。

阿里巴巴前端團隊目前主要採用哪些JavaScript框架作應用開發，爲何選擇這些框架？

據我瞭解，目前咱們採用了YUI和jQuery這兩個JS框架。採用這兩個框架主要考慮到如下幾點：第一，咱們但願JS框架是一個比較輕量的，比較小的框架，它的庫文件比較小；第二，咱們但願JS框架的瀏覽器兼容性比較好；第三，咱們但願JS框架有比較好的可擴展性，這樣就能夠快速定製一些UI組件；第四點是很關鍵的一點，性能要比較好。目前咱們使用的JS框架遇到版本升級的問題，當咱們決定對使用的JS框架作升級或替換時，咱們發現因爲API變更，前端有大量頁面須要修改，因此如今正在作的事，是在JS框架之上作一層封裝，作統一代理層，提供一些穩定的API給前端頁面，而後咱們會在這層作一些性能優化，包括安全方面的代理工做，有了代理層，甚至能夠透明替換JS框架，這是第一點。第二點，目前正在開發一些具備深層次用戶體驗的UI組件，好比剛纔提到圖片上傳的自動壓縮組件，另外還有一些很炫像相冊這樣的組件，這對於豐富用戶體驗是很是有意義的。

目前前端開發團隊面臨的主要挑戰是什麼？他們有哪些解決方案？

他們目前面臨的挑戰，除了剛纔說的性能問題之外，更多的是開發效率的問題，包括一些代碼質量問題。能夠分三個階段來說，第一個階段是開發期，開發期面臨的主要問題是編碼和調試如何更加有效，咱們目前正在開發一套基於插件的IDE框架，支持前端代碼快速開發和調試。第二階段是測試期，怎麼減小測試投入的人力成本，由於咱們知道前端測試對於人力成本投入是很是大的，例如比較複雜具有多種表單驗證條件的一個表單設計，這方面咱們正考慮一些自動化測試技術，這種前端測試自動化可以自動去測試JS編碼，經過錄入腳本實現關鍵頁面的反覆測試。第三階段是運行期，如何對線上頁面性能包括代碼質量進行快速監控，咱們在全國各地各個網段都部署了腳本模擬訪問前端頁面的實際狀況，會監控一些性能指標，包括代碼異常等，而後生成一些報告經過郵件發給咱們，咱們會在第一時間處理這些問題。

下面咱們談一下目前比較熱的一個技術話題HTML5.咱們知道最近W3C宣佈將在2014年正式推出HTML5規範。阿里巴巴前端團隊如何看待和應用HTML5？

據我瞭解，目前有些應用已經採用HTML5了。例如咱們網站有一個基於web的即時通信軟件，它就用到了HTML5的Web Sockets技術。像HTML5裏客戶端存儲，其實咱們也用到了，網站有不少應用場景，例如您最近一個瀏覽記錄，若是不是很重要的數據就很是適合存放在HTML5的客戶端緩存裏。另外咱們目前正嘗試用一些HTML5新標籤，例如佈局方面像<nav>、<header>、<footer>這樣一些標籤，好處就是標籤更加語義化，以往咱們實現佈局要基於盒子模型，經過<DIV>設計頁面佈局，如今有了語義化標籤，對於SEO是頗有好處的。咱們也在嘗試使用表單相關標籤，HTML5新提供了表單驗證語法支持，以往要寫一大堆JS代碼，如今採用HTML5技術很容易快速實現。此外，還有畫布<canvas>標籤，咱們網站如今目前有不少柱狀圖、餅圖這樣的統計圖表，咱們如今用Flash來實現，之後也會考慮經過<canvas>標籤實現。

如何處理多種瀏覽器對HTML5的支持問題？

瀏覽器兼容性問題確實是一個比較大的問題。由於咱們知道目前IE系列的瀏覽器對HTML5基本不支持。咱們經過幾個方面來解決：第一，採用一些第三方特性來支持，例如<canvas>標籤在IE下是不支持的，咱們能夠採用google-excanvas這個組件讓IE支持；第二，在一些不兼容的瀏覽器裏作一些低級效果替代方案，例如CSS3的圓角效果，在IE裏就直接顯示直角；第三是一些文本提示，有意識地引導用戶使用兼容的瀏覽器，咱們會在頁面關鍵位置經過一些指導性信息提示用戶若是採用特定瀏覽器會得到更好的用戶體驗。目前爲止，咱們更多地在網站主要是面對咱們網站運營的後臺系統嘗試使用一些HTML5技術，由於內部人員的瀏覽器兼容不是一個很大的問題，咱們能夠提示用什麼樣的瀏覽器來訪問這些網站後臺運營系統。

內容出自：InfoQ，Url：http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization