頁面的加載過程主要分為下載、解析、渲染三個(gè)步驟，下面從這三個(gè)方面闡述提升加載速度的方法：

1、加快文件下載速度，減小資源文件下載對(duì)頁面解析的阻塞。頁面加載過程首先會(huì)下載 HTML 文件，然后自上而下開始解析，解析過程中如果遇到外部資源則會(huì)開始下載，直至下載完成才會(huì)繼續(xù)解析。所以，加快文件下載速度方式是有效的提升頁面加載速度的方法。具體可以是

1）通過設(shè)置 CDN、HTTP 緩存等方式，減少 HTTP 傳輸時(shí)間；

2）對(duì)文件進(jìn)行壓縮，減小文件體積；

3）對(duì) script、CSS 文件引用標(biāo)簽設(shè)置異步下載屬性，避免對(duì) HTML 文件解析產(chǎn)生阻塞

2、將樣式寫在 head 中，將 JS 代碼或文件引用寫在 body 的最后。

在 HTML 文件下載的過程中，會(huì)同步的對(duì)文件流進(jìn)行解析成 DOM 結(jié)構(gòu)，當(dāng)遇到 CSS 代碼時(shí)，會(huì)將其解析成 CSSOM 樹；當(dāng)遇到 JS 腳本時(shí)，會(huì)將其同步執(zhí)行，并且阻塞繼續(xù)解析，執(zhí)行之后方才繼續(xù)解析。最后，將 DOM 和 CSSOM 渲染至頁面上。所以，將樣式寫在 head 中，可以盡早地構(gòu)建 CSSOM 樹；將 JS 代碼寫在 body 最后，不會(huì)對(duì) DOM 解析造成阻塞，可以最快地完成頁面地構(gòu)建

3、盡可能地提升瀏覽器渲染速度。包括

1）避免出現(xiàn)冗余 HTML 標(biāo)簽，提升 DOM 結(jié)構(gòu)地構(gòu)建速度；

2）精簡(jiǎn) CSS 樣式及選擇器，提升 CSSOM 構(gòu)建及匹配速度；

3）如果是單頁面應(yīng)用，則頁面結(jié)構(gòu)依賴 JS 的執(zhí)行?？梢詢?yōu)化 JS 代碼，盡早輸出首屏結(jié)構(gòu)；或采用服務(wù)端渲染的方式，直接傳輸 HTML 結(jié)構(gòu)，減少首屏?xí)r間