何崚談阿里巴巴前端性能優化最佳實踐

你們好，我如今在阿里巴巴園區採訪阿里巴巴中文站架構師，兼B2B網站優化領域的負責人何崚。何崚你好，請簡單介紹一下你本身。

我叫何崚，2006年加入阿里巴巴。以前一直在中科院下屬的兩個基因方面的研究所，從事一些基因方面的研究。加入阿里巴巴對我來講是一次轉行。我在加入阿里巴巴之後，主要是負責中文站的一些架構設計。

咱們知道何崚是阿里巴巴B2B網站優化領域的負責人。首先關於頁面前端優化這部分，請談一談你的主要經驗以及針對一些難點問題的解決方案。

目前咱們網站頁面前端優化主要有兩個方向。第一個方向是對網站核心頁面基於Wise load的原則作定點性能優化，這方面無外乎就是減小HTTP請求，減小DNS請求時間，減小頁面DOM的數量，作一些圖片壓縮等，你們的思路基本是同樣的。值得一提的是，針對特定方向前端優化，阿里巴巴社區開發了一些自動化性能調優工具，例如剛纔提到的減小HTTP請求的問題咱們開發了一個自動合併CSS和JS靜態文件的框架，對於剛纔提到的減小頁面DOM數這方面咱們也有一個前端延遲加載框架，主要負責在頁面加載時只加載首屏，用戶滾動頁面時纔去加載二屏或三屏，這樣對於網站的性能包括流量都是很大的提高和節約。

咱們知道Web I/O也是一個優化很重要的方面，有沒有須要特別注意的或是有哪些好的解決方案？

Web I/O在咱們網站高併發的應用場景下會有明顯的瓶頸。爲了提升網站高併發處理能力，咱們能夠去嘗試一些高性能的Web服務器。另外在動態頁面的處理上，儘量地減小動態頁面所佔比例，要採用一些動態頁面靜態化的技術，例如反向代理緩存技術，例如頁面片斷的局部緩存像ESI（Edge Side Include）這樣的技術，來加快咱們Web請求的處理。

在應用調優這一塊是如何作的？

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

若是有問題，是大家及時反饋給開發團隊讓他們去調優，仍是他們會本身去找問題再反饋給大家？

實際上咱們如今的性能監控腳本會定時把線上一些性能狀況經過郵件發送給應用負責人，是應用負責的具體團隊，主要是由他們來主導作這部分的性能調優工做。

大家就是負責去找到問題？

咱們負責性能優化的一些基礎框架的設計，負責提供技術上支持，包括新優化最佳實現支持。

另外一個在性能調優方面比較重要的地方是數據服務層調優，請在這方面也和咱們分享一下你的經驗。

目前在數據庫方面咱們遇到的問題是海量數據的爆炸性增加，在這方面你們的思路基本是一致的，無外乎是數據水平切分和垂直切分。此外咱們也會採用一些硬件方面的技術，例如SSD三寸盤的使用。目前咱們的網站在網站應用和數據庫之間構建了一個統一的數據服務層，這層主要是一些熱點數據緩存，包括查詢並行化。什麼是熱點數據緩存？咱們的網站商業數據都有行業分佈性，有一些特定的熱點，咱們會經過改進緩存命中率算法來提高網站數據訪問效率。剛纔提到查詢並行化，在通常網站應用中，頁面有多個查詢是一個串行執行過程，咱們經過框架進行支持，可以使這些查詢並行化，這樣咱們整個頁面數據請求耗時只受到最慢查詢的制約。目前的難點主要仍是如何提高緩存命中率，須要不斷地測試。此外在數據服務層還有一個很重要的功能，是對大的業務模型作數據路由的功能。

什麼是數據路由功能？主要是由於幾個大的業務模型不一樣字段分佈在不一樣數據源裏，這部分一般是由應用開發人員本身維護。如今，咱們但願在統一數據服務層裏作一層封裝，而後隔離底層物理部署。另外，咱們會針對數據服務層的性能調優進行封裝，例如不一樣查詢，不一樣的條件，它適合的數據源是不同的，在特定條件下，它更適合從搜索引擎裏獲取，這方面若是徹底由應用開發人員把握，對他們的要是是比較高的，因此咱們但願把這些最佳實踐規則在咱們統一數據服務層裏作一層封裝，對應用開發人員作透明化處理。

請給讀者簡單分享一下在性能調優方面的一些最佳實踐，包括特別須要注意的地方。

最佳實踐主要有幾個方面。第一是咱們在作性能優化以前要制定很是詳細的目標量化產出，首先要對性能現狀作深刻分析，而後根據量化指標制定一些Roadmap，例如目前應用吞吐率、頁面響應時間，咱們但願經過性能優化在Q二、Q三、Q4分別達到一個什麼樣的性能指標，經過量化的性能指標作一些特定性能優化設計，有計劃的性能調優效果會好一些。

第二要防止過分性能優化設計，由於性能優化成本比較高，基本上優化到必定程度要考慮到投入產出比問題，過分的性能優化不只會帶來浪費，甚至會致使架構更加負責，帶來一些可維護性的問題。

第三要注意性能優化是爲用戶服務的，性能優化有兩個方向，一個方向是增長應用吞吐量，減小網絡和應用服務器的投入，另一個方向是作一些用戶體驗方面的提高，例如前端優化，這兩個方向我更傾向於後者，由於有數據代表，用戶訪問受到頁面響應時間制約，頁面每慢10%就會有等比例用戶流失，因此前端優化不利致使商業上的損失遠比後端優化節約的成本要多。第四是性能優化會受到商業需求制約，不一樣商業需求對性能優化要求不同，我舉個例子，咱們在作前端優化時會作一些圖片自動壓縮，就這點來講，不一樣行業對圖片質量要求不同，好比服裝行業比機械行業圖片質量要求高不少，因此咱們須要針對不一樣行業設定不一樣的壓縮比，這也是咱們須要考慮的。

此外還要考慮性能優化成果如何保持的問題，就是如何作持續發展的性能優化，咱們主要經過兩個方面，一個方面是制定一些性能優化的最佳實踐，嚮應用開發人員灌輸性能的理念，讓性能的理念深刻到他們平常工做中，另一個方面是實時監控系統運行狀況，第一時間把出現的性能瓶頸解決掉，這樣才能保持性能優化可持續發展。

前端調優和後端調優如何協調配合？

前端調優和後端調優是密不可分的，前端調優有時是經過後端調優方案實現，好比咱們常遇到cookies過大的問題，它會致使網站web請求通過多個TCP包才能傳到應用，針對這點，常見的思路就是用服務器端的cookie實現，實際是用後端技術來解決前端優化的問題。此外，前端優化也能夠成爲後端優化實現的手段，例如網站上傳圖片會對圖片進行壓縮，以往壓縮是在服務器端實現，如今咱們把壓縮移到客戶端實現，節約了服務器端的不少運算資源，這是經過前端優化手段優化後端的一個典型例子。因此，在對網站的核心頁面優化時，咱們採起由UED和開發人員結對優化的方式，一塊兒討論頁面瓶頸在哪裏，優化方案是怎麼樣的，經過前端優化和後端優化相結合達到優化目的。

阿里巴巴前端團隊目前主要採用哪些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技術，由於內部人員的瀏覽器兼容不是一個很大的問題，咱們能夠提示用什麼樣的瀏覽器來訪問這些網站後臺運營系統。

阿里巴巴對Silverlight、Flash、HTML5之間的紛爭怎麼看？從技術角度如何選擇和評價這些產品技術？

Silverlight目前市場佔有率包括插件安裝率還比較低，因此阿里巴巴暫時沒有很大采用。Flash和HTML5，個人見解是這樣，由於目前HTML5確實有瀏覽器兼容問題，尤爲是IE系列瀏覽器不兼容，而Flash插件的市場佔有率很是高，因此現階段，咱們的核心頁面若是要作深層次用戶體驗，咱們首選Flash。但隨着HTML5的發展，它自己具備開放性優點，預計HTML5市場份額會逐步提升，尤爲是IE9上線後會支持HTML5。此外，咱們注意到有些手持設備目前不支持Flash，它們倒向HTML5陣營。根據統計，經過手持設備訪問網站的用戶羣在不斷增長，因此咱們很是重視這批用戶的體驗。因此，現階段咱們在前端的深層次用戶體驗上，對核心頁面首選Flash，但在一些非核心頁面會嘗試使用一些HTML5技術儲備，咱們會密切觀察HTML5技術的發展，包括市場佔有率的變化，逐步提升HTML5技術頁面的比例。

好，很是感謝何崚接受咱們的採訪。

謝謝！