前端性能優(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