建站
咨詢
售后
建站咨詢
新聞中心
在2012年7月7日阿里技術(shù)嘉年華上記者遇到阿里巴巴前端技術(shù)專家劉杰（花名：嗷嗷）。嗷嗷從事前端開發(fā)多年，期間做過(guò)設(shè)計(jì)轉(zhuǎn)過(guò)產(chǎn)品，混過(guò)后端，寫過(guò)《Web 標(biāo)準(zhǔn)設(shè)計(jì)》一書。目前就職于淘寶網(wǎng)，主要負(fù)責(zé)前端性能監(jiān)控、優(yōu)化等前端開發(fā)相關(guān)的工作。在會(huì)上嗷嗷以“如何發(fā)現(xiàn)前端的性能問(wèn)題”為話題分享了如何通過(guò)日志來(lái)分析問(wèn)題，如何通過(guò) har 來(lái)分析問(wèn)題以及通過(guò)監(jiān)控來(lái)發(fā)現(xiàn)問(wèn)題等內(nèi)容。
嗷嗷你好，據(jù)我的了解你之前有做過(guò)設(shè)計(jì)、產(chǎn)品以及后端，是因?yàn)槭裁醋屇銖氖虑岸碎_發(fā)的？
嗷嗷：其實(shí)這跟個(gè)人的發(fā)展有關(guān)吧，不同的階段可能你需要了解到一些知識(shí)也不一樣，比如你想深入了解后端的一些東西，那你如果作為一名前端的，所以你了解的不夠多也不夠深入?；蛘呤羌词鼓懔私獾降闹皇瞧?，不知道他們?yōu)槭裁催@么做。你只有整個(gè)人切過(guò)去的時(shí)候才知道那你就可以比較深入的了解他們?yōu)槭裁催@么做，這樣做有什么好處。然后回過(guò)來(lái)的時(shí)候你就會(huì)把這些偷來(lái)匯總應(yīng)用。
現(xiàn)在國(guó)內(nèi)的前端分很多種，像淘寶的前端現(xiàn)階段可能稍微純前端一種，像我以前我在有些公司呆過(guò)，前端他有寫一些后端開發(fā)的東西，這些只是一個(gè)名字而已，可能跟自己的職者在不同的公司下區(qū)分還不一樣。
前端性能優(yōu)化是一項(xiàng)非常重要的技術(shù)活，對(duì)于用戶體驗(yàn)有非常大的影響。但是對(duì)于一些剛踏入的前端開發(fā)人員可能在技術(shù)上有些限制，你對(duì)他們有什么好的建議嗎？
嗷嗷：其實(shí)現(xiàn)在進(jìn)入前端的同學(xué)比較幸運(yùn)吧，因?yàn)楝F(xiàn)在已經(jīng)有一些大量的經(jīng)驗(yàn)，方法，優(yōu)化等等。對(duì)于剛剛?cè)腴T的時(shí)候，認(rèn)真學(xué)習(xí)這些東西已經(jīng)足夠了，雖然這些東西比較通用，可能對(duì)于某些業(yè)務(wù)不具備非常好的優(yōu)化，但對(duì)于入門的話用利用這些來(lái)了解為什么，比如這些東西為什么這樣做會(huì)更好，了解這些信息的時(shí)候，這樣你的能力就會(huì)提升了。當(dāng)你了解這些信息的時(shí)候你就會(huì)針對(duì)業(yè)務(wù)做一些個(gè)性化的定制或者處理。
對(duì)于現(xiàn)在的前端性能優(yōu)化的規(guī)范特別多，以你的經(jīng)驗(yàn)來(lái)說(shuō)，有哪些建議比較重要？
嗷嗷：規(guī)范也不是特別多，大家了解最多的是網(wǎng)站性能優(yōu)化的34條黃金法則，我們稱之為雅虎軍規(guī)，但也不能說(shuō)是規(guī)范，它只是一個(gè)建議。但不同的公司都有著不同的背景會(huì)導(dǎo)致每個(gè)公司都會(huì)加上自己的一些特殊的東西。所以讓人感覺(jué)有很多，每個(gè)人出來(lái)講都不一樣了。其實(shí)最基礎(chǔ)的我還是覺(jué)得雅虎軍規(guī)，就是前人的方法總結(jié)了，可能由于時(shí)代在變，有些方案也會(huì)發(fā)生變化，所以要自己再去深入研究。
雅虎現(xiàn)在前端沒(méi)有以前那么好，就是雅虎輝煌的時(shí)候很多人都去看看人家是怎么做的?，F(xiàn)在雅虎就沒(méi)有像以前那么重視了，或者是由于公司的一些原因。我們可能也不是太了解，但是他們?cè)?jīng)留下那些經(jīng)驗(yàn)是非常好的。
我個(gè)人認(rèn)為在前端開發(fā)上性能和視覺(jué)效果永遠(yuǎn)是矛盾的，魚與熊掌不能兼得。你認(rèn)為呢？
嗷嗷：這是很正常，比如設(shè)計(jì)師喜歡用圖，因?yàn)閳D能更好的體現(xiàn)出UI效果，但是這些圖要在客戶端呈現(xiàn)的時(shí)候，肯定需要下載花費(fèi)時(shí)間的，等待的時(shí)候讓你覺(jué)得性能變差了，但這也不是完成不能解決的。一些方案比如我們現(xiàn)在利用CSS技術(shù)把幾個(gè)圖合成一個(gè)，盡量控制它的請(qǐng)求數(shù)。也有一些我們比較推薦的是方案，比如我們用一些新技術(shù)，IE6這種它不支持的，那我們就可以跟設(shè)計(jì)帥說(shuō)那我們?cè)诤玫臑g覽器中就做出好的效果，低版本的瀏覽器達(dá)到可用的效果就可以，消耗又少很多。這樣就盡量找個(gè)平衡點(diǎn)，不能這個(gè)不能做，那個(gè)不能做。
據(jù)我了解在前端開發(fā)中有兩種職位，一個(gè)是前端開發(fā)工程師，另一個(gè)是前端架構(gòu)師。這兩種職位的區(qū)別的哪里？在淘寶做前端開發(fā)的有這兩種職位嗎？
嗷嗷：從我個(gè)人的角度其實(shí)我覺(jué)得只是名稱的不同，因?yàn)槲乙郧坝袀€(gè)想法就是想當(dāng)前段架構(gòu)師，但后來(lái)我覺(jué)得其實(shí)任何個(gè)前端開發(fā)者都要按照著自己是一個(gè)架構(gòu)師的標(biāo)準(zhǔn)來(lái)要求自己，哪怕你做一個(gè)很小的業(yè)務(wù)，你對(duì)這個(gè)業(yè)務(wù)的架構(gòu)也是有一定的了解。當(dāng)然這里的前端架構(gòu)師指的的是我就是只負(fù)責(zé)一個(gè)大網(wǎng)站的架構(gòu)，其實(shí)這種是很少的，也可能不是特別的需要。因?yàn)槊總€(gè)產(chǎn)品都有自己的特性，你一套方案可以適用個(gè)別產(chǎn)品，但是不能適用所有的產(chǎn)品。當(dāng)然也有些方案是通用的，但是現(xiàn)在很多公司他們不叫架構(gòu)組，他們稱為通用組。就是盡量做一些通用的東西。具體我認(rèn)為做業(yè)務(wù)的人才叫架構(gòu)師，因?yàn)樗O(shè)計(jì)好這個(gè)業(yè)務(wù)所需要的東西。
可能一開始新人對(duì)公司的業(yè)務(wù)不是了解那么多，現(xiàn)在有很多基礎(chǔ)成熟的模式，學(xué)習(xí)了之后可能會(huì)更深入的了解。比如像淘寶的業(yè)務(wù)的一些特殊性，詳細(xì)的我們會(huì)在上面做下記號(hào)說(shuō)明，用戶就能更快的看到了產(chǎn)品的信息，那我們就可以根據(jù)它來(lái)做些特殊的處理。那我們認(rèn)為做這個(gè)設(shè)計(jì)的人他就是一個(gè)架構(gòu)師。我覺(jué)的這個(gè)架構(gòu)師人們把它的定位臺(tái)的特別高了。
你在做前端性能優(yōu)化過(guò)程中有沒(méi)有遇過(guò)哪些困難？你是如何去解決這些困難的？
嗷嗷：困難肯定是有的，因?yàn)橹耙擦私饬饲岸撕蠖烁鞣矫嫦嚓P(guān)的知識(shí)，所以在做平臺(tái)的時(shí)候，像搭建一些基礎(chǔ)平臺(tái)，也遇過(guò)一些困難。自己可以去解決一些問(wèn)題，當(dāng)再取大規(guī)模數(shù)據(jù)的時(shí)候很麻煩，同事也給了很多的幫助。對(duì)于自己我要求可能也比較高，很多麻煩也有個(gè)時(shí)間差，對(duì)于自己了解會(huì)做的時(shí)候很快就可以把原型各個(gè)方面處理好。
在技術(shù)上的一些大問(wèn)題我個(gè)人覺(jué)得都沒(méi)有什么，從國(guó)內(nèi)來(lái)說(shuō)我們前端這塊發(fā)展的比較慢，我們做的東西大部分遇到的問(wèn)題國(guó)外都解決了，或者是有些解決方案。其實(shí)我們現(xiàn)在更重要的是把各種解決方案混合在一起，更多大家都是互相幫助，互相借鑒。
做前端性能優(yōu)化有沒(méi)有什么技巧？可以快速發(fā)現(xiàn)問(wèn)題，解決問(wèn)題？
嗷嗷：其實(shí)沒(méi)有什么特殊的技巧，第一，你基礎(chǔ)知識(shí)要扎實(shí)，如果你知識(shí)不扎實(shí)的情況下去模仿其他人的一些所謂的技巧不一定適用，可能對(duì)你還有反作用，而且你還沒(méi)有了解他的利弊。然后，我覺(jué)得在你的基礎(chǔ)知識(shí)扎實(shí)了以后，才可以去嘗試別人的一些相關(guān)技巧，就能夠把控得住。
假如我是一個(gè)前端開發(fā)者，我想去淘寶做前端開發(fā)，你認(rèn)為我應(yīng)該具備哪些素質(zhì)和技能？
嗷嗷：淘寶現(xiàn)在的前端綜合性要求可能稍微高點(diǎn)，不像某些公司只要求你會(huì)寫腳本或者CSS就行，我們這邊可能有些綜合性的要求。其實(shí)關(guān)于一些具體的明細(xì)要求在這里一項(xiàng)一項(xiàng)列出其實(shí)也沒(méi)有特別大的意義。
1）對(duì)于做前端的有沒(méi)有要求像你一樣懂些后端的知識(shí)呢？
嗷嗷：現(xiàn)在沒(méi)有特別的要求，但是在招聘過(guò)程中如果有后端基礎(chǔ)的會(huì)優(yōu)先，因?yàn)檫@是一個(gè)加分的點(diǎn)。對(duì)于以后公司的發(fā)展可能也會(huì)開始慢慢的也會(huì)要求大家對(duì)于后端的知識(shí)需要深入了解多一些。
2）對(duì)于前端的招聘需要一定要懂得什么JS之類的框架嗎？
嗷嗷：這個(gè)倒不一定，對(duì)于前端的腳本框架來(lái)說(shuō)其實(shí)都是大同小異，只是使用方式不一樣而已。如果對(duì)于有深入的了解會(huì)更好，這樣你就會(huì)了解各種框架的一些利弊。只要有些中層基礎(chǔ)的，稍微學(xué)習(xí)下其實(shí)都可以做。因?yàn)榭蚣艿谋举|(zhì)就是控制低成本的使用，所以會(huì)包裝一些好用的API。如果你要求對(duì)技術(shù)深入要有深入的了解，其實(shí)你的考察方面是不夠的。
最后，我說(shuō)一些我個(gè)人的看法，對(duì)于人才要求我重心偏于他具有專業(yè)的一項(xiàng)技能，對(duì)于其他的技能不要求那么專，但盡可能有一項(xiàng)核心技能，這樣的話包括團(tuán)隊(duì)在組建的時(shí)候可以起到互補(bǔ)，可以相互學(xué)習(xí)，這樣大家都有成長(zhǎng)的空間。
名稱欄目：51CTO專訪嗷嗷：WEB前端性能優(yōu)化問(wèn)題
網(wǎng)頁(yè)網(wǎng)址：http://www.dlmjj.cn/article/codohhd.html
