對(duì)于前端工程師來(lái)說(shuō),性能優(yōu)化是我們需要考慮的一個(gè)重要問(wèn)題纷纫,下面介紹幾種我知道的前端性能優(yōu)化方法
1.減少Http請(qǐng)求
據(jù)測(cè)試至少80%的最終用戶響應(yīng)時(shí)間都花在了頁(yè)面中組件上,所以改
善響應(yīng)時(shí)間最簡(jiǎn)單的途徑為減少http請(qǐng)求數(shù)量陪腌,主要方法有:CSS
Sprits(這 種方式是我最常用的辱魁,簡(jiǎn)單有效),內(nèi)聯(lián)圖片和腳本诗鸭,樣式表合并
2.壓縮組件:
通過(guò)減小http響應(yīng)的大小來(lái)減少響應(yīng)時(shí)間
3.將樣式表放在頂部
盡量多使用<link>標(biāo)簽染簇,因?yàn)锧import標(biāo)簽必須在其他規(guī)則之前,可能導(dǎo)致白屏
4.將腳本放在底部
腳本放在</body>前强岸,是在網(wǎng)頁(yè)DOM結(jié)構(gòu)加載完成時(shí)就執(zhí)行锻弓,放在<head>中會(huì)在開(kāi)始時(shí)執(zhí)行,阻塞DOM結(jié)構(gòu)渲染蝌箍,出現(xiàn)白屏情況青灼,用戶體驗(yàn)也不好
5.避免CSS表達(dá)式
6.使用外部的JavaScript和CSS
使用外部js和css文件有機(jī)會(huì)被緩存起來(lái)
7.精簡(jiǎn)JavaScript和css
精簡(jiǎn)即為從代碼中移出不必要的字符減小其大小,同時(shí)可以此壓縮文件妓盲,精簡(jiǎn)CSS可以合并相同的類杂拨,移出不適用的類等
8.使用ajax緩存
9.適當(dāng)使用圖片預(yù)加載和懶加載