前端性能優(yōu)化可以分為兩大類分別是 頁面級別優(yōu)化 代碼級別的優(yōu)化包含DOM操作優(yōu)化，CSS選擇符優(yōu)化以及圖片優(yōu)化等
前端里面包含的內(nèi)容是豐富的，它包括HTML，CSS以及JS和圖片等各種各樣的資源。

優(yōu)化的目的
加載速度更快 給用戶帶來更好的體驗 對于開發(fā)者來說優(yōu)化能夠減少頁面請求數(shù)，能夠節(jié)省資源

1.減少http請求次數(shù)。

盡量合并圖片、css、js。比如加載一個頁面，如果有多個css文件的話，那么他會發(fā)送多個http請求，這樣的話會讓用戶第一次訪問你的頁面會有長時間的等待，如果將多個文件合并的話，那只需要發(fā)出一次http請求，節(jié)省網(wǎng)絡(luò)請求時間，加快網(wǎng)絡(luò)的加載。

2.使用cdn

網(wǎng)絡(luò)的靜態(tài)資源即css、js、圖片使用cdn分發(fā)，圖片毅然。

3.避免空的src和href

當(dāng)link標(biāo)簽href屬性為空的時候，script標(biāo)簽的src屬性為空的時候，瀏覽器渲染的時候會把當(dāng)前頁面的url作為他們屬性的值。

4.為文件頭指定Expires

expires是用來設(shè)置文件的過期時間的，一般對css、js、圖片資源有效。他們可以使內(nèi)容具有緩存性，這樣下回再訪問同樣的資源的時候通過瀏覽器緩存區(qū)讀取，不要再發(fā)出http請求。

5.使用gzip壓縮內(nèi)容

gzip能夠壓縮任何一個文本類型的響應(yīng)，包括了html、xml、json，大大縮小了請求返回的數(shù)據(jù)量。

6.把css放置到頂部

網(wǎng)頁上的資源加載時從上網(wǎng)下順序加載，所以css放在頁面的頂部能夠優(yōu)先渲染頁面，讓用戶覺得加載很快。

7.將js放在底部

加載js會對后續(xù)的資源造成堵塞，必須等到j(luò)s加載完成之后才會去加載后續(xù)的文件，所以就把js放在頁面的底部最后加載。

8.避免css表達(dá)式

9.不要在html中縮放圖片

比如需要圖片尺寸是50*50

那就不要用一張500*500的圖片

10.減少dom的數(shù)量

大原則是減少dom的數(shù)量，減少瀏覽器的負(fù)擔(dān)

11.將css和js放到外置的文件中

目的是為了緩存文件，參考4

但是有時候為了減少請求，也會直接寫在頁面上，需要根據(jù)pv和ip的比例進(jìn)行權(quán)衡

12.減少cookie的大小

cookie里面不要塞那么多東西，因為每一個請求都帶著他跑

13.避免404 （請求失敗，請求的資源路徑錯誤）

比如外鏈的css、js文件都返回404，會破壞瀏覽器的并行加載

14.配置etags

用他來判斷瀏覽器緩存的元素是否和原來服務(wù)器一樣

15.精簡css和js

這里就涉及到css和js的壓縮。比如新浪的一個css文件，他把空格和回車全部去掉，減少文件的大小?，F(xiàn)在的壓縮工具很多，基本主流的前端構(gòu)建工具都能進(jìn)行css和js文件的壓縮，如gulp、grunt等