性能優(yōu)化有哪些方面？

感覺(jué)前端的性能確實(shí)是很重要的，我談?wù)勎以趯?shí)際項(xiàng)目中的應(yīng)用。前端的應(yīng)用主要從以下幾個(gè)方面進(jìn)行優(yōu)化：

1．減少 http 請(qǐng)求

HTTP 協(xié)議是無(wú)狀態(tài)的應(yīng)用層協(xié)議， 意味著每次 HTTP 請(qǐng)求都需要建立通信鏈路、進(jìn)行數(shù)據(jù)傳輸，而在服務(wù)器端，每個(gè) HTTP 都需要啟動(dòng)獨(dú)立的線程去處理。這些通信和服務(wù)的開銷都很昂貴，減少HTTP 請(qǐng)求的數(shù)目可有效提高訪問(wèn)性能。減少 HTTP 的主要手段是合并 CSS、合并 JavaScript、合并圖片。將瀏覽器一次訪問(wèn)需要的JavaScript、 CSS 合并成一個(gè)文件，這樣瀏覽器就只需要一次請(qǐng)求。圖片也可以合并，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過(guò) CSS 偏移響應(yīng)鼠標(biāo)點(diǎn)擊操作，構(gòu)造不同的 URL。

2．使用瀏覽器緩存

對(duì)一個(gè)網(wǎng)站而言，CSS、 JavaScript、 Logo、圖標(biāo)這些靜態(tài)資源文件更新的頻率都比較低，而這些文件又幾乎是每次 HTTP 請(qǐng)求都需要的，如果將這些文件緩存在瀏覽器中，可以極好地改善性能。通過(guò)設(shè)置 HTTP 頭中 Cache-Control 和 Expires 的屬性，可設(shè)定瀏覽器緩存，緩存時(shí)間可以是數(shù)天，甚至是幾個(gè)月。在某些時(shí)候，靜態(tài)資源文件變化需要及時(shí)應(yīng)用到客戶端瀏覽器，這種情況，可通過(guò)改變文件名實(shí)現(xiàn)，即更新 JavaScript 文件并不是更新 JavaScript 文件內(nèi)容，而是生成一個(gè)新的 JS 文件并更新 HTML文件中的引用。使用瀏覽器緩存策略的網(wǎng)站在更新靜態(tài)資源時(shí)，應(yīng)采用批量更新的方法，比如需要更新 10 個(gè)圖標(biāo)文件，不宜把 10 個(gè)文件一次全部更新，而是應(yīng)一個(gè)文件一個(gè)文件逐步更新，并有一定的間隔時(shí)間，以免用戶瀏覽器突然大量緩存失效，集中更新緩存，造成服務(wù)器負(fù)載驟增、網(wǎng)絡(luò)堵塞的情況。

3．啟用壓縮

在服務(wù)器端對(duì)文件進(jìn)行壓縮，在瀏覽器端對(duì)文件解壓縮，可有效減少通信傳輸?shù)臄?shù)據(jù)量。文本文件的壓縮效率可達(dá) 80%以上，因此 HTML、 CSS、 JavaScript 文件啟用 GZip 壓縮可達(dá)到較好的效果。但是壓縮對(duì)服務(wù)器和瀏覽器產(chǎn)生一定的壓力，在通信帶寬良好，而服務(wù)器資源不足的情況下要權(quán)衡考慮。

4． CSS 放在頁(yè)面最上面、 JavaScript 放在頁(yè)面最下面

瀏覽器會(huì)在下載完全部 CSS 之后才對(duì)整個(gè)頁(yè)面進(jìn)行渲染，因此最好的做法是將 CSS 放在頁(yè)面最上面，讓瀏覽器盡快下載 CSS。 JavaScript 則相反，瀏覽器在加載 JavaScript 后立即執(zhí)行，有可能會(huì)阻塞整個(gè)頁(yè)面，造成頁(yè)面顯示緩慢，因此 JavaScript 最好放在頁(yè)面最下面。但如果頁(yè)面解析時(shí)就需要用到 JavaScript，這時(shí)放在底部就不合適了。

5．減少 cookie 傳輸

Cookie 在每次響應(yīng)請(qǐng)求中，如果太大勢(shì)必會(huì)影響性能，所以沒(méi)必要網(wǎng)cookie放的就不放，針對(duì)性的選擇放入cookie的數(shù)據(jù)。

總之，優(yōu)化的方法還很多，我感觸最深的是第4項(xiàng)，有些js文件大引用如果放到最前面對(duì)性能損耗很大。