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

　　1、請(qǐng)減少HTTP請(qǐng)求

　　基本原理：

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

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

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

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

　　解決辦法：

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

　　2、請(qǐng)減少對(duì)DOM的操作

　　基本原理：

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

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

　　解決辦法：

　　修改和訪問(wèn)DOM元素會(huì)造成頁(yè)面的Repaint和Reflow，循環(huán)對(duì)DOM操作更是罪惡的行為。所以請(qǐng)合理的使用JavaScript變量?jī)?chǔ)存內(nèi)容，考慮大量DOM元素中循環(huán)的性能開(kāi)銷(xiāo)，在循環(huán)結(jié)束時(shí)一次性寫(xiě)入。

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

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

　　3、精簡(jiǎn)CSS和JS文件

　　基本原理：

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

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