前端性能優(yōu)化的方法？

前端性能優(yōu)化的方法？

content方面

1，減少HTTP請(qǐng)求：合并文件、CSS精靈、inline Image

2，減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個(gè)主機(jī)下載任何任何文件。方法：DNS緩存、將資源分布到恰當(dāng)數(shù)量的主機(jī)名，平衡并行下載和DNS查詢

3，避免重定向：多余的中間訪問(wèn)

4，使Ajax可緩存

5，非必須組件延遲加載

6，未來(lái)所需組件預(yù)加載

7，減少DOM元素?cái)?shù)量

8，將資源放到不同的域下：瀏覽器同時(shí)從一個(gè)域下載資源的數(shù)目有限，增加域可以提高并行下載量

9，減少iframe數(shù)量

10，不要404

Server方面

1，使用CDN

2，添加Expires或者Cache-Control響應(yīng)頭

3，對(duì)組件使用Gzip壓縮

4，配置ETag

5，F(xiàn)lush Buffer Early

6，Ajax使用GET進(jìn)行請(qǐng)求

7，避免空src的img標(biāo)簽

Cookie方面

1，減小cookie大小

2，引入資源的域名不要包含cookie

css方面

1，將樣式表放到頁(yè)面頂部

2，不使用CSS表達(dá)式

3，使用不使用@import

4，不使用IE的Filter

Javascript方面

1，將腳本放到頁(yè)面底部

2，將javascript和css從外部引入

3，壓縮javascript和css

4，刪除不需要的腳本

5，減少DOM訪問(wèn)

6，合理設(shè)計(jì)事件監(jiān)聽(tīng)器

圖片方面

1，優(yōu)化圖片：根據(jù)實(shí)際顏色需要選擇色深、壓縮

2，優(yōu)化css精靈

3，不要在HTML中拉伸圖片

4，保證favicon.ico小并且可緩存

移動(dòng)方面

1，保證組件小于25k

2，Pack Components into a Multipart Document