對于一個(ge)來(lai)說,這個(ge)原則也是(shi)適(shi)用(yong)的,即使你有(you)豐富而有(you)價值的內容,但是(shi)顧客半(ban)天(tian)都進不來(lai),他們(men)會(hui)慢慢失去耐心(xin)。
尤其是在這個信息爆(bao)炸的(de)時代,人們的(de)節奏總(zong)是很(hen)快。畢竟,的(de)耐(nai)心是有限的(de)。如果不優(you)化,會造成相當數量的(de)客戶流失(shi),帶來不必要的(de)損失(shi)。那么,優(you)化web前端性(xing)能(neng)的(de)常用(yong)和實用(yong)方法(fa)有哪些(xie)呢?
CDN(內(nei)容(rong)分發(fa)網(wang)絡)部署(shu)在各大運營(ying)商的機房內(nei)。當用(yong)戶(hu)通過瀏覽器請求資源時,可以直(zhi)接(jie)反饋給用(yong)戶(hu),大大減輕了服務器數據(ju)中心的壓力。本質上,CDN也是一種緩存(cun)。如(ru)果您的位置(zhi)靠(kao)近(jin)CDN節(jie)點,那么(me)網(wang)站響(xiang)應速度也非常明顯。另外,CDN緩存(cun)的資源主要(yao)是靜態資源,比(bi)(bi)如(ru)靜態頁(ye)面、圖片、CSS和JS文件。CDN加速對于一些覆(fu)蓋(gai)范圍廣的網(wang)站是最有效的。比(bi)(bi)如(ru)阿里云CDN產品有280多個節(jie)點,運營(ying)商覆(fu)蓋(gai)范圍比(bi)(bi)較全面。
網頁的加載時間與HTTP請(qing)求(qiu)密切相關(guan),而外部資源的加載速(su)度則與主機服務(wu)提供商服務(wu)器架構和(he)分發(fa)位置有關(guan)。我們(men)可以通過檢查網站上的冗余圖片、CSS、JavaScript和(he)一(yi)些組件,并逐一(yi)改進來(lai)減少(shao)一(yi)些HTTP請(qing)求(qiu)。
顧名思義,預訪問(wen)(wen)就是在獲得一(yi)些必要(yao)(yao)的(de)數據(ju)和資源之前(qian),真正需(xu)要(yao)(yao)請(qing)求,以改善用戶的(de)瀏覽體驗。預訪問(wen)(wen)主要(yao)(yao)有三(san)種方式(shi):鏈(lian)路預采集、DNS預采集和預渲染。根據(ju)您想要(yao)(yao)使用的(de)預取形式(shi),您只需(xu)將以下(xia)標記添加(jia)到站點的(de)鏈(lian)接屬性:rel=prefetch、rel=DNS prefetch或rel=prerender。
壓縮(suo)HTML、CSS和JavaScript
在(zai)編(bian)寫代碼時(shi),會(hui)有一些額外的(de)空間,這(zhe)將占用(yong)字節。使用(yong)一些壓(ya)縮工具可以有效(xiao)地解決(jue)這(zhe)個問題(ti)。值得(de)注意的(de)是,文(wen)件壓(ya)縮后(hou),可讀性會(hui)變(bian)差,以后(hou)的(de)維(wei)護(hu)也會(hui)變(bian)得(de)困難(nan)。
一(yi)(yi)個高清晰度的(de)(de)圖(tu)(tu)像(xiang)大約有幾兆字(zi)節,而(er)且很(hen)多(duo)時(shi)候我(wo)們并不(bu)(bu)需要(yao)這樣的(de)(de)圖(tu)(tu)像(xiang)質量(liang)(liang)。一(yi)(yi)般情況下,我(wo)們會選擇(ze)保存為(wei)高質量(liang)(liang)的(de)(de)圖(tu)(tu)片,這樣可以(yi)有效降低圖(tu)(tu)片加載的(de)(de)壓力。像(xiang)JPEG圖(tu)(tu)像(xiang)一(yi)(yi)樣,它包含時(shi)間、地點、相機型(xing)號格式,更不(bu)(bu)用說我(wo)們需要(yao)什么(me)了。
無法在客戶端(duan)中緩存Post請(qing)求。每個請(qing)求都需要發(fa)送到服務器(qi)進行(xing)處理,每次(ci)都會返(fan)回一個狀態(tai)碼200。(可以(yi)在服務器(qi)端(duan)緩存數據(ju)以(yi)提(ti)高(gao)處理速度)
Get請求(qiu)(qiu)可(ke)(ke)以(yi)(默認(ren)情況下)緩存(cun)在客戶機上。除非指(zhi)定了不同的(de)地址(zhi),否(fou)則具有相同地址(zhi)的(de)AJAX請求(qiu)(qiu)將(jiang)不會在服務(wu)器(qi)上重(zhong)復執行,而(er)是返回(hui)304。因此,在發(fa)出Ajax請求(qiu)(qiu)時,可(ke)(ke)以(yi)選擇(ze)盡可(ke)(ke)能多地使(shi)用(yong)get方法,這樣就(jiu)可(ke)(ke)以(yi)使(shi)用(yong)客戶機的(de)緩存(cun)來提高(gao)請求(qiu)(qiu)速度。