前端性能優(yōu)化

2019-7-24    seo達人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

減少頁面加載時間的方法:
1.壓縮html css js等文件
2.減少DNS解析
3.減少DOM元素,對于相關(guān)操作可以緩存節(jié)點
4.改變頁面元素樣式時盡量操作className,而不是頻繁使用xxx.style.(其實還有很多這種DOM修改操作的細節(jié)比如opacity替代visibility ,多個DOM統(tǒng)一操作(雖然V8會有緩存優(yōu)化) ,先將DOM離線,即display:none;修改后顯示 ,不要把DOM放在已給循環(huán)中作為循環(huán)變量 ,不要使用table )
5.避免不必要的重定向
6.合并js css及圖片,減少請求數(shù)量
7.使用CDN
8.合理利用緩存
9…

關(guān)于CDN?
https://zhuanlan.zhihu.com/p/39028766

CDN中文名“內(nèi)容分發(fā)網(wǎng)路”,作用是減少傳播時延,找最近的節(jié)點。CDN本質(zhì)就一個是緩存,只是這個緩存離你特別近,不管是作為用戶還是開發(fā)人員都能從中享受一點福利。
CDN的優(yōu)點
1.訪問加速
2.減輕服務(wù)器負載
3.抗住攻擊
CDN的缺點
1.只能對靜態(tài)資源加速
2.內(nèi)容更新時需要分發(fā)到其他節(jié)點
3.代價高昂
與傳統(tǒng)網(wǎng)站訪問方式的不同
傳統(tǒng)的網(wǎng)站會直接解析域名獲得IP地址然后發(fā)送請求
使用了CDN的網(wǎng)站則增加了緩存層,解析域名→獲取對應(yīng)CNAME域名→對獲取的域名進行解析得到緩存服務(wù)器的IP地址,將用戶的訪問請求引導(dǎo)到最優(yōu)的緩存節(jié)點而不是源站。

總結(jié):通過權(quán)威DNS服務(wù)器來實現(xiàn)最優(yōu)節(jié)點的選擇,通過緩存來減少源站的壓力。主要應(yīng)用于靜態(tài)網(wǎng)頁、大文件的下載等等。
應(yīng)用與踩坑

緩存設(shè)置
max-age在Cache-Control中經(jīng)常用于緩存的控制,可是max-age設(shè)置的緩存會應(yīng)用于一個請求經(jīng)過的每一級,如果我們希望CDN不緩存那么久,要怎么辦呢?那就是s-maxage,它用于設(shè)置代理服務(wù)器的緩存時間,會覆蓋max-age的設(shè)置,這樣我們可以把max-age用于本地緩存,把s-maxage用于CDN緩存時間,避免臟數(shù)據(jù)的產(chǎn)生。

緩存命中率
對于一個緩存而言,還有一點非常重要,就是你的緩存到底有沒有用,衡量這個東西的就是緩存命中率。如果只是靜態(tài)資源,在刷新緩存之后,可能導(dǎo)致命中率下降,因此CDN的資源不適合經(jīng)常刷新,換句話說,如果一個請求結(jié)果會經(jīng)常進行變更,那么CDN基本就沒有什么存在的意義了。

判斷是否命中緩存
還要考慮的一件事是:這個資源是否命中了CDN,是否是因為CDN導(dǎo)致的問題。

在各大廠商的CDN返回的數(shù)據(jù)中都會有一個X-Cache,上面內(nèi)容是Hit或者Miss,還會加上諸如Memory或者Disk的縮寫表示內(nèi)存還是磁盤,如果出現(xiàn)Upstream或者Miss則表示沒有命中。

資源預(yù)熱
緩存設(shè)計中,預(yù)熱是很重要的環(huán)節(jié),在最初剛開始啟動CDN的時候,CDN上并沒有緩存數(shù)據(jù),此刻大量的請求全部打向源站,肯定會把源站打掛,預(yù)熱就是實現(xiàn)緩存熱門數(shù)據(jù),這樣在業(yè)務(wù)上線時,CDN上已經(jīng)有所需的數(shù)據(jù)了

藍藍設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔