當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)時(shí)，直觀的感覺(jué)是網(wǎng)頁(yè)內(nèi)容的速度。我們需要做的優(yōu)化工作主要是為了這個(gè)目的。那么如何提高頁(yè)面加載（或呈現(xiàn)）速度呢？一般來(lái)說(shuō)，有三個(gè)方面：

1、代碼邏輯：優(yōu)秀的代碼邏輯結(jié)構(gòu)可以有效地減少呈現(xiàn)頁(yè)面（如虛擬DOM）時(shí)使用的內(nèi)存和速度，這超出了本文的范圍。

2、SSR服務(wù)器渲染，也稱(chēng)為“直接輸出”。在服務(wù)器端將個(gè)屏幕的所有內(nèi)容呈現(xiàn)為HTML靜態(tài)代碼后，可以直接輸出到瀏覽器，有效地加快了用戶訪問(wèn)站點(diǎn)時(shí)個(gè)屏幕的加載時(shí)間。但是，這方面不在本文的范圍內(nèi)。

3、本文將討論提高靜態(tài)文件的加載速度，大致分為以下幾點(diǎn)：

減少靜態(tài)文件請(qǐng)求的數(shù)量，從而減少請(qǐng)求的數(shù)量（請(qǐng)求的成本高于移動(dòng)頁(yè)面的網(wǎng)絡(luò)速度）

（1）代碼壓縮是常見(jiàn)的優(yōu)化方法之一。

在平時(shí)開(kāi)發(fā)時(shí)，JS腳本文件和CSS樣式文件中的代碼將基于特定的代碼規(guī)范（如javascript標(biāo)準(zhǔn)樣式），以提高項(xiàng)目的可維護(hù)性和團(tuán)隊(duì)合作的效率。但是在項(xiàng)目發(fā)布到Internet上之后，客戶機(jī)（瀏覽器）會(huì)識(shí)別這些代碼。此時(shí)，不需要代碼命名規(guī)范和空間縮進(jìn)。我們可以使用工具來(lái)混淆和壓縮這些代碼，以減小靜態(tài)文件的大小。這里我們選擇使用Webpack，稍后將介紹它。

（2）文件合并在NPM中非常流行。在前端項(xiàng)目開(kāi)發(fā)中，經(jīng)常使用很多第三方代碼庫(kù)，如jquery、axios、weixinJSsdk、lodash、bootstrap等。每個(gè)庫(kù)都有自己的腳本或樣式文件。古老的方法是，我們將標(biāo)簽單獨(dú)引入這些庫(kù)中，從而在打開(kāi)頁(yè)面時(shí)產(chǎn)生幾十個(gè)請(qǐng)求，這對(duì)于移動(dòng)端來(lái)說(shuō)是不可接受的。

GZIP

經(jīng)過(guò)壓縮合并后，文件的大小和數(shù)量得到了客觀的減少。但是，一旦站點(diǎn)有了更多的業(yè)務(wù)邏輯，或者引入了更多的第三方庫(kù)，文件的大小對(duì)于移動(dòng)端仍然不樂(lè)觀。

現(xiàn)在是gzip壓縮出現(xiàn)的時(shí)候了。~我們?cè)赪ebpack的配置中添加了gzip壓縮配置。

（4）為什么cdn和cache使用cdn？

seo優(yōu)化】從三個(gè)方面有效提升網(wǎng)頁(yè)加載速度" />

cdn是一個(gè)全球（或國(guó)內(nèi)，特定于供應(yīng)商）的分布式網(wǎng)絡(luò)，它可以更快地將網(wǎng)站的內(nèi)容傳輸?shù)椒?wù)范圍內(nèi)的特定位置，并且通常該特定位置遠(yuǎn)離實(shí)際的內(nèi)容服務(wù)器。例如，在極端情況下，您的網(wǎng)站托管在愛(ài)爾蘭（海南），您的用戶訪問(wèn)澳大利亞（MOHE）。此時(shí)，當(dāng)您的用戶訪問(wèn)您的網(wǎng)站時(shí)，延遲將非常大，將您的（靜態(tài)）數(shù)據(jù)放在澳大利亞（MOHE）的cdn上將大大提高用戶訪問(wèn)該網(wǎng)站的體驗(yàn)。如果沒(méi)有cdn服務(wù)，我們可以添加expires頭，減少dns查找，配置etag，并使ajax可緩存。

安全：

CSPWeb前端必須熟悉XSS安全漏洞。我們知道，javascript語(yǔ)句甚至CSS表達(dá)式都可能導(dǎo)致XSS攻擊，許多前端現(xiàn)在使用CSP策略來(lái)限制腳本源代碼防御。