14條規(guī)則摘自<High Performance Web Sites>,本文地址

1.減少Http請(qǐng)求

• 使用圖片地圖
• 使用CSS Sprites
• 合并JS和CSS文件

這個(gè)是由于瀏覽器對(duì)同一個(gè)host有并行下載的限制,http請(qǐng)求越多,總體下載速度越慢

2.使用CDN(內(nèi)容發(fā)布網(wǎng)絡(luò)):當(dāng)頁(yè)面中有很多資源的時(shí)候,可以從不同的服務(wù)中去讀取,同時(shí)可以提高并行下載速度

3.添加http Expires頭:為圖片視頻之類很少改變的資源設(shè)置長(zhǎng)的Expires時(shí)間將直接減少http請(qǐng)求

• 如果資源設(shè)置了Expires頭為將來的某個(gè)時(shí)間,下次訪問時(shí)候?yàn)g覽器發(fā)現(xiàn)資源還沒有過期,會(huì)直接從緩存中讀取,不會(huì)再次產(chǎn)生http請(qǐng)求

另外一個(gè)有點(diǎn)類似的概念是條件Get請(qǐng)求,某些資源比如JS文件,如果我們總是需要最新的JS文件,那么可以設(shè)置條件Get請(qǐng)求去服務(wù)端驗(yàn)證本地的資源是否需要更新.這種情況下瀏覽器會(huì)向Server發(fā)送一個(gè)http請(qǐng)求,如果資源沒有更新,會(huì)返回一個(gè)http 304的response,如果資源跟新,則重新下載資源:

?

條件Get請(qǐng)求每次都會(huì)產(chǎn)生一個(gè)304的請(qǐng)求

4.壓縮組件:在Server端對(duì)Response資源進(jìn)行壓縮再傳給瀏覽器,一般使用GZIP

5.將CSS放再頂部: 能加快頁(yè)面內(nèi)容顯示,并且能避免頁(yè)面產(chǎn)生白屏

6.將JS放在底部

• JS會(huì)阻塞對(duì)其后面內(nèi)容的呈現(xiàn)
• JS會(huì)阻塞對(duì)其后面內(nèi)容的下載

7.避免CSS表達(dá)式

8.將JS,CSS放在外部文件中

9.通過使用Keep-Alive和較少的域名來減少DNS查找

10.精簡(jiǎn)JS和CSS文件

11.尋找一種避免重定向的方法

12.移除重復(fù)的腳本

13.配置Etag

14.確保Ajax請(qǐng)求遵守性能知道,必要時(shí)候應(yīng)具備長(zhǎng)久的expires頭

?

我們可以使用Yahoo的Yslow firefox插件來檢查網(wǎng)站的前端性能.

最后,我們隨便打開一個(gè)淘寶寶貝頁(yè)面,用Fiddler查看一下,發(fā)現(xiàn)淘寶至少做了如下優(yōu)化:

• 大規(guī)模使用CDN,圖片,jS,css互相之間都使用了不同的域名.單是圖片服務(wù)器,下面又使用了很多不同的服務(wù)器,比如img01.taobaocdn.com等等
• 當(dāng)?shù)诙螢g覽同一寶貝的時(shí)候,產(chǎn)生大量的Http 304請(qǐng)求.這樣既能保證獲取最新的資源,又能盡量減少數(shù)據(jù)傳輸
• CSS,JS文件大都精簡(jiǎn)過
• 對(duì)于資源類的東西比如圖片,設(shè)置為不受保護(hù).也就是說不需要登錄依然可以直接訪問的,這樣就避免設(shè)置/讀取cookie,達(dá)到節(jié)省網(wǎng)絡(luò)資源的目的

唯一一點(diǎn)沒有優(yōu)化的是圖片,服務(wù)端返回的圖片都是沒有Gzip壓縮的,或許是為了減少服務(wù)器的壓力

轉(zhuǎn)載于:https://www.cnblogs.com/beiyue/p/6861889.html

總結(jié)

以上是生活随笔為你收集整理的转：WEB前端性能优化规则的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。