Web前端性能優化經驗分享

　　最近一直有給新同學做前端方面的培訓，也有去參與公司前端的招聘，所以把自己資料庫里面很多高效且有用的知識做了些規整分類，然后再分享一篇關于前端優化方面的總結。而且春節一過就又是招聘的高峰期了，在校的、跳槽的、浮躁的都開始進入面試的大軍，前端優化也是前端面試一般會問到的東西，所以希望能對朋友們有用。

　　1.請減少HTTP請求

　　基本原理：

　　在瀏覽器(客戶端)和服務器發生通信時，就已經消耗了大量的時間，尤其是在網絡情況比較糟糕的時候，這個問題尤其的突出。

　　一個正常HTTP請求的流程簡述：如在瀏覽器中輸入"www.xxxxxx.com"并按下回車，瀏覽器再與這個URL指向的服務器建立連接，然后瀏覽器才能向服務器發送請求信息，服務器在接受到請求的信息后再返回相應的信息，瀏覽器接收到來自服務器的應答信息后，對這些數據解釋執行。

　　而當我們請求的網頁文件中有很多圖片、CSS、JS甚至音樂等信息時，將會頻繁的與服務器建立連接，與釋放連接，這必定會造成資源的浪費，且每個HTTP請求都會對服務器和瀏覽器產生性能負擔。

　　網速相同的條件下，下載一個100KB的圖片比下載兩個50KB的圖片要快。所以，請減少HTTP請求。

　　解決辦法：

　　合并圖片(css sprites)，合并CSS和JS文件;圖片較多的頁面也可以使用 lazyLoad 等技術進行優化。

　　2.請正確理解 Repaint 和 Reflow

　　注：Repaint 和 Reflow 也就是重繪和重排，請允許我在這賣弄下我有限認識的那么幾個英語單詞...囧

　　基本原理：

　　Repaint(重繪)就是在一個元素的外觀被改變，但沒有改變布局(寬高)的情況下發生，如改變visibility、outline、背景色等等。

　　Reflow(重排)就是DOM的變化影響到了元素的幾何屬性 (寬和高)，瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如：改變窗囗大小、改變文字大小、內容的改變、瀏覽器窗口變化，style屬性的改變等等。如果Reflow的過于頻繁，CPU使用率就會噌噌的往上漲，所以前端也就有必要知道 Repaint 和 Reflow的知識。

　　減少性能影響的辦法：

　　上面提到通過設置style屬性改變結點樣式的話，每設置一次都會導致一次reflow，所以最好通過設置class的方式;　有動畫效果的元素，它的position屬性應當設為fixed或absolute，這樣不會影響其它元素的布局;如果功能需求上不能設置position為fixed或absolute，那么就權衡速度的平滑性。

　　總之，因為 Reflow 有時確實不可避免，所以只能盡可能限制Reflow的影響范圍。

　　3.請減少對DOM的操作

　　基本原理：

　　對DOM操作的代價是高昂的，這在網頁應用中的通常是一個性能瓶頸。

　　天生就慢。在《高性能JavaScript》中這么比喻：“把 DOM看成一個島嶼，把JavaScript(ECMAScript)看成另一個島嶼，兩者之間以一座收費橋連接”。所以每次訪問DOM都會教一個過橋費，而訪問的次數越多，交的費用也就越多。所以一般建議盡量減少過橋次數。

　　解決辦法：

　　修改和訪問DOM元素會造成頁面的Repaint和Reflow，循環對DOM操作更是罪惡的行為。所以請合理的使用JavaScript變量儲存內容，考慮大量DOM元素中循環的性能開銷，在循環結束時一次性寫入。

　　減少對DOM元素的查詢和修改，查詢時可將其賦值給局部變量。

　　注：在IE中:hover會降低響應速度。

　　4.使用JSON格式來進行數據交換

　　基本原理：

　　JSON是一種輕量級的數據交換格式，采用完全獨立于語言的文本格式，是理想的數據交換格式。同時，JSON是 JavaScript原生格式，這意味著在 JavaScript 中處理 JSON數據不需要任何特殊的 API 或工具包。

　　與XML序列化相比，JSON序列化后產生的數據一般要比XML序列化后數據體積小，所以在Facebook等知名網站中都采用了JSON作為數據交換方式。

　　JS操作JSON：

　　在JSON中，有兩種結構：對象和數組。

　　1. 一個對象以 “ { ” 開始，“ } ” 結束。每個“名稱”后跟一個 “ : ” ;“名稱/值 對”之間使用 “ , ”(逗號)分隔。 名稱用引號括起來;值如果是字符串則必須用引號括起來，數值型則不需要。如：

原文轉自：http://www.uml.org.cn/Test/201307115.asp