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

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

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

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

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

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

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

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

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

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

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