前端優化分為性能優化 和 代碼優化
首先說下性能優化：
-
減少HTTP請求，這個大家應該都知道吧，具體通過什么樣的途徑來減少請求呢
- CSS Sprites,最常用的方式。一個網頁中有N個icon 時，單獨請求就會有N多個HTTP請求，這極大的影響了頁面的加載時間，如果我們合並成一個圖片，就會好太好了。
- 圖片地圖： map標簽定義一個客戶端圖像映射，圖像映射（image-map）指帶有可點擊區域的一幅圖像。這是在所有主流瀏覽器中都可以兼容的一個標簽屬性。
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>實現圖像映射的關鍵屬性是area ，area元素永遠嵌套在 map 元素內部，可定義圖像映射中的區域。 <img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），所以我們應同時向 <map> 添加 id 和 name 屬性。
<area> 標簽的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的坐標。坐標的數字及其含義取決於 shape 屬性中決定的區域形狀。可以將客戶端圖像映射中的超鏈接區域定義為矩形、圓形或多邊形等
- （不建議此種）內聯圖片和腳本使用data:URL（Base64編碼）模式直接將圖片包含在Web頁面中而無需進行HTTP請求。但是此種方法存在明顯缺陷：- 不受IE的歡迎；- 圖片太大不宜采用這種方式，因為Base64編碼之后會增加圖片大小，這樣頁面整體的下載量會變大；- 內聯圖片在頁面跳轉的時候不會被緩存。（大圖片可以使用瀏覽器的本地緩存，在首次訪問的時候保存到瀏覽器緩存中，典型的是HTML5的manifest緩存機制以及LocalStorage等）。
- 合並css,能合並的盡量合並，grunt,gulp等好多方式可以處理
2.使用內容發布網絡（CDN）
什么是CDN，是分布在不同位置的服務器，主要存放靜態資源（圖片,css, js等），以便用戶更加快速的訪問內容。
3.添加本地緩存
加入本地緩存，在第一次訪問時，把靜態資源緩存到瀏覽器，第二次訪問不會再次發送請求。瀏覽本身的緩存機制並不是十分靠譜，個人推薦用html5的manifest,只需要一個配置文件就ok。還有一種存放到localStorage的（個人沒有嘗試過）。
4.壓縮資源文件
壓縮文件大小，可以提高加載速度
5.將CSS樣式表放在頂部，把javascript放在底部
把css文件放在中部或者底部，會造成網頁會出現短暫閃爍或者空白，這是由瀏覽器的運行機制決定的。把js放在也是為了避免出現此種問題，因為js會阻塞文件加載。
6.避免使用CSS表達式
css表達式是動態的css的一種很強大的方式，但是同時會帶來性能問題（慎用）。
7.配置ETag
Etag在請求資源是會對比服務器上次返回的etag是否一致，如果一致，則請求為304（協商緩存）。還是推薦manifest的方式緩存。
8.減少DNS查詢
DNS查詢有時間開銷，通常一個瀏覽器查找一個給定主機名的IP地址需要20-120ms。緩存DNS：緩存DNS查詢可以很好地提高網頁性能，一旦緩存了DNS查詢，之后對於相同主機名的請求就無需進行再次的DNS查找，至少短時間內不需要。所以在使用頁面中URL、圖片、js文件、css文件等時，不要使用過多不同的主機名。
9.使用外部javascript和CSS
css 和 javascript 寫在html 中，首先不規范，導致復用率減低，第二，使用外部的js和css可以讓瀏覽器緩存他們。
10.精簡javascript
最初始的精簡方式：就是移除不必要的字符減小js文件大小，改善加載時間。包括所有的注釋、不必要的空白字符。
高級一點的精簡方式就是：混淆。
它不但會移除不必要的字符，還會改寫代碼，比如函數和變量的名字會被改成很短的字符串，這樣使js代碼更簡練更難閱讀。
11.避免重定向
重定向的英文是Redirect，用於將用戶從一個URL重新跳轉到另一個URL。
最常見的Redirect就是301和302兩種。
在我們實際開發中避免重定向最簡單也最容易被忽視的一個問題就是，設置URL的時候，最后的“/”，有些人有時候會忽略，其實你少了“/”，這時候的URL就被重定 向了，所以在給頁面鏈接加URL的時候切記最后的“/”不可丟。
12.刪除重復腳本
重復的js代碼除了有不必要的HTTP請求之外，還會浪費執行js的時間。
將你使用的js代碼模塊化，可以很好地避免這個問題，至於js模塊化如何實現，現在有很多可以使用的開源框架，我用的比較多的是我們公司玉伯的Sea.js。
13.使Ajax可緩存
針對頁面中主動的Ajax請求返回的數據要緩存到本地，當然這個是針對短期內不會變化的數據。如果不確定數據變化周期的話，可以增加一個修改標識的判斷，我正常處理過程中會給一些Ajax請求返回的數據增加一個MD5值的判斷，每次請求會判斷當前MD5是否變化，如果變化了取最新的數據，如果不變化，則不變.
14，圖片lazyLoad
當遇到圖片略多的網頁時，如果在PC端還算勉強可以，但是當移到移動端時，加載速度可想而知，還浪費了流量。比較好的辦法就是用戶瀏覽到可視區域才加載圖片。
代碼優化：
1.正確理解 Repaint 和 Reflow
Repaint：重繪，只是改變外觀，並不改變布局結構。如： 背景色，outline等
Reflow：重排，DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器重新計算元素的寬高，會是渲染受到影響的部分失效。瀏覽器也會重新去驗證dom中其他元素的visibility屬性。這也是reflow影響性能的原因。例如：改變瀏覽器窗口大小，文字大小變化，結構調整，style屬性的改變等等。如果Reflow的過於頻繁，CPU使用率就會噌噌的往上漲，所以前端也就有必要知道 Repaint 和 Reflow的知識。
上面提到的重排，通過style屬性設置，每設置一次，就會reflow一次。最好通過class設置。當頁面需要有動畫效果是，盡量使用fixed 或者absolute.不影響其他元素。有時候需求不允許這樣，我們只能盡可能的縮小影響范圍。
2.減少DOM操作
在《高性能的javascript》的一書中，曾經這樣描述“把DOM看成一個島嶼，把JavaScript(ECMAScript)看成另一個島嶼，兩者之間以一座收費橋連接”，每過一次橋，就要交一次費。所以建議減少過橋次數。
DOM操作會使頁面repaint 和 Reflow，合理利用存儲變量。考慮大量dom循環的性能開銷，在循環結束時一次性插入。
減少查詢和操作dom元素，查詢時將值賦給全局變量。
3.使用JSON格式進行數據交換
json 是一種輕量級的數據交互格式，采用完全獨立語言的文本格式。相對XML，體積小，簡單易懂
4.給圖片加上寬高
網頁中如果不給圖片加上寬高，會導致圖片原來位置會被其他元素占據，知道瀏覽器下載完圖片才顯示出來，頁面又會reflow，加上寬高，可以減少頁面重繪，防止圖片縮放
5.少用全局變量
變量都層層查找的，最后才會到window層。
6.減少對象查找，如a.b.c.d這種查找方式非常耗性能，盡可能把它定義在變量里；
7.對字符串進行循環操作，譬如替換、查找，應使用正則表達式；
8.類型轉換：把數字轉換成字符串使用”” + 1，浮點數轉換成整型使用Math.floor()或者Math.round()；
9.不使用EVAL；
10.避免404錯誤：特別要避免給404指定一個停擺頁面，否則所有404錯誤都將會加載一次頁面；
好了，知道的都總結了，歡迎大家指正