今天匯仁智杰專業網絡推廣公司要為大家分享Web前端性能優化知識，希望可以給在這方面有煩惱的朋友一點幫助。

　　1、請減少HTTP請求

　　基本原理：

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

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

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

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

　　解決辦法：

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

　　2、請減少對DOM的操作

　　基本原理：

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

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

　　解決辦法：

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

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

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

　　3、精簡CSS和JS文件

　　基本原理：

　　有一條非常重要的準則一直沒有提到，就是CSS和JavaScript的壓縮，直接減少下載的文件體積。匯仁智杰經常使用的方式是使用 YUI Compressor，它的特點是：移除注釋；移除額外的空格；細微優化；標識符替換。

　　YUI Compressor是java程序，如果你對java很熟悉的話可快速的上手使用yuicompressor.jar；如果你對java很陌生也沒關系，一樣可以使用YUI Compressor。