1,、什么是前端性能優(yōu)化,？

從用戶訪問資源到資源完整展現(xiàn)在用戶面前的過程中,，通過技術(shù)手段和優(yōu)化策略,，縮短每個(gè)步驟的處理時(shí)間從而提升整個(gè)資源的訪問和呈現(xiàn)速度,。

2,、為什么要做前端性能優(yōu)化,？

在構(gòu)建web站點(diǎn)的過程中,，任何一個(gè)細(xì)節(jié)都有可能影響網(wǎng)站的訪問速度,，如果不了解性能優(yōu)化知識(shí)，很多不利于網(wǎng)站訪問速度的因素會(huì)產(chǎn)生,，從而嚴(yán)重影響網(wǎng)站的性能,，導(dǎo)致網(wǎng)站訪問速度變慢，用戶體驗(yàn)低下,，最終導(dǎo)致用戶流失,。

3、如何進(jìn)行前端性能優(yōu)化

性能黃金法則：只有10%-20%的最終用戶響應(yīng)時(shí)間花在接收請(qǐng)求的HTML文檔上,，剩下的80%-90%時(shí)間花在HTML文檔所引用的所有組件(圖片,，script，css，flash等等)進(jìn)行的HTTP請(qǐng)求上,。

yahoo前端性能團(tuán)隊(duì)總結(jié)的35條黃金定律請(qǐng)見：http://blog.csdn.net/zhouziyu2011/article/details/60468287

1) 內(nèi)容層面

①　DNS解析優(yōu)化

DNS緩存,、減少DNS查詢次數(shù)（減少來自不同domain的請(qǐng)求的數(shù)量）；

②　避免重定向

重定向至少訪問兩個(gè)不同地址,，會(huì)減慢訪問速度,；

③　杜絕404

404代表服務(wù)器沒有找到資源，網(wǎng)頁中需要加載一個(gè)外部腳本,，結(jié)果返回一個(gè)404,，不僅阻塞了其他腳本下載，客戶端還會(huì)將下載回來的內(nèi)容(404)當(dāng)成JavaScript去解析,。

2) 網(wǎng)絡(luò)傳輸階段

①　減少傳輸過程中實(shí)體的大小

a. 緩存：添加Expires 或Cache-Control報(bào)文頭

對(duì)一個(gè)網(wǎng)站而言,，CSS、JavaScript,、圖片等靜態(tài)資源文件更新的頻率都比較低,，而這些文件又幾乎是每次http請(qǐng)求都需要的，如果將這些文件緩存在瀏覽器中,，可以極好的改善性能,。通過設(shè)置http頭中的cache-control和expires的屬性，可設(shè)定瀏覽器緩存,，添加Expires報(bào)文頭,，將靜態(tài)內(nèi)容設(shè)為永不過期，或者很長時(shí)間后才過期,；添加Cache-Control報(bào)文頭,，來控制網(wǎng)頁的緩存。

b. cookie優(yōu)化

去除沒有必要的cookie,，如果網(wǎng)頁不需要cookie就完全禁掉,。

將cookie的大小減到最小。

注意cookie設(shè)置的domain級(jí)別,，沒有必要時(shí)不要影響到sub-domain

設(shè)置合適的過期時(shí)間,，較長的過期時(shí)間可以提高響應(yīng)速度。

c. 文件壓縮

Accept-Encoding：g-zip,，Gzip壓縮傳輸文件通?？梢詼p少70%網(wǎng)頁內(nèi)容的大小，包括腳本,、樣式表,、圖片等文件。

②　減少請(qǐng)求的次數(shù)

a. 文件適當(dāng)?shù)暮喜?/span>

將多個(gè)JS腳本文件合并成一個(gè)文件,，將多個(gè)CSS樣式表文件合并成一個(gè)文件,，以此來減少文件的下載次數(shù),。

b. 雪碧圖

把小圖標(biāo)合成一張大圖，通過給元素的公共css設(shè)置background-image為該合成圖,，這樣每個(gè)元素都會(huì)以該合成圖為背景,，而且頁面也只加載一張合成圖,，然后再給每個(gè)元素單獨(dú)微調(diào)其background-position,。把多個(gè)請(qǐng)求合并成一個(gè)。

③　異步加載

通過async和defer關(guān)鍵字或動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽,，可以讓腳本異步執(zhí)行,。

3) 渲染階段

①　js放底部，CSS放頂部

將js腳本置底,，可以讓網(wǎng)頁渲染所需要的內(nèi)容盡快加載顯示給用戶,。

瀏覽器在CSS全部傳輸完全之前不會(huì)去渲染任何的東西，將CSS放在文檔頂部能使頁面加載得更快,。

②　減少重繪和回流

重繪和回流會(huì)延長網(wǎng)頁的加載時(shí)間,。減少重繪和回流的方法有：將多次改變樣式屬性的操作合并成一次操作。

③　減少DOM節(jié)點(diǎn)

④　網(wǎng)頁中元素過多對(duì)網(wǎng)頁的加載和腳本的執(zhí)行都是沉重的負(fù)擔(dān),，因此要減少DOM元素的數(shù)量,。

4) 腳本執(zhí)行階段

①　減少節(jié)點(diǎn)的操作（innerHTML）

避免多次操作節(jié)點(diǎn)，構(gòu)建好后再一次性添加到文檔中去,，而不是循環(huán)添加每一行

②　事件委托

采用事件委托機(jī)制,，在父級(jí)元素上添加一個(gè)事件監(jiān)聽，來替代在每一個(gè)子元素上添加事件監(jiān)聽,。