?轉載：http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization

?

大家好，我現在在阿里巴巴園區采訪阿里巴巴中文站架構師，兼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，例如目前應用吞吐率、頁面響應時間，我們希望通過性能優化在Q2、Q3、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技術頁面的比例。

總結

以上是生活随笔為你收集整理的何崚谈阿里巴巴前端性能优化最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。