在2012年7月7日阿里技術嘉年華上記者遇到阿里巴巴前端技術專家劉杰（花名：嗷嗷）。嗷嗷從事前端開發(fā)多年，期間做過設計轉過產(chǎn)品，混過后端，寫過《Web 標準設計》一書。目前就職于淘寶網(wǎng)，主要負責前端性能監(jiān)控、優(yōu)化等前端開發(fā)相關的工作。在會上嗷嗷以“如何發(fā)現(xiàn)前端的性能問題”為話題分享了如何通過日志來分析問題，如何通過 har 來分析問題以及通過監(jiān)控來發(fā)現(xiàn)問題等內(nèi)容。

嗷嗷你好，據(jù)我的了解你之前有做過設計、產(chǎn)品以及后端，是因為什么讓你從事前端開發(fā)的？

嗷嗷：其實這跟個人的發(fā)展有關吧，不同的階段可能你需要了解到一些知識也不一樣，比如你想深入了解后端的一些東西，那你如果作為一名前端的，所以你了解的不夠多也不夠深入?；蛘呤羌词鼓懔私獾降闹皇瞧妫恢浪麄?yōu)槭裁催@么做。你只有整個人切過去的時候才知道那你就可以比較深入的了解他們?yōu)槭裁催@么做，這樣做有什么好處。然后回過來的時候你就會把這些偷來匯總應用。

現(xiàn)在國內(nèi)的前端分很多種，像淘寶的前端現(xiàn)階段可能稍微純前端一種，像我以前我在有些公司呆過，前端他有寫一些后端開發(fā)的東西，這些只是一個名字而已，可能跟自己的職者在不同的公司下區(qū)分還不一樣。

前端性能優(yōu)化是一項非常重要的技術活，對于用戶體驗有非常大的影響。但是對于一些剛踏入的前端開發(fā)人員可能在技術上有些限制，你對他們有什么好的建議嗎？

嗷嗷：其實現(xiàn)在進入前端的同學比較幸運吧，因為現(xiàn)在已經(jīng)有一些大量的經(jīng)驗，方法，優(yōu)化等等。對于剛剛入門的時候，認真學習這些東西已經(jīng)足夠了，雖然這些東西比較通用，可能對于某些業(yè)務不具備非常好的優(yōu)化，但對于入門的話用利用這些來了解為什么，比如這些東西為什么這樣做會更好，了解這些信息的時候，這樣你的能力就會提升了。當你了解這些信息的時候你就會針對業(yè)務做一些個性化的定制或者處理。

對于現(xiàn)在的前端性能優(yōu)化的規(guī)范特別多，以你的經(jīng)驗來說，有哪些建議比較重要？

嗷嗷：規(guī)范也不是特別多，大家了解最多的是網(wǎng)站性能優(yōu)化的34條黃金法則，我們稱之為雅虎軍規(guī)，但也不能說是規(guī)范，它只是一個建議。但不同的公司都有著不同的背景會導致每個公司都會加上自己的一些特殊的東西。所以讓人感覺有很多，每個人出來講都不一樣了。其實最基礎的我還是覺得雅虎軍規(guī)，就是前人的方法總結了，可能由于時代在變，有些方案也會發(fā)生變化，所以要自己再去深入研究。

雅虎現(xiàn)在前端沒有以前那么好，就是雅虎輝煌的時候很多人都去看看人家是怎么做的?，F(xiàn)在雅虎就沒有像以前那么重視了，或者是由于公司的一些原因。我們可能也不是太了解，但是他們曾經(jīng)留下那些經(jīng)驗是非常好的。

我個人認為在前端開發(fā)上性能和視覺效果永遠是矛盾的，魚與熊掌不能兼得。你認為呢？

嗷嗷：這是很正常，比如設計師喜歡用圖，因為圖能更好的體現(xiàn)出UI效果，但是這些圖要在客戶端呈現(xiàn)的時候，肯定需要下載花費時間的，等待的時候讓你覺得性能變差了，但這也不是完成不能解決的。一些方案比如我們現(xiàn)在利用CSS技術把幾個圖合成一個，盡量控制它的請求數(shù)。也有一些我們比較推薦的是方案，比如我們用一些新技術，IE6這種它不支持的，那我們就可以跟設計帥說那我們在好的瀏覽器中就做出好的效果，低版本的瀏覽器達到可用的效果就可以，消耗又少很多。這樣就盡量找個平衡點，不能這個不能做，那個不能做。

據(jù)我了解在前端開發(fā)中有兩種職位，一個是前端開發(fā)工程師，另一個是前端架構師。這兩種職位的區(qū)別的哪里？在淘寶做前端開發(fā)的有這兩種職位嗎？

嗷嗷：從我個人的角度其實我覺得只是名稱的不同，因為我以前有個想法就是想當前段架構師，但后來我覺得其實任何個前端開發(fā)者都要按照著自己是一個架構師的標準來要求自己，哪怕你做一個很小的業(yè)務，你對這個業(yè)務的架構也是有一定的了解。當然這里的前端架構師指的的是我就是只負責一個大網(wǎng)站的架構，其實這種是很少的，也可能不是特別的需要。因為每個產(chǎn)品都有自己的特性，你一套方案可以適用個別產(chǎn)品，但是不能適用所有的產(chǎn)品。當然也有些方案是通用的，但是現(xiàn)在很多公司他們不叫架構組，他們稱為通用組。就是盡量做一些通用的東西。具體我認為做業(yè)務的人才叫架構師，因為他要設計好這個業(yè)務所需要的東西。

可能一開始新人對公司的業(yè)務不是了解那么多，現(xiàn)在有很多基礎成熟的模式，學習了之后可能會更深入的了解。比如像淘寶的業(yè)務的一些特殊性，詳細的我們會在上面做下記號說明，用戶就能更快的看到了產(chǎn)品的信息，那我們就可以根據(jù)它來做些特殊的處理。那我們認為做這個設計的人他就是一個架構師。我覺的這個架構師人們把它的定位臺的特別高了。

你在做前端性能優(yōu)化過程中有沒有遇過哪些困難？你是如何去解決這些困難的？

嗷嗷：困難肯定是有的，因為之前也了解了前端后端各方面相關的知識，所以在做平臺的時候，像搭建一些基礎平臺，也遇過一些困難。自己可以去解決一些問題，當再取大規(guī)模數(shù)據(jù)的時候很麻煩，同事也給了很多的幫助。對于自己我要求可能也比較高，很多麻煩也有個時間差，對于自己了解會做的時候很快就可以把原型各個方面處理好。

在技術上的一些大問題我個人覺得都沒有什么，從國內(nèi)來說我們前端這塊發(fā)展的比較慢，我們做的東西大部分遇到的問題國外都解決了，或者是有些解決方案。其實我們現(xiàn)在更重要的是把各種解決方案混合在一起，更多大家都是互相幫助，互相借鑒。

做前端性能優(yōu)化有沒有什么技巧？可以快速發(fā)現(xiàn)問題，解決問題？

嗷嗷：其實沒有什么特殊的技巧，第一，你基礎知識要扎實，如果你知識不扎實的情況下去模仿其他人的一些所謂的技巧不一定適用，可能對你還有反作用，而且你還沒有了解他的利弊。然后，我覺得在你的基礎知識扎實了以后，才可以去嘗試別人的一些相關技巧，就能夠把控得住。

假如我是一個前端開發(fā)者，我想去淘寶做前端開發(fā)，你認為我應該具備哪些素質(zhì)和技能？

嗷嗷：淘寶現(xiàn)在的前端綜合性要求可能稍微高點，不像某些公司只要求你會寫腳本或者CSS就行，我們這邊可能有些綜合性的要求。其實關于一些具體的明細要求在這里一項一項列出其實也沒有特別大的意義。

1）對于做前端的有沒有要求像你一樣懂些后端的知識呢？

嗷嗷：現(xiàn)在沒有特別的要求，但是在招聘過程中如果有后端基礎的會優(yōu)先，因為這是一個加分的點。對于以后公司的發(fā)展可能也會開始慢慢的也會要求大家對于后端的知識需要深入了解多一些。

2）對于前端的招聘需要一定要懂得什么JS之類的框架嗎？

嗷嗷：這個倒不一定，對于前端的腳本框架來說其實都是大同小異，只是使用方式不一樣而已。如果對于有深入的了解會更好，這樣你就會了解各種框架的一些利弊。只要有些中層基礎的，稍微學習下其實都可以做。因為框架的本質(zhì)就是控制低成本的使用，所以會包裝一些好用的API。如果你要求對技術深入要有深入的了解，其實你的考察方面是不夠的。

最后，我說一些我個人的看法，對于人才要求我重心偏于他具有專業(yè)的一項技能，對于其他的技能不要求那么專，但盡可能有一項核心技能，這樣的話包括團隊在組建的時候可以起到互補，可以相互學習，這樣大家都有成長的空間。