前端開(kāi)發(fā)，又稱(chēng)web前端開(kāi)發(fā)，是從網(wǎng)頁(yè)制作演變而來(lái)的。2005年以后，互聯(lián)網(wǎng)進(jìn)入web2.0時(shí)代，各種類(lèi)似桌面軟件的web應(yīng)用的大量涌現(xiàn)，使得網(wǎng)站的前端發(fā)生了翻天覆地的變化。

前端優(yōu)化的目的是什么 ?

1. 從用戶角度而言，優(yōu)化能夠讓頁(yè)面加載得更快、對(duì)用戶的操作響應(yīng)得更及時(shí)，能夠給用戶提供更為友好的體驗(yàn)。

2. 從服務(wù)商角度而言，優(yōu)化能夠減少頁(yè)面請(qǐng)求數(shù)、或者減小請(qǐng)求所占帶寬，能夠節(jié)省可觀的資源。

前端優(yōu)化的途徑

大致可以分為兩類(lèi)，

第一類(lèi)是頁(yè)面級(jí)別的優(yōu)化，例如 HTTP請(qǐng)求數(shù)、腳本的無(wú)阻塞加載、內(nèi)聯(lián)腳本的位置優(yōu)化等 ;第二類(lèi)則是代碼級(jí)別的優(yōu)化，例如 Javascript中的DOM 操作優(yōu)化、CSS選擇符優(yōu)化、圖片優(yōu)化以及 HTML結(jié)構(gòu)優(yōu)化等等。

本著提高投入產(chǎn)出比的目的，后文提到的各種優(yōu)化策略大致按照投入產(chǎn)出比從大到小的順序排列。

1. 減少 HTTP請(qǐng)求數(shù)

這條策略基本上所有前端人都知道，而且也是最重要最有效的。一個(gè)完整的請(qǐng)求都需要經(jīng)過(guò) DNS尋址、與服務(wù)器建立連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個(gè) “漫長(zhǎng)” 而復(fù)雜的過(guò)程。

2. 將外部腳本置底

前文有談到，瀏覽器是可以并發(fā)請(qǐng)求的，這一特點(diǎn)使得其能夠更快的加載資源，然而外鏈腳本在加載時(shí)卻會(huì)阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處于阻塞狀態(tài)，直到腳本加載完成后才會(huì)開(kāi)始加載。如果將腳本放在比較靠前的位置，則會(huì)影響整個(gè)頁(yè)面的加載速度從而影響用戶體驗(yàn)。解決這一問(wèn)題的方法有很多。

3. 異步執(zhí)行 inline腳本

inline腳本對(duì)性能的影響與外部腳本相比，是有過(guò)之而無(wú)不及。首頁(yè)，與外部腳本一樣， inline腳本在執(zhí)行的時(shí)候一樣會(huì)阻塞并發(fā)請(qǐng)求，除此之外，由于瀏覽器在頁(yè)面處理方面是單線程的，當(dāng) inline腳本在頁(yè)面渲染之前執(zhí)行時(shí)，頁(yè)面的渲染工作則會(huì)被推遲。簡(jiǎn)而言之， inline腳本在執(zhí)行的時(shí)候，頁(yè)面處于空白狀態(tài)。此外，在HTML5中引入了 Web Workers的機(jī)制，恰恰可以解決此類(lèi)問(wèn)題。

4. Lazy Load Javascript

隨著 Javascript框架的流行，越來(lái)越多的站點(diǎn)也使用起了框架。不過(guò)，一個(gè)框架往往包括了很多的功能實(shí)現(xiàn)，這些功能并不是每一個(gè)頁(yè)面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費(fèi)既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi)的時(shí)間。

6. 異步請(qǐng)求

Callback在某些頁(yè)面中可能存在這樣一種需求，需要使用 script標(biāo)簽來(lái)異步的請(qǐng)求數(shù)據(jù)

7. 減少不必要的 HTTP跳轉(zhuǎn)