前端HTTP優化

NikoManiac 發布于2019-08-23 11:35 / 3397人閱讀

摘要：如果服務器端的資源沒有變化，則自動返回狀態碼，內容為空，這樣就節省了傳輸數據量。從而保證不向客戶端重復發出資源，也保證當服務器有變化時，客戶端能夠得到最新的資源。標準，表明過期時間，注意此處的時間都是指的是服務器的時間。

前端部署時，需將 html/css/js/img 等靜態資源發布至服務器/CDNs，常規優化點如下：
基于 express server 的例子

1 合并、壓縮、混淆

文件合并，減少 http 請求次數
壓縮、混淆，減少靜態資源大小

實現上，可使用 webpack 配合系列插件，打包過程中可壓縮源代碼（去空格、換行、注釋，JS混淆代碼等等），webpack 配置復雜，不過多贅述

2 http gzip 壓縮

減少 http 傳輸過程中文件大小

2.1 壓縮前后對比

2.2 HTTP 請求頭 Accept-Encoding

HTTP 請求頭 Accept-Encoding 會將客戶端能夠理解的內容編碼方式——通常是某種壓縮算法——進行通知。通過內容協商的方式，服務端會選擇一個客戶端提議的方式，使用并在響應報文首部 Content-Encoding 中通知客戶端該選擇。

2.3 HTTP 響應頭 Content-Encoding

Content-Encoding 是一個實體消息首部，用于對特定媒體類型的數據進行壓縮。當這個首部出現的時候，它的值表示消息主體進行了何種方式的內容編碼轉換。這個消息首部用來告知客戶端應該怎樣解碼才能獲取在 Content-Type 中標示的媒體類型內容。

3 Not Modified 304

減少傳輸內容提升性能。
客戶端有緩沖的文檔并發出了一個條件性的請求。服務器告訴客戶端，原來緩沖的文檔還可以繼續使用，涉及以下兩種 HTTP Header。

3.1 Last-modified / If-Modified-Since

1）瀏覽器第一次請求某個URL時，服務器端的返回狀態會是200，內容是你請求的資源，同時有一個Last-Modified的屬性標記此文件在服務期端最后被修改的時間

2）客戶端第二次請求此URL時，HTTP 協議的規定，瀏覽器會向服務器傳送 If-Modified-Since 報頭，詢問該時間之后文件是否有被修改過。

3）如果服務器端的資源沒有變化，則自動返回 HTTP 304 Not Modified 狀態碼，內容為空，這樣就節省了傳輸數據量。當服務器端代碼發生改變或者重啟服務器時，則重新發出資源，返回和第一次請求時類似。從而保證不向客戶端重復發出資源，也保證當服務器有變化時，客戶端能夠得到最新的資源。

3.2 Etag / If-None-Match

Etag 類似于 hash 值，用來判斷請求的文件是否被修改，其 http 緩存步驟與 Last-Modified 相同。

HTTP 協議規格說明定義ETag為“被請求變量的實體值”。另一種說法是，ETag是一個可以與Web資源關聯的記號（token）。

3.3 Etag 主要為了解決 Last-Modified 無法解決的一些問題

1）一些文件也許會周期性的更改，但內容并未改變（僅僅改變的修改時間），這個時候我們并不希望客戶端認為這個文件被修改了，而重新 GET
2）某些文件修改非常頻繁，比如在秒以下的時間內進行修改（比方說1s內修改了N次），If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)
3）某些服務器不能精確的得到文件的最后修改時間

4 瀏覽器緩存

Last-Modified 和 Etag 標識資源變化情況，服務器返回 304 Not Modified 降低網絡傳輸大小，提升性能。但是對于如圖片、react/vue這類庫資源、通用css這些不經常變化的靜態資源，應利用瀏覽器緩存功能，連304這次請求都優化掉。

4.1 Pragma

HTTP1.0 標準，表明禁用緩存，由于 Pragma 在 HTTP 響應中的行為沒有確切規范，所以不能可靠替代 HTTP/1.1 中通用首部 Cache-Control。看了下騰訊視頻、京東商城等頁面，用在html的請求頭中。

4.2 Expires

HTTP1.0 標準，表明過期時間，注意此處的時間都是指的是服務器的時間。（無效的日期，比如 0, 代表著過去的日期，即該資源已經過期）

**存在問題**：客戶端與服務器時間不一致，可能導致緩存失效。

4.3 Cache-Control

HTTP 1.1 標準，是 expires 的補充，使用的是相對時間的概念。
Cache-Control 屬性如下：

1）max-age: 設置緩存的最大的有效時間，單位為秒（s）。max-age會覆蓋掉Expires
2）s-maxage: 只用于共享緩存，比如CDN緩存（s -> share）。與 max-age 的區別是：max-age 用于普通緩存，而 s-maxage 用于代理緩存。如果存在 s-maxage，則會覆蓋 max-age 和 Expires
3）public：響應會被緩存，并且在多用戶間共享。默認是public。
3）private: 響應只作為私有的緩存，不能在用戶間共享。如果要求HTTP認證，響應會自動設置為private。
4）no-cache: 指定不緩存響應，表明資源不進行緩存。但是設置了no-cache之后并不代表瀏覽器不緩存，而是在緩存前要向服務器確認資源是否被更改。因此有的時候只設置no-cache防止緩存還是不夠保險，還可以加上private指令，將過期時間設為過去的時間。
5）no-store: 絕對禁止緩存。
6）must-revalidate: 如果頁面過期，則去服務器進行獲取。

更多屬性請參考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

使用瀏覽器緩存后，chrome 中網絡請求如下：
1）from memery cache 從內存中讀取
2）from disk cache 從瀏覽器緩存中讀取

Chorme官網描述

5 HTTP2

這篇文字介紹的很全面
協議遞進順序 HTTP1.0 -> HTTP1.1 -> spdy（谷歌） -> HTTP2

1）多路復用 + 二進制分幀：使用 HTTP1.1，瀏覽器在同一時間，針對同一域名下的請求有一定的數量限制，超過限制數目的請求會被阻塞（不同瀏覽器不同），HTTP2 引入二進制數據幀和流的概念，而非 HTTP1.1 的文本形式，實現在同一 TCP 連接下的多并發請求（當然 HTTP1.1 優化的 keep-alive 也不需要了）
  2）頭部壓縮：HTTP1.1 Header 中有許多無意義的重復的頭部，HTTP2 使用 HPACK 算法進行頭部壓縮
  3）服務端推送：例如，在瀏覽器請求 html 時，服務端預測性的將 js、css 等文件推送回來，但在實際應用中有許多問題需要解決

GPU云服務器云服務器前端優化網頁前端優化前端頁面優化前端代碼優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97174.html

淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

Winer 2019-08-20 11:04 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

philadelphia 2019-08-01 15:44 評論0 收藏0
web前端應該從幾個方面來優化性能

摘要：從用戶角度來說，優化能讓頁面加載的更快，對用戶的操作能及時的響應，能提升用戶的更好的體驗效果。從服務商的角度來說，優化能解決頁面的請求次數，或者減少請求所帶來的帶寬。 1.從用戶角度來說，優化能讓頁面加載的更快，對用戶的操作能及時的響應，能提升用戶的更好的體驗效果。2.從服務商的角度來說，優化能解決頁面的請求次數，或者減少請求所帶來的帶寬。前端優化的方式有很多，主要可以分為兩大類；第一...

ckllj 2019-08-29 12:12 評論0 收藏0
web前端應該從幾個方面來優化性能

摘要：從用戶角度來說，優化能讓頁面加載的更快，對用戶的操作能及時的響應，能提升用戶的更好的體驗效果。從服務商的角度來說，優化能解決頁面的請求次數，或者減少請求所帶來的帶寬。 1.從用戶角度來說，優化能讓頁面加載的更快，對用戶的操作能及時的響應，能提升用戶的更好的體驗效果。2.從服務商的角度來說，優化能解決頁面的請求次數，或者減少請求所帶來的帶寬。前端優化的方式有很多，主要可以分為兩大類；第一...

andycall 2019-08-01 16:28 評論0 收藏0
鳥瞰前端 , 再論性能優化

摘要：前端性能優化的涉及點從服務器到協議再到宿主環境本身都要有比較深刻的認識，業界目前主要還是以雅虎總結出來條前端性能優化的黃金軍規為參考。歡迎大家前往騰訊云技術社區，獲取更多騰訊海量技術實踐干貨哦~ 導語 : 從事前端有6年+的時間了，從最開始的美工到重構再到偏向js邏輯開發的前端開發，一直在前端這個行業里面摸索和學習，我現在將自己這些年的一個心得體會來個系統性的梳理寫成一篇關于性能優化...

voidking 2019-08-29 13:47 評論0 收藏0
參加第二屆前端開發者年度大會總結

摘要：代表公司去參加今年的第二屆前端開發者年度大會，散會的時候，技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完美趁著還記得點什么，在這里做個自我回顧總結，謹代表個人見解，有不當之處，或若涉及圖片隱私或者其它問題，煩請代表公司去參加今年的第二屆前端開發者年度大會，散會的時候，Team 技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完...

solocoder 2019-08-19 17:55 評論0 收藏0