前端优化实例
頁面：m.babytree.com/ask
建議：
1.降低網絡負荷
? 1.1縮小圖片尺寸：
?????100-1.png:由252*100 縮小到 127*50
?????100-2.png:由272*100 縮小到 127*50
???????? ? Pregnancy.png: 由144*144 縮小到 72*72
? 1.2壓縮以下資源
?????圖片名稱：icon-mak.jpg,icon-weixin.jpg,100-1.png,100-2.png, mobile-common@2x.f6929afd.png
?????JS文件：myurchin.js,stat.js
?????Html文件：ask
2.減少延遲
? 2.1body中含有css內容??
? 2.2指定圖片大小??
?????100-1.png,100-2.png,pregnancy.png
? 2.3HTTP標頭中指定字符集?
3.其它
? 主機babytreeimg.com 應啟用 Keep-Alive
? 在 HTTP 標頭中為靜態資源啟用公共緩存
? 指示代理服務器緩存資源的兩個版本：壓縮版與未壓縮版。這樣有助于避免公共代理無法正確檢測Content-Encoding 標頭的問題
顯式設置圖片的寬高 ?不管是<img>里面還會CSS里面務必設置圖片大小 ?如果圖片大小沒有規定或者實際大小和制定的大小不一致時瀏覽器要下載好這個圖片以后糾正并重新顯示 這個很好資源的
HTTP頭信息
頭信息由“鍵：值”組成。它們描述客戶端或者服務器的屬性、被傳輸的資源以及應該實現連接。
四種不同類型的頭標
通用頭標：即可用于請求，也可用于響應，是作為一個整體而不是特定資源與事務相關聯。
請求頭標：允許客戶端傳遞關于自身的信息和希望的響應形式。
響應頭標：服務器和于傳遞自身信息的響應。
實體頭標：定義被傳送資源的信息。即可用于請求，也可用于響應。
頭標格式：<name>:<value><CRLF>
Accept
定義客戶端可以處理的媒體類型，*/* 表示任何類型，type/* 表示該類型下的所有子類型。
Accept-Charset
定義客戶端可以處理的字符集
Accept-Encoding
定義客戶端可以理解的編碼機制，通常指定壓縮方法，是否支持壓縮，支持什么壓縮方法（gzip，deflate）
Accept-Language
定義客戶端樂于接受的自然語言列表。例如：Accept-Language: en,de
Accept-Ranges
WEB服務器表明自己是否接受獲取其某個實體的一部分（比如文件的一部分）的請求( bytes：表示接受，none：表示不接受)
Age
當代理服務器用自己緩存的實體去響應請求時，用該頭部表明該實體從產生到現在經過多長時間了，以秒為單位。
Authorization
當客戶端接收到來自WEB服務器的 WWW-Authenticate 響應時，用該頭部來回應自己的身份驗證信息給WEB服務器。
Cache-Control
一個用于定義緩存指令的通用頭標。
Connection
一個用于表明是否保存socket連接為開放的通用頭信息。
例如：Keep-Alive：300
Content-Encoding
WEB服務器表明自己使用了什么壓縮方法（gzip，deflate）壓縮響應中的對象。
Content-Language
WEB 服務器告訴瀏覽器自己響應的對象的語言。
Content-Length
WEB 服務器告訴瀏覽器自己響應的對象的長度。
Content-Range
WEB 服務器表明該響應包含的部分對象為整個對象的哪個部分。
Content-Type
WEB服務器告訴瀏覽器自己響應的對象的類型。
Date
發送HTTP消息的日期和時間。
ETag
就是一個對象（比如URL）的標志值，，ETag 的作用跟 Last-Modified 的作用差不多，主要供 WEB 服務器判斷一個對象是否改變了。
Expired
WEB服務器表明該實體將在什么時候過期，對于過期了的對象，只有在跟WEB服務器驗證了其有效性后，才能用來響應客戶請求。
Host
被請求資源的主機名。對于使用HTTP/1.1的請求而言，此域是強制性的。
If-Match
如果對象的 ETag 沒有改變，其實也就意味著對象沒有改變，才執行請求的動作。
If-None-Match
如果對象的 ETag 改變了，其實也就意味著對象也改變了，才執行請求的動作。
If-Modified-Since
如果請求的對象在該頭部指定的時間之后修改了，才執行請求的動作（比如返回對象），否則返回代碼304，告訴瀏覽器該對象沒有修改。
If-Range
瀏覽器告訴 WEB 服務器，如果我請求的對象沒有改變，就把我缺少的部分給我，如果對象改變了，就把整個對象給我。瀏覽器通過發送請求對象的 ETag 或者 自己所知道的最后修改時間給 WEB 服務器，讓其判斷對象是否改變了，必須跟 Range 頭部一起使用。
Last-Modified
WEB 服務器認為對象的最后修改時間，比如文件的最后修改時間，動態頁面的最后產生時間等等。
Location
WEB服務器告訴瀏覽器，試圖訪問的對象已經被移到別的位置了，到該頭部指定的位置去取。
Pramga
一個通用頭標，它發送實現相關的信息，主要使用 Pramga: no-cache，相當于 Cache-Control： no-cache。
Proxy-Authenticate
代理服務器響應瀏覽器，要求其提供代理身份驗證信息。
Proxy-Authorization
瀏覽器響應代理服務器的身份驗證請求，提供自己的身份信息。
Range
瀏覽器（比如 Flashget 多線程下載時）告訴 WEB 服務器自己想取對象的哪部分。
Referer
瀏覽器向 WEB 服務器表明自己是從哪個 網頁/URL 獲得/點擊 當前請求中的網址/URL。
Server
WEB 服務器表明自己是什么軟件及版本等信息。
User-Agent
瀏覽器表明自己的身份（是哪種瀏覽器等信息）。
Transfer-Encodin
WEB服務器表明自己對本響應消息體（不是消息體里面的對象）作了怎樣的編碼，比如是否分塊
Vary
WEB服務器用該頭部的內容告訴 Cache 服務器，在什么條件下才能用本響應所返回的對象響應后續的請求。
Via
列出從客戶端到 OCS 或者相反方向的響應經過了哪些代理服務器，他們用什么協議（和版本）發送的請求
轉載于:https://blog.51cto.com/bysowhat/1607342
總結
- 上一篇： 梦到自己摘葡萄是什么意思
- 下一篇： 经典 HTML5 Javascript