前端性能優化隨筆

只有10%~20%的最終用戶響應時間花在了下載HTML文檔上,其他的80%~90%花在了下載頁面中的全部組件上,有一部分時間花在解析HTML、腳本、樣式表上面。javascript

首先整頁時間>3s ,延遲1秒的頁面加載時間可能致使轉換損失7%,減小11%的頁面瀏覽量,並減小16%的客戶滿意度。若是3秒後,網頁還未加載完畢,57%的用戶會放棄,74%的用戶登陸某網站時間超過5秒後就不會再登陸這個網站,下面說一下總結的性能優化方案。css

1.減小HTTP請求前端

CSS Spritesjava

經過網上現成的CSS Sprites工具,或者本身用ps合成將一些所謂的小圖片整合成一個background的png圖片,而後經過css background屬性的position來定位到對應圖片的位置webpack

 

優勢:經過CSS Sprites能夠減小HTTP請求,下降下載量(減小圖片字節),一般不建議將大圖也進行合併操做git

缺點:若是考慮響應式設計,或者要適配手機屏幕,可能爲了調整圖片自適應大小會很苦惱,後期若是重改設計就會增長github

合併腳本和樣式表web

經過合併腳本和樣式表能有效的減小HTTP請求,由於每個文件就會致使一個額外的HTTP請求ajax

除此以外還有2中 圖片地圖和內聯圖片,不過在IE支持下不是很好gulp

2.壓縮組件

使用gzip、deflate編碼來壓縮HTTP響應包,去壓縮腳本、樣式文件、HTML,包括(XML、JSON在內的任何文本響應,圖片和PDF不建議壓縮)並由此減小網絡響應時間,並配合Expires和Cache-Control來緩存響應,壓縮一般能將響應的數據量減小將近70%

3.使用CDN

CDN(內容發佈網絡),將應用程序Web服務器分散開來,達到將響應時間大幅減小,CDN 是一組分部在不一樣地理位置的web服務器,用於更加有效地向用戶發佈內容,CDN用於發佈靜態內容,如圖片、腳本、樣式表河和Flash,靜態文件更容易存儲而且具備較少的依賴性,對於地理上分散的用戶人羣來講,CDN能輕易獲得響應速度上的提升

4.增長Expires頭

瀏覽器和代理使用緩存來減小HTTP請求的數量,並減小HTTP響應的大小,使用WEB頁面加載得更快,Web服務器使用Expires頭來告訴Web客戶端它可使用一個組件的當前那副本,直到指定的時間爲止,HTTP規範中簡要地稱在某一段時間以後,響應被認爲是無效的,能夠給CSS,腳本等添加Expires,在升級版本的時候將v的後綴版本號調整發布便可

將樣式表放在頂部、將腳本放在底部

若是將腳本文件放在頂部會阻礙樣式文件加載這樣帶來恐怖的後果是,堵塞內容的呈現,頁面將一段時間白屏,或者頁面殘缺,響應時間變慢,將樣式表文件放在底部也是由於這個緣由,另外腳本會阻塞其後組件的下載,前端是爲了給用戶以更好的體驗,因此先把用戶體驗放在第一位

將一個web頁面組件平均放在兩個主機名下面,總體響應時間能夠減小大概一半響應時間,通常不建議超過4個主機,另外建議使用延遲腳本Defer屬性,腳本內不包含document.write,在FireFox中延遲腳本也會阻塞顯示和並行下載,若是一個腳本能夠延遲那麼必定也能夠放在頁面底部加載

5.避免CSS表達式

CSS表達式是CSS屬性的強大的方式 IE5之後的版本支持它,CSS表達式會形成頁面頻繁的被渲染,增長頁面內存佔用率,表達式的問題就在於它的計算頻率要比咱們想象的多。不只僅是在頁面顯示和縮放時,就是在頁面滾動、乃至移動鼠標時都會要從新計算一次。給CSS表達式增長一個計數器能夠跟蹤表達式的計算頻率。在頁面中隨便移動鼠標均可以輕鬆達到10000次以上的計算量,IE就會假死,這個時候建議用setTimeout作一個節流器

6.使用外部javascript和css

內部的腳本和樣式確實會比外部的來的快不少,並且減小HTTP請求,可是考慮到組件重用方面若是給外部組件加上緩存在用戶瀏覽量越多的狀況下效率越高,反之,若是用戶量越少的網頁內聯的理論會越強,這時候能夠考慮加載後下載將文件appendChild在body下

7.減小DNS查找

DNS也是開銷,一般瀏覽器查找到一個指定的主機名IP 須要20~120ms在DNS查找完畢以前,瀏覽器不能從主機名那裏下載到任何東西,經過使用Keep-Alive和較少的域名來減小DNS查找(Keep-Alive能夠經過重用現有鏈接,從而經過避免TCP/IP開銷來減小響應時間,避免重複的DNS查找),咱們建議將組件分別放到2個,但不超過4個的主機名下,這是在減小DNS查找河容許高度並行下載之間作出的很好的權衡

8.精簡Javascript

精簡Javascript 經過代碼的混淆、清除空白、代碼的重構、簡化,能夠經過JSMin、grunt、gulp、webpack、gzip壓縮和網上的一些精簡代碼的插件解決

9.避免重定向

重定向會使你的頁面變慢,重定向會阻礙頁面加載時間,它發生在URL的結尾必須出現(/)而沒有出現時,當缺乏結尾斜線是不少Web服務器默認行爲,包括Apache,因此主動加上結尾斜線仍是頗有必要的,去檢查一些你的web日誌就能看到發出了多少301狀態碼,這能幫助你認識到多麼值得去解決缺乏結尾斜線的問題

10.配置ETag

ETag(Entity Tag)是web服務器河瀏覽器用於確認緩存組件是否有效性的一種機制,ETag是加入爲驗證明體提供了比修改日期更爲靈活的機制,例如實體依據User-Agent或者Accept-Language頭而改變,實體的狀態能夠反映在Etag中,若是瀏覽器必須驗證一個組件會使用If-None-Match 頭將Etag傳回原始服務器,若是ETag是匹配的,會返回304狀態碼,那麼恭喜你已經節省了資源,對於集羣來處理請求的網站來講,Apache河IIS向ETag中嵌入的數據會大大下降有效性驗證的成功率、ETag還下降了代理緩存的效率、這裏若是你的組件必須經過修改日期以外的東西來驗證,則ETag是一種強大的方法。

11.使Ajax可緩存

Ajax是DHTML中的一項關鍵技術,而DHTML僅用於Web2.0應用程序,Ajax擁有異步和及時的特性,雖然Ajax請求是異步的,用戶可能仍然須要等待響應,若是界面中打開網站有10個ajax請求處理並加載到頁面中若是用戶關閉該頁面並從新打開它,會產生這10個請求由於這些請求沒有被緩存,響應中沒有任何一個頭告訴瀏覽器對其進行緩存,若是10個請求中有一半都是同樣的,我以爲能夠考慮用ajax,但並非必須的,由於ajax請求一半都是同樣的那麼我以爲能夠將同樣的一半從新設計吐出在模板中更合理,固然緩存ajax適用於特殊狀況,有趣的是在IE瀏覽器中ajax是默認被緩存的使得咱們不得不在URL下添加時間戳來解決這個問題。

喜歡的話幫忙點推薦
https://github.com/Mrxdh 幫忙點擊Follower

相關文章
相關標籤/搜索