很高興看到越來越多的企業重視前端開發了，前端不再是**開發人員的附屬技能。回想我剛開始入行時，那時asp**（非asp.net）盛行，80%的**都是用asp來做的,乙個網頁可能就是乙個asp檔案，裡面前端**和後端**混在一起。現在不同了，前後端分離，前端可以專注於展示了，不用太在意後端的實現。但是，因為前端發展太快，展示環境也複雜多變，需要前端開發者掌握更廣的知識。
何為化零為整？通俗點說，就是我們將細碎的東西集成為乙個整體，通過操作這個整體，也能達到逐個操作細碎東西的效果。比如，你給我四個蘋果，我雙手可以拿著到處走動；如果給我十個蘋果，我全兜手上，走起路來可能會慢些了，因為要照顧蘋果，怕掉了;但是，如果你再給我個袋子，我把十個蘋果裝裡面，它們就成為乙個整體，我就可以拎著到處跑了。
ok，說了這麼一通，開始細數前端中需要化零為整的地方吧。
1.atlas/sprite assets/精靈圖/雪碧圖
這些都是對圖集合的稱呼，圖集合就是在做資源的時候，將一些小的元素集中做到一張中。在使用時，通過一些引數，來顯示大圖集合中所需要那個原素。比如，需要這個大圖的某個icon來做為div的背景，則除了將這個大圖設為div的背景外，還需要更改背景圖的位置（position）來顯示具體某小圖。
2.事件委託
面試時，我經常問的乙個問題，有乙個列表頁，頁面結構是外面乙個body， 裡面有一萬個子div，每個div裡面有一些文字，這些文字都不相同。需求是，點選乙個div，要求彈個alert框，將div裡的文字顯示出來。你會怎麼做。
30%的人會用jquery來綁事件，認為看著簡潔，應該效率高，如：$("body>div").click(……) ，有20%的人會寫原生的語句來遍歷，給每個div新增點選事件，有10%的人回答，在頁面滾動時，存下頁面滾動的高度，在點選時，獲取觸發點在螢幕的y座標，將y的座標和頁面滾動的高度相加，然後除以每個div的高度，就知道點了第幾個元素，再將這個元素的內容彈出來。（或其它類似的做法）
回答出以上答案的面試者在這題會被扣分，正確答案是，只用給外面的元素（本題是body）新增點選事件，在點選時，可以獲取到引發點選事件的源元素（如某div），將這個元素的文字內容彈出來即可。
3.長連線 keep alive
這點和後端有關係了，不光是前端的事了。大多數網頁是用http方式來獲取資源（如，樣式表檔案，js檔案等），有部分伺服器不會維持連線，來了個請求，就建立連線，然後輸出內容，輸出完後斷開連線，再重新建立下個請求的連線和輸出。如果乙個網頁需要請求一百個檔案，伺服器就要建立和斷開一百次連線。每次建立和斷開都需要時間（甚至比傳輸資料時間還長），無疑增加了頁面的呈現時間。如果伺服器啟用了keep alive，不光減輕了伺服器負擔，也加快了頁面開啟時間。
如下圖，我們可以看到，實際接收內容的時間(receiving)是很短的，大部分時間花在了等待（waiting）和阻塞(blocking)。
4.多dom合併
由於前端表現越來越豐富，頁面上東西也越來越多，隨之而來的問題是dom太多了，在做一些dom操作時，會帶來效能問題。在dom非常多的情況下，我們有必要把dom進行合併，可以考慮把多個dom合併為少量幾個，或在可以的情況下，使用canvas來展示。
如：有些需求會要求前端開發者做這種日期選擇器
如果使用乙個dom來裝乙個選項（如：1970），不考慮按鈕，單獨看日期選項的話，可能會需要44+12+31=87個dom，對於移動瀏覽器來說，dom越少越好。萬一產品後來一想，除了日期，還要新增時分秒選項呢？這就需要44+12+31+24+60+60=231個dom了。但我們可以細想一下，如果把各欄位（年、月、日）只用乙個很高的容器（如div）來裝，內容可以用換行符來換行，取值時通過一些演算法來得到，是不是大幅縮小了dom數量？從87個dom變為3個dom。少了乙個數量級。
5.websocket
很多網頁有實時更新資料的要求,如**類**。為了避免頁面重新整理，會使用ajax來進行長輪詢，每隔一段時間（如一秒鐘）就連一次伺服器取下資料。這樣會造成大量的請求連線，不止給前端，也給後端帶來了不小的壓力。幸好html5給我們帶來了websocket,網頁能夠和伺服器保持長連線，通過長連線來維持資料的實時更新了。
6.css屬性繼承
css會繼承父元素的屬性，我們可以將一些通用的屬性在父元素的css中定義，子元素通過繼承來獲取這些元素。在某些情況下，合理使用繼承能較明顯地縮小css檔案的大小。
7.documentfragment
"乙個列表頁，需要你往裡面插入一千個dom，你怎麼做？" 這是我經常問別人的一道題。
很多時候，你往頁面中加乙個dom，就會引起頁面的重構。如果你使用遍歷來逐一新增，每新增一次，頁面都會重新渲染一次，這種做法會帶來效能的下降。好的方式是把要新增的元素先快取起來， 要新增時一次性新增。一般會使用documentfragment來進行快取，還有些使用長的字串（html**串）來快取。
8.多動畫合併為乙個
在做css3的動畫時，如果需求中要求有多步驟的動畫（如，將乙個div沿y軸旋轉30度，接著沿x軸旋轉30度，再沿z軸旋轉30度），我們可以將這些動畫合併，使用animation的關鍵幀來將這些步驟隔離。省去多步操作dom的成本。
9.多檔案壓縮與合併
對js和css檔案壓縮，是前端縮小網路傳輸量的有效方式（壓縮的做法一般是去除多餘空格和換行，以及替換變數名或方法名。yui
compressor是個不錯的工具）
將多個小的js或css檔案合併（merge）為乙個大檔案，這種做法可以大幅減少請示的次數。
，謝謝！
前端優化 靜態鏈結版本化
我們知道在伺服器端不做任何設定的情況下，瀏覽器缺省會自動對靜態資源進行快取。但是每個版本的一些靜態資源或多或少都會有所不同。避免瀏覽器快取的方法是更新鏈結 版本發布 時給靜態資源鏈結新增版本號 這樣瀏覽器識別為新的鏈結，就會去get資源了。第一種方案是考慮每個模板檔案的靜態鏈結後新增類似?v ver...
前端優化的規則
1.減少http請求 條件get請求每次都會產生乙個304的請求 4.壓縮元件 在server端對response資源進行壓縮再傳給瀏覽器,一般使用gzip 5.將css放再頂部 能加快頁面內容顯示,並且能避免頁面產生白屏 6.將js放在底部 7.避免css表示式 8.將js,css放在外部檔案中 ...
前端的效能優化
1.精簡 把重複的 提取出來，例如js，css呼叫那一大段 用外掛程式把js，css中的空格去掉。2.多利用快取機制，前端可以用last modified expires和etag。後台的話可以用redis。3.在html中不要放 後台傳檔案時用gzip壓縮 4.寫css檔案時，選擇器的層級不要超過...