1. 精簡HTML代碼:

①. css鏈接文件盡量放在頁面頭部:a. css的加載不會阻塞DOM Tree的解析.b. 但會阻塞DOM Tree渲染,也會阻塞后面JS的執(zhí)行.c. 將css放在任何body元素之前:(1). 可以確保在文檔中解析了所有css的樣式包括內(nèi)聯(lián)樣式和外聯(lián)的.(2). 減少了瀏覽器必須重排文檔的次數(shù).d. 如果將css放在底部,就要等待最后一個css下載完成:(1). 會導(dǎo)致長時間白屏,影響用戶體驗(yàn).e. css代碼下無script代碼段,就不會影響DOMContentLoaded.②. js引用放在頁面底部:a. 防止js的加載、解析和執(zhí)行,阻塞到頁面后續(xù)元素的正常渲染.b. script放在底部影響DOM渲染,不會影響解析.c. script內(nèi)的代碼執(zhí)行會等待css加載.

2. 增強(qiáng)用戶體驗(yàn):

①. 設(shè)置favicon.ico圖標(biāo):a. 不設(shè)置控制臺會報錯.b. 頁面加載過程中也沒有圖標(biāo)loading過程,不利于記憶網(wǎng)站品牌.②. 增加首屏必要的css和js:a. SPA頁面需要等待所依賴的js和css加載完成才能顯示,在渲染過程中頁面會一直顯示空白,影響用戶體驗(yàn).b. 建議增加首屏必要一些的css和js:(1). 比如在加載過程中,增加如下內(nèi)聯(lián)在HTML頁面中:1. 頁面框架背景圖片2. loading圖標(biāo)3. 骨架屏(2). 這樣,首屏能快速顯示出來,相對減少用戶對頁面加載的等待過程.