7個(gè)前端性能優(yōu)化的方法

發(fā)布時(shí)間：2020-11-16 10:17:13 來(lái)源：億速云閱讀：320 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹7個(gè)前端性能優(yōu)化的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

前端性能優(yōu)化方法：1、減少http請(qǐng)求數(shù)；2、圖片優(yōu)化；3、使用CDN；4、開(kāi)啟GZIP；5、樣式表和JS文件的優(yōu)化；6、使用無(wú)cookie域名；7、前端代碼結(jié)構(gòu)的優(yōu)化。

前端性能優(yōu)化方法：

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

常用的減少http請(qǐng)求數(shù)有以下幾種：

1）合并圖片。當(dāng)圖片較多時(shí)，可以合并為一張大圖，從而減少http請(qǐng)求數(shù)。經(jīng)常變化的圖片可能不太合適，變化相對(duì)穩(wěn)定的就可以考慮。合并大圖除了能減少http 請(qǐng)求數(shù)外，還可以充分利用緩存來(lái)提升性能。

2）合并壓縮css樣式表和js腳本，他們的共同目的都是為了減少http連接數(shù)。

3）去掉不必要的請(qǐng)求。開(kāi)發(fā)寫(xiě)代碼或者系統(tǒng)升級(jí)之后殘留的無(wú)效請(qǐng)求連接。

4）充分利用緩存。這里說(shuō)的緩存是客戶(hù)端側(cè)緩存或者說(shuō)瀏覽器緩存。Expires頭信息是客戶(hù)端側(cè)緩存的重要依據(jù)，格式類(lèi)似于Expires:sun ,20 Dec 2017 23:00:00 GMT。如果當(dāng)前時(shí)間小于Expires指定的時(shí)間，瀏覽器就會(huì)從緩存中直接獲取相關(guān)的數(shù)據(jù)信息或html文件，如果當(dāng)前時(shí)間大于Expires指定的時(shí)間，瀏覽器會(huì)向服務(wù)器發(fā)送請(qǐng)求來(lái)獲取相關(guān)數(shù)據(jù)信息。

以Apache為例，可在Apache的配置文件httpd.conf中設(shè)置Expires。

2. 圖片優(yōu)化

優(yōu)化方法：

1）盡可能的使用PNG格式的圖片，它相對(duì)來(lái)說(shuō)體積較小。

2）對(duì)于不同格式的圖片，在上線之前最好進(jìn)行一定的優(yōu)化。

3）圖片的延遲加載，也叫做賴(lài)加載。

3. 使用CDN

CDN即內(nèi)容分發(fā)網(wǎng)絡(luò)，可以使用戶(hù)就近取得所需內(nèi)容，解決網(wǎng)絡(luò)擁擠的狀況，提高用戶(hù)訪問(wèn)網(wǎng)站的響應(yīng)速度。

4. 開(kāi)啟GZIP

GZIP即數(shù)據(jù)壓縮，用于壓縮使用Internet傳輸?shù)乃形谋举Y源。開(kāi)啟GZIP的方法很簡(jiǎn)單，到對(duì)應(yīng)的web服務(wù)配置文件中設(shè)置一下即可。以Apache為例，在配置文件httpd.conf中添加。

5. 樣式表和JS文件的優(yōu)化

一般我們會(huì)把css樣式表文件放到文件的頭部。比如，放到<head>標(biāo)簽中，這樣可以讓CSS樣式表盡早地完成下載。對(duì)應(yīng)js腳本文件，一般我們把他放到頁(yè)面的尾部。

6. 使用無(wú)cookie域名

無(wú)cookie域名的概念:當(dāng)發(fā)送一個(gè)請(qǐng)求時(shí)，同時(shí)還要請(qǐng)求一張靜態(tài)的圖片和發(fā)送cookie時(shí)，服務(wù)器對(duì)于這些cookie不會(huì)做任何使用，也就是說(shuō)這些cookie沒(méi)什么用，沒(méi)不要隨請(qǐng)求一同發(fā)送。

7. 前端代碼結(jié)構(gòu)的優(yōu)化

以上是7個(gè)前端性能優(yōu)化的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

7個(gè)前端性能優(yōu)化的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽