原文作者：Arfei Zhang
很高興看到越來越多的企業(yè)重視前端開發(fā)了，前端不再是網(wǎng)站開發(fā)人員的附屬技能泰偿∏榱回想我剛開始入行時，那時ASP網(wǎng)站（非ASP.NET）盛行肋僧，80%的網(wǎng)站都是用ASP來做的,一個網(wǎng)頁可能就是一個ASP文件舱污，里面前端代碼和后端代碼混在一起。現(xiàn)在不同了特碳，前后端分離刻两，前端可以專注于展示了增蹭，不用太在意后端的實現(xiàn)。但是磅摹，因為前端發(fā)展太快滋迈，展示環(huán)境也復(fù)雜多變，需要前端開發(fā)者掌握更廣的知識户誓。
這篇雜談饼灿，我打算從一個比較廣的面(包含JS,CSS,網(wǎng)絡(luò)傳輸,HTML5等)，以化整為零為出發(fā)點(diǎn)厅克，來和大家介紹一些前端優(yōu)化的方法。（因為個人知識和經(jīng)驗有限橙依，除了文中提到的幾點(diǎn)证舟，一定還有別的優(yōu)化方法有化零為整的特性，歡迎大家一起補(bǔ)充哈,本文會不定期更新）
何為化零為整窗骑？通俗點(diǎn)說女责，就是我們將細(xì)碎的東西整合為一個整體，通過操作這個整體创译，也能達(dá)到逐個操作細(xì)碎東西的效果抵知。比如，你給我四個蘋果软族，我雙手可以拿著到處走動刷喜；如果給我十個蘋果，我全兜手上立砸，走起路來可能會慢些了掖疮，因為要照顧蘋果，怕掉了;但是颗祝，如果你再給我個袋子浊闪，我把十個蘋果裝里面，它們就成為一個整體螺戳，我就可以拎著到處跑了搁宾。
OK，說了這么一通倔幼，開始細(xì)數(shù)前端中需要化零為整的地方吧盖腿。
1.atlas/sprite assets/精靈圖/雪碧圖
這些都是對圖集合的稱呼，圖集合就是在做圖片資源的時候损同，將一些小的圖片元素集中做到一張圖片中奸忽。在使用時堕伪，通過一些參數(shù)，來顯示大圖集合中所需要那個圖片原素栗菜。比如欠雌，需要這個大圖的某個ICON來做為DIV的背景，則除了將這個大圖設(shè)為DIV的背景外疙筹，還需要更改背景圖的位置（position）來顯示具體某小圖富俄。
例：某網(wǎng)站的sprite assets如下：
2.事件委托
面試時，我經(jīng)常問的一個問題而咆，有一個列表頁霍比，頁面結(jié)構(gòu)是外面一個BODY， 里面有一萬個子DIV暴备，每個DIV里面有一些文字悠瞬，這些文字都不相同。需求是涯捻，點(diǎn)擊一個DIV浅妆，要求彈個alert框，將DIV里的文字顯示出來障癌。你會怎么做凌外。
30%的人會用JQuery來綁事件，認(rèn)為看著簡潔涛浙，應(yīng)該效率高康辑，如：$("body>div").click(……) ?，有20%的人會寫原生的語句來遍歷轿亮，給每個DIV添加點(diǎn)擊事件疮薇，有10%的人回答，在頁面滾動時我注，存下頁面滾動的高度惦辛，在點(diǎn)擊時，獲取觸發(fā)點(diǎn)在屏幕的Y坐標(biāo)仓手，將Y的坐標(biāo)和頁面滾動的高度相加胖齐，然后除以每個DIV的高度，就知道點(diǎn)了第幾個元素嗽冒，再將這個元素的內(nèi)容彈出來呀伙。（或其它類似的做法）
回答出以上答案的面試者在這題會被扣分，正確答案是添坊，只用給外面的元素（本題是BODY）添加點(diǎn)擊事件剿另，在點(diǎn)擊時，可以獲取到引發(fā)點(diǎn)擊事件的源元素（如某DIV），將這個元素的文本內(nèi)容彈出來即可雨女。
3.長連接 keep alive
這點(diǎn)和后端有關(guān)系了谚攒，不光是前端的事了。大多數(shù)網(wǎng)頁是用http方式來獲取資源（如圖片氛堕，樣式表文件馏臭，JS文件等），有部分服務(wù)器不會維持連接讼稚，來了個請求括儒，就建立連接，然后輸出內(nèi)容锐想，輸出完后斷開連接帮寻，再重新建立下個請求的連接和輸出。如果一個網(wǎng)頁需要請求一百個文件赠摇，服務(wù)器就要建立和斷開一百次連接固逗。每次建立和斷開都需要時間（甚至比傳輸數(shù)據(jù)時間還長），無疑增加了頁面的呈現(xiàn)時間藕帜。如果服務(wù)器啟用了keep alive烫罩，不光減輕了服務(wù)器負(fù)擔(dān)，也加快了頁面打開時間耘戚。
如下圖嗡髓，我們可以看到操漠，實際接收內(nèi)容的時間(Receiving)是很短的收津，大部分時間花在了等待（Waiting）和阻塞(Blocking)。
4.多DOM合并
由于前端表現(xiàn)越來越豐富浊伙，頁面上東西也越來越多撞秋，隨之而來的問題是DOM太多了，在做一些DOM操作時嚣鄙，會帶來性能問題吻贿。在DOM非常多的情況下，我們有必要把DOM進(jìn)行合并哑子，可以考慮把多個DOM合并為少量幾個舅列，或在可以的情況下，使用CANVAS來展示卧蜓。
如：有些需求會要求前端開發(fā)者做這種日期選擇器
如果使用一個DOM來裝一個選項（如：1970）帐要，不考慮按鈕，單獨(dú)看日期選項的話弥奸，可能會需要44+12+31=87個DOM榨惠，對于移動瀏覽器來說，DOM越少越好。萬一產(chǎn)品后來一想赠橙，除了日期耽装，還要添加時分秒選項呢？這就需要44+12+31+24+60+60=231個DOM了期揪。但我們可以細(xì)想一下掉奄，如果把各字段（年、月横侦、日）只用一個很高的容器（如DIV）來裝挥萌，內(nèi)容可以用換行符來換行，取值時通過一些算法來得到枉侧，是不是大幅縮小了DOM數(shù)量引瀑？從87個DOM變?yōu)?個DOM。少了一個數(shù)量級榨馁。
5.WebSocket
很多網(wǎng)頁有實時更新數(shù)據(jù)的要求,如證券類網(wǎng)站憨栽。為了避免頁面刷新，會使用AJAX來進(jìn)行長輪詢翼虫，每隔一段時間（如一秒鐘）就連一次服務(wù)器取下數(shù)據(jù)屑柔。這樣會造成大量的請求連接，不止給前端珍剑，也給后端帶來了不小的壓力掸宛。幸好HTML5給我們帶來了WebSocket,網(wǎng)頁能夠和服務(wù)器保持長連接，通過長連接來維持?jǐn)?shù)據(jù)的實時更新了招拙。
6.CSS屬性繼承
CSS會繼承父元素的屬性唧瘾，我們可以將一些通用的屬性在父元素的CSS中定義，子元素通過繼承來獲取這些元素别凤。在某些情況下饰序，合理使用繼承能較明顯地縮小CSS文件的大小。
7.documentFragment
"一個列表頁规哪，需要你往里面插入一千個DOM求豫，你怎么做？" 這是我經(jīng)常問別人的一道題诉稍。
很多時候蝠嘉，你往頁面中加一個DOM，就會引起頁面的重構(gòu)杯巨。如果你使用遍歷來逐一添加娃属，每添加一次辱挥，頁面都會重新渲染一次沦补，這種做法會帶來性能的下降踢俄。好的方式是把要添加的元素先緩存起來蚊逢， 要添加時一次性添加。一般會使用documentFragment來進(jìn)行緩存箫章，還有些使用長的字符串（HTML代碼串）來緩存烙荷。
8.多動畫合并為一個
在做CSS3的動畫時，如果需求中要求有多步驟的動畫（如檬寂，將一個DIV沿Y軸旋轉(zhuǎn)30度终抽，接著沿X軸旋轉(zhuǎn)30度，再沿Z軸旋轉(zhuǎn)30度）桶至，我們可以將這些動畫合并昼伴，使用animation的關(guān)鍵幀來將這些步驟隔離。省去多步操作DOM的成本镣屹。
9.多文件壓縮與合并
對JS和CSS文件壓縮圃郊，是前端縮小網(wǎng)絡(luò)傳輸量的有效方式（壓縮的做法一般是去除多余空格和換行，以及替換變量名或方法名女蜈。YUICompressor是個不錯的工具）
將多個小的JS或CSS文件合并（merge）為一個大文件持舆，這種做法可以大幅減少請示的次數(shù)。
