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

?

大家好，我現(xiàn)在在阿里巴巴園區(qū)采訪阿里巴巴中文站架構(gòu)師，兼B2B網(wǎng)站優(yōu)化領(lǐng)域的負(fù)責(zé)人何崚。何崚你好，請(qǐng)簡(jiǎn)單介紹一下你自己。 我叫何崚，2006年加入阿里巴巴。之前一直在中科院下屬的兩個(gè)基因方面的研究所，從事一些基因方面的研究。加入阿里巴巴對(duì)我來(lái)說(shuō)是一次轉(zhuǎn)行。我在加入阿里巴巴以后，主要是負(fù)責(zé)中文站的一些架構(gòu)設(shè)計(jì)。 我們知道何崚是阿里巴巴B2B網(wǎng)站優(yōu)化領(lǐng)域的負(fù)責(zé)人。首先關(guān)于頁(yè)面前端優(yōu)化這部分，請(qǐng)談一談你的主要經(jīng)驗(yàn)以及針對(duì)一些難點(diǎn)問(wèn)題的解決方案。 目前我們網(wǎng)站頁(yè)面前端優(yōu)化主要有兩個(gè)方向。第一個(gè)方向是對(duì)網(wǎng)站核心頁(yè)面基于Wise load的原則做定點(diǎn)性能優(yōu)化，這方面無(wú)外乎就是減少HTTP請(qǐng)求，減少DNS請(qǐng)求時(shí)間，減少頁(yè)面DOM的數(shù)量，做一些圖片壓縮等，大家的思路基本是一樣的。值得一提的是，針對(duì)特定方向前端優(yōu)化，阿里巴巴社區(qū)開(kāi)發(fā)了一些自動(dòng)化性能調(diào)優(yōu)工具，例如剛才提到的減少HTTP請(qǐng)求的問(wèn)題我們開(kāi)發(fā)了一個(gè)自動(dòng)合并CSS和JS靜態(tài)文件的框架，對(duì)于剛才提到的減少頁(yè)面DOM數(shù)這方面我們也有一個(gè)前端延遲加載框架，主要負(fù)責(zé)在頁(yè)面加載時(shí)只加載首屏，用戶滾動(dòng)頁(yè)面時(shí)才去加載二屏或三屏，這樣對(duì)于網(wǎng)站的性能包括流量都是很大的提升和節(jié)約。 我們知道Web I/O也是一個(gè)優(yōu)化很重要的方面，有沒(méi)有需要特別注意的或是有哪些好的解決方案？ Web I/O在我們網(wǎng)站高并發(fā)的應(yīng)用場(chǎng)景下會(huì)有明顯的瓶頸。為了提高網(wǎng)站高并發(fā)處理能力，我們可以去嘗試一些高性能的Web服務(wù)器。另外在動(dòng)態(tài)頁(yè)面的處理上，盡可能地減少動(dòng)態(tài)頁(yè)面所占比例，要采用一些動(dòng)態(tài)頁(yè)面靜態(tài)化的技術(shù)，例如反向代理緩存技術(shù)，例如頁(yè)面片段的局部緩存像ESI（Edge Side Include）這樣的技術(shù)，來(lái)加快我們Web請(qǐng)求的處理。 在應(yīng)用調(diào)優(yōu)這一塊是如何做的？ 關(guān)于應(yīng)用調(diào)優(yōu)，大部分Web應(yīng)用的性能瓶頸都來(lái)自我們程序員實(shí)際編碼中一些不好的寫(xiě)法。這點(diǎn)我們可以通過(guò)一些profile 工具定位性能瓶頸，例如應(yīng)用堵塞XML解析，我們能夠拿到性能瓶頸列表，然后再針對(duì)這些性能瓶頸做一些性能調(diào)優(yōu)。在阿里巴巴，我們線上應(yīng)用已經(jīng)部署了一些基于字節(jié)碼增強(qiáng)進(jìn)行網(wǎng)站實(shí)時(shí)監(jiān)控的腳本，它可以實(shí)時(shí)抓取應(yīng)用堆棧以及一些運(yùn)行情況，這樣我們第一時(shí)間就能掌握到應(yīng)用的瓶頸，從而做一些有針對(duì)性的調(diào)優(yōu)。 如果有問(wèn)題，是你們及時(shí)反饋給開(kāi)發(fā)團(tuán)隊(duì)讓他們?nèi)フ{(diào)優(yōu)，還是他們會(huì)自己去找問(wèn)題再反饋給你們？ 實(shí)際上我們現(xiàn)在的性能監(jiān)控腳本會(huì)定時(shí)把線上一些性能情況通過(guò)郵件發(fā)送給應(yīng)用負(fù)責(zé)人，是應(yīng)用負(fù)責(zé)的具體團(tuán)隊(duì)，主要是由他們來(lái)主導(dǎo)做這部分的性能調(diào)優(yōu)工作。 ? 你們就是負(fù)責(zé)去找到問(wèn)題？ 我們負(fù)責(zé)性能優(yōu)化的一些基礎(chǔ)框架的設(shè)計(jì)，負(fù)責(zé)提供技術(shù)上支持，包括新優(yōu)化最佳實(shí)現(xiàn)支持。 另一個(gè)在性能調(diào)優(yōu)方面比較重要的地方是數(shù)據(jù)服務(wù)層調(diào)優(yōu)，請(qǐng)?jiān)谶@方面也和我們分享一下你的經(jīng)驗(yàn)。 目前在數(shù)據(jù)庫(kù)方面我們遇到的問(wèn)題是海量數(shù)據(jù)的爆炸性增長(zhǎng)，在這方面大家的思路基本是一致的，無(wú)外乎是數(shù)據(jù)水平切分和垂直切分。此外我們也會(huì)采用一些硬件方面的技術(shù)，例如SSD三寸盤(pán)的使用。目前我們的網(wǎng)站在網(wǎng)站應(yīng)用和數(shù)據(jù)庫(kù)之間構(gòu)建了一個(gè)統(tǒng)一的數(shù)據(jù)服務(wù)層，這層主要是一些熱點(diǎn)數(shù)據(jù)緩存，包括查詢并行化。什么是熱點(diǎn)數(shù)據(jù)緩存？我們的網(wǎng)站商業(yè)數(shù)據(jù)都有行業(yè)分布性，有一些特定的熱點(diǎn)，我們會(huì)通過(guò)改進(jìn)緩存命中率算法來(lái)提升網(wǎng)站數(shù)據(jù)訪問(wèn)效率。剛才提到查詢并行化，在一般網(wǎng)站應(yīng)用中，頁(yè)面有多個(gè)查詢是一個(gè)串行執(zhí)行過(guò)程，我們通過(guò)框架進(jìn)行支持，能夠使這些查詢并行化，這樣我們整個(gè)頁(yè)面數(shù)據(jù)請(qǐng)求耗時(shí)只受到最慢查詢的制約。目前的難點(diǎn)主要還是如何提升緩存命中率，需要不斷地測(cè)試。此外在數(shù)據(jù)服務(wù)層還有一個(gè)很重要的功能，是對(duì)大的業(yè)務(wù)模型做數(shù)據(jù)路由的功能。

什么是數(shù)據(jù)路由功能？主要是因?yàn)閹讉€(gè)大的業(yè)務(wù)模型不同字段分布在不同數(shù)據(jù)源里，這部分通常是由應(yīng)用開(kāi)發(fā)人員自己維護(hù)。現(xiàn)在，我們希望在統(tǒng)一數(shù)據(jù)服務(wù)層里做一層封裝，然后隔離底層物理部署。另外，我們會(huì)針對(duì)數(shù)據(jù)服務(wù)層的性能調(diào)優(yōu)進(jìn)行封裝，例如不同查詢，不同的條件，它適合的數(shù)據(jù)源是不一樣的，在特定條件下，它更適合從搜索引擎里獲取，這方面如果完全由應(yīng)用開(kāi)發(fā)人員把握，對(duì)他們的要是是比較高的，所以我們希望把這些最佳實(shí)踐規(guī)則在我們統(tǒng)一數(shù)據(jù)服務(wù)層里做一層封裝，對(duì)應(yīng)用開(kāi)發(fā)人員做透明化處理。 請(qǐng)給讀者簡(jiǎn)單分享一下在性能調(diào)優(yōu)方面的一些最佳實(shí)踐，包括特別需要注意的地方。 最佳實(shí)踐主要有幾個(gè)方面。第一是我們?cè)谧鲂阅軆?yōu)化之前要制定非常詳細(xì)的目標(biāo)量化產(chǎn)出，首先要對(duì)性能現(xiàn)狀做深入分析，然后根據(jù)量化指標(biāo)制定一些Roadmap，例如目前應(yīng)用吞吐率、頁(yè)面響應(yīng)時(shí)間，我們希望通過(guò)性能優(yōu)化在Q2、Q3、Q4分別達(dá)到一個(gè)什么樣的性能指標(biāo)，通過(guò)量化的性能指標(biāo)做一些特定性能優(yōu)化設(shè)計(jì)，有計(jì)劃的性能調(diào)優(yōu)效果會(huì)好一些。

第二要防止過(guò)度性能優(yōu)化設(shè)計(jì)，因?yàn)樾阅軆?yōu)化成本比較高，基本上優(yōu)化到一定程度要考慮到投入產(chǎn)出比問(wèn)題，過(guò)度的性能優(yōu)化不僅會(huì)帶來(lái)浪費(fèi)，甚至?xí)?dǎo)致架構(gòu)更加負(fù)責(zé)，帶來(lái)一些可維護(hù)性的問(wèn)題。

第三要注意性能優(yōu)化是為用戶服務(wù)的，性能優(yōu)化有兩個(gè)方向，一個(gè)方向是增加應(yīng)用吞吐量，減少網(wǎng)絡(luò)和應(yīng)用服務(wù)器的投入，另外一個(gè)方向是做一些用戶體驗(yàn)方面的提升，例如前端優(yōu)化，這兩個(gè)方向我更傾向于后者，因?yàn)橛袛?shù)據(jù)表明，用戶訪問(wèn)受到頁(yè)面響應(yīng)時(shí)間制約，頁(yè)面每慢10%就會(huì)有等比例用戶流失，所以前端優(yōu)化不利導(dǎo)致商業(yè)上的損失遠(yuǎn)比后端優(yōu)化節(jié)約的成本要多。第四是性能優(yōu)化會(huì)受到商業(yè)需求制約，不同商業(yè)需求對(duì)性能優(yōu)化要求不一樣，我舉個(gè)例子，我們?cè)谧銮岸藘?yōu)化時(shí)會(huì)做一些圖片自動(dòng)壓縮，就這點(diǎn)來(lái)說(shuō)，不同行業(yè)對(duì)圖片質(zhì)量要求不一樣，比如服裝行業(yè)比機(jī)械行業(yè)圖片質(zhì)量要求高很多，所以我們需要針對(duì)不同行業(yè)設(shè)定不同的壓縮比，這也是我們需要考慮的。

此外還要考慮性能優(yōu)化成果如何保持的問(wèn)題，就是如何做持續(xù)發(fā)展的性能優(yōu)化，我們主要通過(guò)兩個(gè)方面，一個(gè)方面是制定一些性能優(yōu)化的最佳實(shí)踐，向應(yīng)用開(kāi)發(fā)人員灌輸性能的理念，讓性能的理念深入到他們?nèi)粘９ぷ髦?#xff0c;另外一個(gè)方面是實(shí)時(shí)監(jiān)控系統(tǒng)運(yùn)行情況，第一時(shí)間把出現(xiàn)的性能瓶頸解決掉，這樣才能保持性能優(yōu)化可持續(xù)發(fā)展。 ? 前端調(diào)優(yōu)和后端調(diào)優(yōu)如何協(xié)調(diào)配合？ 前端調(diào)優(yōu)和后端調(diào)優(yōu)是密不可分的，前端調(diào)優(yōu)有時(shí)是通過(guò)后端調(diào)優(yōu)方案實(shí)現(xiàn)，比如我們常遇到cookies過(guò)大的問(wèn)題，它會(huì)導(dǎo)致網(wǎng)站web請(qǐng)求經(jīng)過(guò)多個(gè)TCP包才能傳到應(yīng)用，針對(duì)這點(diǎn)，常見(jiàn)的思路就是用服務(wù)器端的cookie實(shí)現(xiàn)，實(shí)際是用后端技術(shù)來(lái)解決前端優(yōu)化的問(wèn)題。此外，前端優(yōu)化也可以成為后端優(yōu)化實(shí)現(xiàn)的手段，例如網(wǎng)站上傳圖片會(huì)對(duì)圖片進(jìn)行壓縮，以往壓縮是在服務(wù)器端實(shí)現(xiàn)，現(xiàn)在我們把壓縮移到客戶端實(shí)現(xiàn)，節(jié)約了服務(wù)器端的很多運(yùn)算資源，這是通過(guò)前端優(yōu)化手段優(yōu)化后端的一個(gè)典型例子。所以，在對(duì)網(wǎng)站的核心頁(yè)面優(yōu)化時(shí)，我們采取由UED和開(kāi)發(fā)人員結(jié)對(duì)優(yōu)化的方式，一起討論頁(yè)面瓶頸在哪里，優(yōu)化方案是怎么樣的，通過(guò)前端優(yōu)化和后端優(yōu)化相結(jié)合達(dá)到優(yōu)化目的。 阿里巴巴前端團(tuán)隊(duì)目前主要采用哪些JavaScript框架做應(yīng)用開(kāi)發(fā)，為什么選擇這些框架？ 據(jù)我了解，目前我們采用了YUI和jQuery這兩個(gè)JS框架。采用這兩個(gè)框架主要考慮到以下幾點(diǎn)：第一，我們希望JS框架是一個(gè)比較輕量的，比較小的框架，它的庫(kù)文件比較小；第二，我們希望JS框架的瀏覽器兼容性比較好；第三，我們希望JS框架有比較好的可擴(kuò)展性，這樣就可以快速定制一些UI組件；第四點(diǎn)是很關(guān)鍵的一點(diǎn)，性能要比較好。目前我們使用的JS框架遇到版本升級(jí)的問(wèn)題，當(dāng)我們決定對(duì)使用的JS框架做升級(jí)或替換時(shí)，我們發(fā)現(xiàn)由于API變動(dòng)，前端有大量頁(yè)面需要修改，所以現(xiàn)在正在做的事，是在JS框架之上做一層封裝，做統(tǒng)一代理層，提供一些穩(wěn)定的API給前端頁(yè)面，然后我們會(huì)在這層做一些性能優(yōu)化，包括安全方面的代理工作，有了代理層，甚至可以透明替換JS框架，這是第一點(diǎn)。第二點(diǎn)，目前正在開(kāi)發(fā)一些具有深層次用戶體驗(yàn)的UI組件，比如剛才提到圖片上傳的自動(dòng)壓縮組件，另外還有一些很炫像相冊(cè)這樣的組件，這對(duì)于豐富用戶體驗(yàn)是非常有意義的。 目前前端開(kāi)發(fā)團(tuán)隊(duì)面臨的主要挑戰(zhàn)是什么？他們有哪些解決方案？ 他們目前面臨的挑戰(zhàn)，除了剛才說(shuō)的性能問(wèn)題以外，更多的是開(kāi)發(fā)效率的問(wèn)題，包括一些代碼質(zhì)量問(wèn)題。可以分三個(gè)階段來(lái)講，第一個(gè)階段是開(kāi)發(fā)期，開(kāi)發(fā)期面臨的主要問(wèn)題是編碼和調(diào)試如何更加有效，我們目前正在開(kāi)發(fā)一套基于插件的IDE框架，支持前端代碼快速開(kāi)發(fā)和調(diào)試。第二階段是測(cè)試期，怎么減少測(cè)試投入的人力成本，因?yàn)槲覀冎狼岸藴y(cè)試對(duì)于人力成本投入是非常大的，例如比較復(fù)雜具備多種表單驗(yàn)證條件的一個(gè)表單設(shè)計(jì)，這方面我們正考慮一些自動(dòng)化測(cè)試技術(shù)，這種前端測(cè)試自動(dòng)化能夠自動(dòng)去測(cè)試JS編碼，通過(guò)錄入腳本實(shí)現(xiàn)關(guān)鍵頁(yè)面的反復(fù)測(cè)試。第三階段是運(yùn)行期，如何對(duì)線上頁(yè)面性能包括代碼質(zhì)量進(jìn)行快速監(jiān)控，我們?cè)谌珖?guó)各地各個(gè)網(wǎng)段都部署了腳本模擬訪問(wèn)前端頁(yè)面的實(shí)際情況，會(huì)監(jiān)控一些性能指標(biāo)，包括代碼異常等，然后生成一些報(bào)告通過(guò)郵件發(fā)給我們，我們會(huì)在第一時(shí)間處理這些問(wèn)題。 下面我們談一下目前比較熱的一個(gè)技術(shù)話題HTML5.我們知道最近W3C宣布將在2014年正式推出HTML5規(guī)范。阿里巴巴前端團(tuán)隊(duì)如何看待和應(yīng)用HTML5？ 據(jù)我了解，目前有些應(yīng)用已經(jīng)采用HTML5了。例如我們網(wǎng)站有一個(gè)基于web的即時(shí)通訊軟件，它就用到了HTML5的Web Sockets技術(shù)。像HTML5里客戶端存儲(chǔ)，其實(shí)我們也用到了，網(wǎng)站有很多應(yīng)用場(chǎng)景，例如您最近一個(gè)瀏覽記錄，如果不是很重要的數(shù)據(jù)就非常適合存放在HTML5的客戶端緩存里。另外我們目前正嘗試用一些HTML5新標(biāo)簽，例如布局方面像<nav>、<header>、<footer>這樣一些標(biāo)簽，好處就是標(biāo)簽更加語(yǔ)義化，以往我們實(shí)現(xiàn)布局要基于盒子模型，通過(guò)<DIV>設(shè)計(jì)頁(yè)面布局，現(xiàn)在有了語(yǔ)義化標(biāo)簽，對(duì)于SEO是很有好處的。我們也在嘗試使用表單相關(guān)標(biāo)簽，HTML5新提供了表單驗(yàn)證語(yǔ)法支持，以往要寫(xiě)一大堆JS代碼，現(xiàn)在采用HTML5技術(shù)很容易快速實(shí)現(xiàn)。此外，還有畫(huà)布<canvas>標(biāo)簽，我們網(wǎng)站現(xiàn)在目前有很多柱狀圖、餅圖這樣的統(tǒng)計(jì)圖表，我們現(xiàn)在用Flash來(lái)實(shí)現(xiàn)，以后也會(huì)考慮通過(guò)<canvas>標(biāo)簽實(shí)現(xiàn)。 如何處理多種瀏覽器對(duì)HTML5的支持問(wèn)題？ 瀏覽器兼容性問(wèn)題確實(shí)是一個(gè)比較大的問(wèn)題。因?yàn)槲覀冎滥壳癐E系列的瀏覽器對(duì)HTML5基本不支持。我們通過(guò)幾個(gè)方面來(lái)解決：第一，采用一些第三方特性來(lái)支持，例如<canvas>標(biāo)簽在IE下是不支持的，我們可以采用google-excanvas這個(gè)組件讓IE支持；第二，在一些不兼容的瀏覽器里做一些低級(jí)效果替代方案，例如CSS3的圓角效果，在IE里就直接顯示直角；第三是一些文本提示，有意識(shí)地引導(dǎo)用戶使用兼容的瀏覽器，我們會(huì)在頁(yè)面關(guān)鍵位置通過(guò)一些指導(dǎo)性信息提示用戶如果采用特定瀏覽器會(huì)獲得更好的用戶體驗(yàn)。目前為止，我們更多地在網(wǎng)站主要是面對(duì)我們網(wǎng)站運(yùn)營(yíng)的后臺(tái)系統(tǒng)嘗試使用一些HTML5技術(shù)，因?yàn)閮?nèi)部人員的瀏覽器兼容不是一個(gè)很大的問(wèn)題，我們可以提示用什么樣的瀏覽器來(lái)訪問(wèn)這些網(wǎng)站后臺(tái)運(yùn)營(yíng)系統(tǒng)。 阿里巴巴對(duì)Silverlight、Flash、HTML5之間的紛爭(zhēng)怎么看？從技術(shù)角度如何選擇和評(píng)價(jià)這些產(chǎn)品技術(shù)？ Silverlight目前市場(chǎng)占有率包括插件安裝率還比較低，所以阿里巴巴暫時(shí)沒(méi)有很大采用。Flash和HTML5，我的看法是這樣，因?yàn)槟壳癏TML5確實(shí)有瀏覽器兼容問(wèn)題，尤其是IE系列瀏覽器不兼容，而Flash插件的市場(chǎng)占有率非常高，所以現(xiàn)階段，我們的核心頁(yè)面如果要做深層次用戶體驗(yàn)，我們首選Flash。但隨著HTML5的發(fā)展，它本身具有開(kāi)放性優(yōu)勢(shì)，預(yù)計(jì)HTML5市場(chǎng)份額會(huì)逐步提高，尤其是IE9上線后會(huì)支持HTML5。此外，我們注意到有些手持設(shè)備目前不支持Flash，它們倒向HTML5陣營(yíng)。根據(jù)統(tǒng)計(jì)，通過(guò)手持設(shè)備訪問(wèn)網(wǎng)站的用戶群在不斷增加，所以我們非常重視這批用戶的體驗(yàn)。所以，現(xiàn)階段我們?cè)谇岸说纳顚哟斡脩趔w驗(yàn)上，對(duì)核心頁(yè)面首選Flash，但在一些非核心頁(yè)面會(huì)嘗試使用一些HTML5技術(shù)儲(chǔ)備，我們會(huì)密切觀察HTML5技術(shù)的發(fā)展，包括市場(chǎng)占有率的變化，逐步提高HTML5技術(shù)頁(yè)面的比例。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。