無論是網(wǎng)站，還是APP，都離不開web頁面的開發(fā)。web前端頁面優(yōu)化是在整個(gè)項(xiàng)目的開發(fā)中是非常重要的，前端的性能好壞直接影響到用戶體驗(yàn)。下面我們總結(jié)了一些常見的web前端優(yōu)化方法分享給大家。

1.頁面內(nèi)容優(yōu)化

 

1) 減少HTTP請求：合并文件、CSS精靈、inline Image

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

3) 避免重定向：多余的中間訪問

4) 使Ajax可緩存

5) 非必須組件延遲加載

6) 未來所需組件預(yù)加載

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

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

9) 減少iframe數(shù)量

10) 不要404

 

2.CSS優(yōu)化

 

1) 將樣式表放到頁面頂部 　

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

3) 使用不使用@import　　　

4) 不使用IE的Filter

 

3.Javascript腳本優(yōu)化

 

1) 將腳本放到頁面底部　　

2) 將javascript和css從外部引入

3) 壓縮javascript和css　　

4) 刪除不需要的腳本

5) 減少DOM訪問 　　　　

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

 

4.圖片優(yōu)化

 

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

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

3) 不要在HTML中拉伸圖片 　

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