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

　　1、請減少HTTP請求

　　基本原理：

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

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

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

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

　　解決辦法：

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

　　2、請減少對DOM的操作

　　基本原理：

　　對DOM操作的代價是高昂的，這在網(wǎng)頁應(yīng)用中的通常是一個性能瓶頸。

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

　　解決辦法：

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

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

　　注：在IE中:hover會降低響應(yīng)速度。

　　3、精簡CSS和JS文件

　　基本原理：

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

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