一橄碾、減少操作量
1.盡量減少 HTTP 請(qǐng)求
合并文件,比如把多個(gè) CSS 文件合成一個(gè)酷师;
CSS Sprites 利用 CSS background 相關(guān)元素進(jìn)行背景圖絕對(duì)定位纱注;
2.不要在 HTML 中使用縮放圖片縮放圖片并沒有減少圖片的容量腮猖,只是控制了圖片的大小狸棍。
3.Image壓縮
使用工具對(duì)圖片進(jìn)行壓縮身害,保證質(zhì)量的同時(shí)減少了圖片的大小。
4.減少對(duì)DOM的操作草戈,減少頁面的重繪塌鸯。
二、提前做加載操作
1.對(duì)域名進(jìn)行預(yù)解析
<link rel="dns-prefetch" />
2.預(yù)載入組件或延遲載入組件
3.把 CSS 放到代碼頁上端
CSS 放到最頂部唐片,瀏覽器能夠有針對(duì)性的對(duì) HTML 頁面從頂?shù)较逻M(jìn)行解析和渲染丙猬。
4.使用 new Image對(duì)象,對(duì)圖片進(jìn)行緩存
三费韭、提升并行加載
切分組件到多個(gè)域 茧球,提升服務(wù)器的響應(yīng)能力
四、JavaScript和CSS優(yōu)化
1.從頁面中剝離 JavaScript 與 CSS
剝離后星持,能夠有針對(duì)性的對(duì)其進(jìn)行單獨(dú)的處理策略抢埋,比如壓縮或者緩存策略。
2.精簡(jiǎn) JavaScript 與 CSS
使用工具壓縮JavaScript和CSS文件
3.腳本放到 HTML 代碼頁底部
減少對(duì)頁面的阻塞钉汗。
五羹令、異步加載
使用Ajax實(shí)現(xiàn)異步加載鲤屡,例如损痰,滾動(dòng)頁面加載后面的內(nèi)容,這種也比較常見酒来。
歸來仍是少年