網站開發常見的(de)前端優化(huà)方法

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

1.頁面内容優化(huà)

 

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

2) 減少DNS查詢：DNS查詢完成之前浏覽器不能從這(zhè)個(gè)主機下(xià)載任何任何文件。方法：DNS緩存、将資源分(fēn)布到恰當數量的(de)主機名，平衡并行下(xià)載和(hé)DNS查詢

3) 避免重定向：多(duō)餘的(de)中間訪問

4) 使Ajax可(kě)緩存

5) 非必須組件延遲加載

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

7) 減少DOM元素數量

8) 将資源放到不同的(de)域下(xià)：浏覽器同時(shí)從一個(gè)域下(xià)載資源的(de)數目有限，增加域可(kě)以提高(gāo)并行下(xià)載量

9) 減少iframe數量

10) 不要404

 

2.CSS優化(huà)

 

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

2) 不使用(yòng)CSS表達式

3) 使用(yòng)不使用(yòng)@import　　　

4) 不使用(yòng)IE的(de)Filter

 

3.Javascript腳本優化(huà)

 

1) 将腳本放到頁面底部　　

2) 将javascript和(hé)css從外部引入

3) 壓縮javascript和(hé)css　　

4) 删除不需要的(de)腳本

5) 減少DOM訪問 　　　　

6) 合理(lǐ)設計事件監聽(tīng)器

 

4.圖片優化(huà)

 

1) 優化(huà)圖片：根據實際顔色需要選擇色深、壓縮 　　

2) 優化(huà)css精靈

3) 不要在HTML中拉伸圖片 　

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