- 減少HTML嵌套
- 減少DOM節(jié)點(diǎn)數(shù)
- 減少無(wú)語(yǔ)義代碼
- 刪除http或者h(yuǎn)ttps猾普,如果URL的協(xié)議頭惡化當(dāng)前頁(yè)面的協(xié)議頭一致的奕锌,或者此URL在多個(gè)協(xié)議頭是可用的梢夯,則可用考慮刪除協(xié)議頭
- 刪除多余的空格烘挫、換行符阿蝶、縮進(jìn)和不必要的注釋
- 省略冗余標(biāo)簽和屬性
- 使用相對(duì)路徑的URL
文件放在合適的位置
css樣式文件鏈接盡量放在頁(yè)面頭部
原因:
css的加載不會(huì)阻塞DOM Tree的解析雳锋,但會(huì)阻塞DOM Tree渲染,也會(huì)阻塞后面JS的執(zhí)行羡洁。
將css放在任何body元素之前玷过,可以確保在文檔部分中解析了所有css的樣式包括內(nèi)聯(lián)樣式和外聯(lián)的。從而減少了瀏覽器必須重排文檔的次數(shù)筑煮。如果將css放在底部辛蚊,就要等待最后一個(gè)css下載完成。此時(shí)會(huì)有長(zhǎng)時(shí)間白屏咆瘟,影響用戶(hù)體驗(yàn)嚼隘。js引用放在頁(yè)面底部。
原因:防止js的加載袒餐、解析和執(zhí)行飞蛹,阻塞到頁(yè)面后續(xù)元素的正常渲染。
增強(qiáng)用戶(hù)體驗(yàn)
- 設(shè)置favicon.ico圖標(biāo)
原因:網(wǎng)站如果不設(shè)置favicon.ico圖標(biāo)的話(huà)灸眼,控制臺(tái)會(huì)報(bào)錯(cuò)卧檐。另外頁(yè)面加載過(guò)程中也沒(méi)有圖標(biāo)loading過(guò)程,不利于記憶網(wǎng)站品牌焰宣,建議統(tǒng)一添加霉囚。 - 增加首屏必要的css和js
原因:
頁(yè)面如果需要等待所依賴(lài)的js和css加載完成才顯示,則在渲染過(guò)程中頁(yè)面會(huì)一直顯示空白匕积,影響用戶(hù)體驗(yàn)盈罐,建議增加首屏必要的css和js,比如頁(yè)面框架背景圖片或者loading圖標(biāo)闪唆,內(nèi)聯(lián)在HTML頁(yè)面中盅粪。這樣做,首屏能快速顯示出來(lái)悄蕾,相對(duì)減少用戶(hù)對(duì)頁(yè)面加載的等待過(guò)程票顾。