.比較http 0.9和http 1.0

1. http0.9只是一個簡單的協(xié)議，只有一個GET方法，沒有首部，目標用來獲取HTML。
2. HTTP1.0協(xié)議大量內容：首部，響應碼，重定向，錯誤，條件請求，內容編碼等。

http0.9流程：

客戶端，構建請求，通過DNS查詢IP地址，三次握手建立TCP連接，客戶端發(fā)起請求，服務器響應，四次揮手，斷開TCP連接。（與服務器只有一個來回）

http1.0流程：

客戶端，構建請求，通過DNS查詢IP地址，三次握手建立TCP連接，客戶端發(fā)起請求，服務器響應，四次揮手，斷開TCP連接。（與服務器有兩個來回）

因為不足缺陷，就有了http1.1。

2.關于http1.1以及http2

http1.1中瀏覽器再也不用為每個請求重新發(fā)起TCP連接了，增加內容有：緩存相關首部的擴展，OPTIONS方法，Upgrade首部，Range請求，壓縮和傳輸編碼，管道化等。但還是滿足不了現在的web發(fā)展需求，so，就有了http.2版本。

http2解決了（管道化特性可以讓客戶端一次發(fā)送所有的請求，但是有些問題阻礙了管道化的發(fā)展，即使某個請求花了很長時間，那么隊頭阻塞會影響其他請求。）http中的隊頭阻塞問題。

使用http2會比http1.1在使用TCP時，用戶體驗的感知多數延遲的效果有了量化的改善，以及提升了TCP連接的利用率（并行的實現機制不依賴與服務器建立多個連接）

所以需要學習http2，了解更過的內容來掌握計算機網絡。

對于http2，你可以來運行一個http2的服務器，獲取并安裝一個http2的web服務器，下載并安裝一張TLS證書，讓瀏覽器和服務器通過http2來連接。（從數字證書認證機構申請一張證書）。

了解http2的協(xié)議，先讓我們了解一下web頁面的請求，就是用戶在瀏覽器中呈現的效果，發(fā)生了些什么呢？

資源獲取的步驟：

把待請求URL放入隊列，判斷URL是否已在請求隊列，否的話就結束，是的話就判斷請求域名是否DNS緩存中，沒有的話就解析域名，有的話就到指定域名的TCP連接是否開啟，沒有的話就開啟TCP連接，進行HTTPS請求，初始化并完成TLS協(xié)議握手，向頁面對應的URL發(fā)送請求。

接收響應以及頁面渲染步驟：

接收請求，判斷是否HTML頁面，是就解析HTML，對頁面引用資源排優(yōu)先級，添加引用資源到請求隊列。（如果頁面上的關鍵資源已經接收到，就開始渲染頁面），判斷是否有還要繼續(xù)接收資源，繼續(xù)解析渲染，直到結束。

3.HTTP的幾種請求方法用途

第一種GET方法：發(fā)送一個請求來獲取服務器上的某一些資源。

第二種POST方法：向URL指定的資源提交數據或附加新的數據。

第三種PUT方法：跟POST方法一樣，可以向服務器提交數據，但是它們之間也所有不同，PUT指定了資源在服務器的位置，而POST沒有哦。

第四種HEAD方法：指請求頁面的首部。

第五種DELETE方法：刪除服務器上的某資源。

第六種OPTIONS方法：它用于獲取當前URL所支持的方法，如果請求成功，在Allow的頭包含類似GET,POST等的信息。

第七種TARCE方法：用于激發(fā)一個遠程的，應用層的請求消息回路。

第八種CONNECT方法：把請求連接轉換到TCP/TP通道。

4.從瀏覽器地址欄輸入url到顯示頁面的步驟

簡單說說，瀏覽器根據請求的url交給dns域名解析，查找真正的ip地址，向服務器發(fā)起請求；服務器交給后臺處理后，返回數據，瀏覽器會接收到文件數據，比如，html,js，css，圖像等；然后瀏覽器會對加載到的資源進行語法解析，建立相應的內部數據結構；載入解析到的資源文件，渲染頁面，完成顯示頁面效果。

不夠清楚明白碼？

那就再次詳細一下，咳咳，從瀏覽器接收url，開始進行網絡請求線程，發(fā)出一個完整的HTTP請求，從服務器端接收請求到對應的后臺接收到請求，然后是后臺和前臺的http交互；其中的緩存問題（http的緩存），瀏覽器接收到http數據包后的解析流程，css的可視化格式模型，js引擎解析過程等；其他呈現頁面效果。

：這里就需要你對瀏覽器內核的理解：其中主要的渲染引擎和JS引擎，這里了解一下你對瀏覽器內核的理解。

1. 渲染引擎，是負責取得網頁的內容，整理信息，以及計算網頁的顯示方式，然后輸出到顯示器上。
2. JS引擎是用于解析和執(zhí)行javascript來實現網頁的動態(tài)效果。

瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。其實最開始渲染引擎和JS引擎是沒有區(qū)分明確的，不過后來JS引擎越來越獨立，so，內核就傾向于渲染引擎。

對于資源請求/獲取,資源響應/頁面渲染，會給網絡帶寬和設備資源帶來壓力，這個時候就會考慮到web的性能優(yōu)化。

5.web的性能優(yōu)化

其中里面的性能關鍵：

什么是數據包 數據包（IP數據包），指封裝在固定結構的一系列字節(jié)，它定義了數據包的長度，傳輸的細節(jié)，以及其他與TCP相關的信息。

延遲：指IP數據包從一個網絡端點到另一個網絡端點所花費的時間。（所花費時間在于往返時延，是延遲的時間的兩倍）

帶寬：只要帶寬沒有飽和，兩個網絡端點的連接會一次處理盡可能多的數據量（所以帶寬可能會成為性能的瓶頸）

建立連接時間：在客戶端和服務器之間建立連接往返數據（三次握手）

TCP三次握手過程：客戶端向服務器發(fā)起一個SYN包，服務器端返回對應的SYN的ACK響應以及新的SYN包，然后客戶端返回對應的ACK。（在客戶端和服務器之間建立正常的TCP網絡連接時，客戶端首先發(fā)出一個SYN消息，服務器使用SYN+ACK應答表示接收了這個消息，最后客戶端再以ACK消息響應。）

SYN是同步序列編號，是TCP/IP建立連接時使用的握手信息。ACK是確認字符，在數據通信中，接收站發(fā)給發(fā)送站的一種傳輸類控制字符。表示發(fā)來的數據已確認接收無誤。在TCP/IP協(xié)議中，如果接收方成功的接收到數據，那么會回復一個ACK數據。通過ACK信號有自己固定的格式，長度大小，由接收方回復給發(fā)送方。

詳解三次握手：

第一次握手，建立連接時，客戶端發(fā)送SYN包到服務器，并進入SYN_SENT狀態(tài)，等待服務器確認，其中SYN就是同步序列編號。

第二次握手，服務器收到SYN包，必須確認客戶的SYN，同時自己也發(fā)送一個SYN包，即是SYN+ACK包，此時服務器進入SYN_RECV狀態(tài)。

第三次握手，客戶端收到服務器的SYN+ACK包，向服務器發(fā)送確認包ACK，此包發(fā)送完畢，客戶端和服務器進入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手。

完成三次握手，客戶端與服務器開始傳送數據。

TLS協(xié)商時間（TLS會造成額外的往返傳輸）

1. 客戶端發(fā)起https連接，需要進行傳輸層安全協(xié)議協(xié)商
2. TLS用來取代安全套接層SSL

除了網絡，還有頁面內容本身或服務器性能，如首字節(jié)時間TTFB，內容下載時間，開始渲染時間，文檔加載完成的時間等。

那么什么是TTFB，它是指客戶端從開始定位到web頁面，直接收到主體頁面響應的第一字節(jié)所耗費的時間。它是測量：從瀏覽器發(fā)起請求至收到其第一字節(jié)之間的耗時。

內容下載時間是等同于被請求資源的最后字節(jié)到達時間。

開始渲染時間，從客戶看到空白頁面的時長。

5.1web性能優(yōu)化技術（減少客戶端網絡延遲和優(yōu)化頁面渲染性能來提升web性能）

優(yōu)化技術：

• DNS查詢優(yōu)化
• 客戶端緩存
• 優(yōu)化TCP連接
• 避免重定向
• 網絡邊緣的緩存
• 條件緩存
• 壓縮和代碼極簡化
• 圖片優(yōu)化

6. http1.1

• 改進持久連接和CDN域名的分片機制
• 不成熟的http管道化
• 提供虛擬主機支持
• 對動態(tài)生成的內容完美支持
• 引入cookie以及安全機制

對于http1的問題，迎來了http2。其中http1的問題：

隊頭阻塞，大多數情況下，瀏覽器會希望同時獲取許多資源，但http1未提供機制來同時請求這些資源，如果僅是使用一個連接，需要發(fā)起請求，等待響應，然后才能發(fā)起下一個請求。

在http1中要給特性為管道化，可以允許一次發(fā)送一組請求，但是需要按照發(fā)送順序依次接收響應。所以在請求應答過程中，如發(fā)生什么情況，剩下的工作都會被阻塞，這就是“隊頭阻塞”（阻塞在那次請求應答發(fā)生錯誤），阻礙網絡傳輸和web頁面的渲染，指導失去響應。

低效的TCP利用，TCP協(xié)議作為最可靠的協(xié)議之一，其核心是擁塞窗口。

擁塞窗口，是衛(wèi)星通信在因特網中防止通信擁塞的一種措施，它是在發(fā)端采用了一種“擁塞避免”算法和“慢速啟動”算法相結合的機制。“擁塞窗口”就是“擁塞避免”的窗口，它是一個裝在發(fā)送端的可滑動窗口，窗口的大小是不超過接收端確認通知的窗口。

擁塞窗口指在接收方確認數據包之前，發(fā)送方可以發(fā)送的TCP包的數據。（如擁塞窗口指定為1的情況，那么發(fā)送方就發(fā)出1個數據包之后，只有接收方確認了那個發(fā)出的數據包，才能發(fā)送下一個）

擁塞控制能防止過多的數據注入到網絡中，用于避免網絡過載，TCP中可以通過慢啟動探索當前連接對應擁塞窗口的合適大小。即發(fā)送者發(fā)送數據的時候并非一開始注入大量數據到網絡中，而是發(fā)送一個數據包進行測試，當得到確認回復后，額外發(fā)送一個未確認包。

這意味著得到一個確認回復，可以發(fā)送兩個數據包，得到兩個確認回復，可以發(fā)送四個數據包，以幾何形式增長很快到達協(xié)議規(guī)定的擁塞窗口大小（發(fā)包數上限），這時候連接進入擁塞避免階段，這種機制需要往返幾次才能得知最佳擁塞窗口大小，但往返幾次所需的時間成本不可忽略。

• 擁塞窗口的大小取決于網絡的擁塞程度，并且動態(tài)地在變化。發(fā)送方讓自己的發(fā)送窗口等于擁塞窗口。如果再考慮到接收方的接收能力，那么發(fā)送窗口還可能小于擁塞窗口。
• 發(fā)送方控制擁塞窗口的原則是：只要網絡沒有出現擁塞，擁塞窗口就再增大一些，以便把更多的分組發(fā)送出去。但只要網絡出現擁塞，擁塞窗口就減少一些，以減少注入到網絡中的分組數。

tcp中的慢啟動概念，是用來探索當前連接對應擁塞窗口的合適大小。用來弄清楚新連接當前的網絡情況。“慢速啟動”是在連接建立后，每收到一個來自收端的確認，就控制窗口增加一個段值大小，當窗口值達到“慢速啟動”的限值后，慢速啟動便停止工作，避免了網絡發(fā)生擁塞。

TCP傳輸控制協(xié)議的設計思路是，對假設情況很保守情況下，能夠公平對待同一網絡的不同流量的應用，它的避免擁塞機制被設計城即使在最差的網絡情況下也可以起作用。

臃腫的消息首部，HTTP/1.1能壓縮請求內容，但是消息首部卻不能壓縮。它可能占據請求的絕大部分（也可能是全部）也是比較常見了。（在這里如果能壓縮請求首部，把請求變得更小，就能夠緩解帶寬壓力了，降低系統(tǒng)的總負載）

受限的優(yōu)先級設置，即如果瀏覽器針對指定域名開啟多個socket請求，若web頁面某些資源會比另外一些資源重要，會加重資源的排隊效應，會延遲請求其他的資源，優(yōu)先級高的資源先獲取，優(yōu)先級低的資源會在資源高的資源處理完成，（在處理過程中，瀏覽器不會發(fā)起新的資源請求）等待高的完成后再發(fā)起請求，(這就會讓總的頁面下載時間延長)。

在請求優(yōu)先級高的資源的時間區(qū)間內瀏覽器并不會發(fā)起優(yōu)先級較低的新請求

小結：HTTP1.1慢啟動影響資源首次加載速度，TCP建立連接后，會開始請求傳輸，開始比較慢，然后不斷加快，為了防止出現網絡擁堵，會讓頁面的首次渲染時間變長。開始多個tcp，如出現網絡下降，無法識別資源的優(yōu)先級，會出現靜態(tài)問題。

7.如何進行網站性能優(yōu)化

1. 內容方面，減少Http請求（合并文件，css精靈，inline Image)，減少DNS查詢（DNS緩存，將資源分布到合適的數量的主機名），減少DOM元素的數量。
2. Cookie方面，可以減少Cookie的大小。
3. css方面，將樣式表放到頁面頂部；不使用css表達式；使用<link>不使用@import；可將css從外部引入；壓縮css。
4. JavaScript方面，將腳本放到頁面底部；將JavaScript從外部引入；壓縮JavaScript，刪除不需要的腳本，減少DOM的訪問。
5. 圖片方面，可優(yōu)化css精靈，不要在HTML中拉伸圖片，優(yōu)化圖片（壓縮）。

8.http狀態(tài)碼以及含義

1. 對于1xx的狀態(tài)碼，為信息狀態(tài)碼，100 為繼續(xù)，表示確認，成功返回具體參數信息。
2. 對于2xx的狀態(tài)碼，200 表示正常返回信息，201表示請求成功并且服務器創(chuàng)建了新的資源，202表示服務器已接受請求，但尚未處理。
3. 對于3xx，重定向，301表示，請求的網頁已永久移動到新位置，302表示，臨時性重定向，303表示臨時性重定向，且總是使用 GET 請求新的 URI。304表示，自從上次請求后，請求的網頁未修改過。
4. 對于4xx，客戶端錯誤，404，服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發(fā)起請求，401，請求未授權，403，禁止訪問，404，找不到如何與 URI 相匹配的資源。
5. 對于5xx，服務器錯誤，500，最常見的服務器端錯誤，503，服務器端暫時無法處理請求，可能是過載或維護。

9.http-數據壓縮

數據壓縮，在瀏覽器中發(fā)送請求時會帶著Content-Encoding: gzip，里面時瀏覽器支持的壓縮格式列表，有多種如，gzip，deflate，br等。這樣服務器就可以從中選擇一個壓縮算法，放進Content-Encoding響應頭里，再把原數據壓縮后發(fā)給瀏覽器。

10.http-分塊傳輸

分塊傳輸，就是將傳輸的文件分解成多個小塊，然后分發(fā)給瀏覽器，瀏覽器收到后再重新組裝復原。

每個分開包含兩個部分，分塊長度和分塊數據（長度頭和數據塊），長度頭以CRLF結尾的一行明文，數據塊緊跟在長度頭后面，也是用CRLF結尾，最后用一個長度為0的塊表示結束。

在響應報文里用頭字段Transfer-Encoding:chunked表示報文里的body部分不是一次性發(fā)送過來的，而是分成了許多塊逐個發(fā)送的。

在Transfer-Encoding：chunked和Content-Length中，這兩個字段是互斥的。

一個響應報文的傳輸長度要么已知，要么長度未知（chunked）。

Content-Length: 299

11.http-范圍請求

斷點續(xù)傳

要實現該功能需要制定下載的實體范圍，這種制定范圍發(fā)送請求叫做范圍請求。

Accept-Ranges：服務器使用http響應頭Accept-Ranges標識自身支持范圍請求，字段的具體值用于定義范圍請求的單位。

語法

Accept-Ranges: bytes,范圍請求的單位是 bytes （字節(jié)）
Accept-Ranges: none,不支持任何范圍請求單位

范圍請求時用于不需要全部數據，只需要其中的部分請求時，可以使用范圍請求，允許客戶端在請求頭里使用專用字段來表示只獲取文件的一部分。

Range的格式，請求頭Range是HTTP范圍請求的專用字段，格式是“bytes=x-y”,以字節(jié)為單位的數據范圍。

1. “0-”表示從文檔起點開始到文檔結束的整個文件。
2. “100-”表示從第100個字節(jié)開始到文檔末尾。
3. “-10”表示從文檔末尾倒數的第10個字節(jié)開始。

示例：

執(zhí)行范圍時會使用頭部字段 Range 來指定資源 byte 的范圍。
Range格式：
5001-10000字節(jié)
Range : byte=5001-10000
5000之后的
Range : byte=5001-
0-3000字節(jié)，5001-10000字節(jié)
Range : byte=-3000,5001-10000

上圖表示服務器收到Range字段后，檢測范圍合法性，范圍越界，就會返回狀態(tài)碼416，如你的文件只有1000個字節(jié)，但請求范圍在20000-3000，就會導致這個狀態(tài)碼的出現。

如果成功讀取文件，范圍正確，返回狀態(tài)碼“206”。服務器要添加一個響應頭字段Content-Range,告訴片段的實際偏移量和資源的總大小。

最后是發(fā)送數據，直接把片段用TCP發(fā)給客戶端，一個范圍請求就算是處理完了。

格式是“bytes x-y/length”,與Range頭區(qū)別在沒有“=”

Content-Range: bytes 0-4395719/4395720

12.http-多段數據

多端數據，就是在Range頭里使用多個“x-y"，一次性獲取多個片段數據。使用一種特殊的MIME類型：“multipart/byteranges”，用來表示響應報文包含了多個范圍時使用。多種范圍請求 響應會在頭部 Content-Type 表明 multipart-byteranges。

多段數據圖：分隔標記boundary來區(qū)分不同的分段

13.說一說cookies，sessionStorage 和 localStorage 的區(qū)別？

• cookie是網站用來標識用戶身份而存儲在用戶本地終端上的數據
• cookie數據始終在同源的http請求中攜帶，即使是不需要的情況，so，會在瀏覽器和服務器間來回傳遞
• sessionStorage和localStorage不會自動把數據發(fā)送給服務器，僅僅在本地保存

存儲的大小

cookie的數據大小不能超過4k；sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或者更大。

有限期時間

1. localStorage存儲持久數據，瀏覽器關閉后數據不會丟失，除了主動刪除數據
2. sessionStorage數據在當前瀏覽器窗口關閉后自動刪除
3. 設置得cookie過期時間之前都有效，就算窗口或者是瀏覽器關閉

14.為什么說利用多個域名來存儲網站資源會更有效？

因為CDN緩存更方便；突破瀏覽器并發(fā)限制；節(jié)約cookie帶寬；節(jié)約主域名得連接數，優(yōu)化頁面響應速度；防止不必要得安全性問題。

15.http2.0的內容

http2是超文本傳輸協(xié)議的第二版，相比http1協(xié)議的文本傳輸格式，http2是以二進制的格式進行數據傳輸的，具有更小的傳輸體積以及負載。

http2.0分層，分幀層（http2多路復用能力的核心部分),數據或http層（包含傳統(tǒng)上被認為是 HTTP 及其關聯(lián)數據的部分）。

HTTP2.0：

• 多路復用機制，引入了二進制的分幀層機制來實現多路復用。（分幀層是基于幀的二進制協(xié)議。這方便了機器解析。請求和響應交織在一起。）
• 可以設置請求的優(yōu)先級（客戶端的分幀層對分割塊標上請求的優(yōu)先級）。
• 頭部壓縮 請求頭壓縮，增加傳輸效率。

HTTP/2較HTTP/1.1優(yōu)化亮點

• 多路復用的流
• 頭部壓縮
• 資源優(yōu)先級和依賴設置
• 服務器推送
• 流量控制
• 重置消息

多路復用的實現：

在單個域名下仍可以建立一個TCP管道，使用一個TCP長連接，下載整個資源頁面，只需要一次慢啟動，并且避免了靜態(tài)，瀏覽器發(fā)起請求，分幀層會對每個請求進行分割，將同一個請求的分割塊打上相同的id編號，然后通過協(xié)議棧將所有的分割體發(fā)送給服務器，然后通過服務器的分幀層根據id編號進行請求組裝，服務器的分幀層將回應數據分割按同一個回應體進行ID分割回應給客戶端，客戶端拼裝回應。

對于http2中的幀（frame），http1不是基于幀（frame）的，是文本分隔的。

GET/HTTP/1.1 <crlf>

這樣，對于http1的請求或者是響應可能有的問題：

1. 一次只能處理一個請求或者是響應，完成之前是不能停止解析的。
2. 無法預判解析需要多少內層。

HTTP/1 的請求和響應報文，是由起始行、首部和正文組成，換行符分隔；HTTP/2是將請求和響應數據分割成更小的幀，采用二進制編碼，易于解析的。

參考圖片：

幀結構總結 所有的幀都包含一個9 byte的幀頭 + 可邊長的正文不同。根據幀的類型不同，正文部分的結構也不一樣。

幀頭：

16.http2-幕后

http2作為一個二進制協(xié)議，擁有包含輕量型，安全和快速在內的所有優(yōu)勢，保留了原始的http協(xié)議語義，對于http2更改了在系統(tǒng)之間傳輸數據的方式。

二進制分幀層（binary framing layer），所有通信都在單個TCP連接上執(zhí)行，該連接在整個對話期間一直處于打開狀態(tài)，主要是二進制協(xié)議將通信分解為幀的方式，這些幀交織在客戶端與服務器之間的雙向邏輯流中。

HTTP/2 連接的拓撲結構(展示了一個用于建立多個流的連接)

在流 1 中，發(fā)送了一條請求消息，并返回了相應的響應消息。

HTTP/2 幀結構

前9個字節(jié)對于每個幀是一致的。解析時只需要讀取這些字節(jié)，就可以準確地知道在整個幀中期望的字節(jié)數。

幀首部字段表格：

名稱長度描述length3字節(jié)表示幀負載的長度type1字節(jié)當前幀類型Flags1字節(jié)具體幀類型的標識R1位保留位，不要設置，否則會帶來嚴重后果Stream Identifier31位每個流的唯一IDFrame Payload長度可變真實的幀內容,長度是在length字段中設置的

備注：流Id是用來標識幀所屬的流。流看作在連接上的一系列幀，它們構成了單獨的 HTTP 請求和響應。

對于http1 的請求和響應都分成消息首部和消息體兩部分；http2 從上面一張圖可以知道，http2的請求和響應分成HEADERS 幀和 DATA 幀。

比較一下：

http2的一個重要特性是基于流的流量控制。提供了客戶端調整傳輸速度的能力。其中WINDOW_UPDATE 幀用來指示流量控制信息。

有了多路復用，客戶端可以一次發(fā)出多有資源的請求，不用像http1那樣，發(fā)出對新對象請求之前，需要等待前一個響應完成。所以瀏覽器失去了在Http1中的默認資源請求優(yōu)先級策略。

17.瀏覽器生成http請求消息

http的頭字段

頭字段類型含義Date表示請求和響應生成的日期Pragma表示數據是否允許緩存的通信選項Cache-Control控制緩存的相關信息Connection設置發(fā)送響應之后TCP連接是否繼續(xù)保持的通信選項Transfer-Encoding表示消息主體的編碼格式Via記錄途中經過的代理和網關Authorization身份認證數據From請求發(fā)送者的郵件地址Referer當通過點擊超級鏈接進入下一個頁面時，在這里會記錄下上一個頁面的URIUser-Agent客戶端軟件的名稱和版本號等相關信息Accept客戶端可支持的數據類型，以MIME類型來表示Accept-Charset客戶端可支持的字符集Accept-Language客戶端可支持的語言Host接收請求的服務器ip地址和端口號Range當需要只獲取部分數據而不是全部數據時，可通過這個字段指定要獲取的數據范圍Location表示信息的準確位置Server服務器程序的名稱和版本號等相關信息Allow表示指定的URI支持Content-Encoding當消息體經過壓縮等編碼處理時，表示其編碼格式Content-Length表示消息體的長度Content-Type表示消息體的數據類型，以MIME規(guī)格定義的數據類型來表示Expires表示消息體的有效期Last-Modified數據的最后更新日期Content-Language表示消息體的語言Content-Location表示消息體在服務器上的位置Content-Range當僅請求部分數據時，表示消息體包含的數據范圍

HTTP消息示例：

1. HTTP,超文本傳送協(xié)議。
2. 協(xié)議，通信操作的規(guī)則定義稱為協(xié)議。
3. URI，統(tǒng)一資源標識符。
4. 1 條請求消息中只能寫 1 個 URI。如果需要獲取多個文件，必須 對每個文件單獨發(fā)送 1 條請求。

IP 的基本思路

Ip地址的表示方法

IP地址的結構-子網掩碼表示網絡號與主機號之間的邊界。

解析器的調用方法

DNS服務器的基本工作

DNS 服務器之間的查詢操作

數據通過類似管道的結構來流動

18.了解網絡基礎知識

• 物理層
• 數據鏈路層
• 網絡層
• 傳輸層
• 會話層
• 表示層
• 應用層

們經常使用第三方的對象存儲服務，比如七牛云或阿里云，他們都提供了“智能媒體服務”，其實就是在鏈接上加上各種參數，實現圖片的裁剪、縮放等，可以便捷的實現縮略圖，節(jié)省網絡寬帶，加快頁面的訪問。

原理很簡單，就是接收參數然后處理唄。如果用PHP做的話，不難，但是卻要寫好多代碼。操作GD庫太麻煩了。但現在，只要兩行代碼就能實現一套強大的圖片處理功能。

// 實例化
$server=League\Glide\ServerFactory::create([
    'source'=> 'path/to/source/folder',
    'cache'=> 'path/to/cache/folder',
]);

// 可以在第二個參數傳入數組
$server->outputImage('users/1.jpg', ['w'=> 300, 'h'=> 400]);

// 更簡單的做法，直接傳入GET參數
$server->outputImage($path, $_GET);

功能預覽表

glide可以接收26個參數，幾乎可以涵蓋所有的場景需求。

功能介紹

本文對幾個重點的功能做個介紹。

尺寸效果 fit

設置圖像如何適應新的尺寸。

支持的參數：

• contain： 默認。 調整圖像大小以適應寬度和高度邊界，而無需裁剪、扭曲或改變縱橫比。
• max：調整圖像大小以適應寬度和高度邊界，而不會裁剪、扭曲或改變縱橫比，如果圖像小于輸出尺寸，也不會增加圖像的尺寸。
• fill：調整圖像大小以適應寬度和高度邊界，而不裁剪或扭曲圖像，剩余空間用背景色填充。 生成的圖像將匹配約束尺寸。
• fill-max：調整圖像大小以適應寬度和高度邊界而不裁剪，但如果圖像較小則放大圖像。 完成的圖像將在寬度或高度上具有剩余空間（除非新圖像的縱橫比與舊圖像的縱橫比相同）。 剩余空間將用背景色填充。 生成的圖像將匹配約束尺寸。
• stretch：拉伸圖像以完全適合約束尺寸。 生成的圖像將填充尺寸，并且不會保持輸入圖像的縱橫比。
• crop：調整圖像大小以填充寬度和高度邊界并裁剪任何多余的圖像數據。 生成的圖像將匹配寬度和高度限制，而不會扭曲圖像。

裁剪 crop

當尺寸效果設置為裁剪時，可以使用裁剪參數。

裁剪位置：

您還可以通過添加裁剪位置來設置裁剪圖像的位置。 接受 crop-top-left, crop-top, crop-top-right, crop-left, crop-center, crop-right, crop-bottom-left, crop-bottom或者 crop-bottom-right. 默認是 crop-center, 并且與 crop.

作物焦點

除了裁剪位置之外，您還可以使用焦點更具體地確定確切的裁剪位置。 這是使用兩個偏移百分比定義的： crop-x%-y%.

<img src="kayaks.jpg?w=300&h=300&fit=crop-25-75">

您還可以選擇通過提供第三個值來放大您的焦點：一個介于 1 和 100 之間的浮點數。每個完整步長相當于 100% 縮放。 （例如。 x%-y%-2相當于以 200% 的比例查看圖像）。 建議的范圍是 1-10。

<img src="kayaks.jpg?w=300&h=300&fit=crop-25-75-2">

預裁剪

在任何其他調整大小操作之前將圖像裁剪為特定尺寸。 要求的格式： width,height,x,y. 就像使用截圖工具那樣，在先在圖片上截取一段。

<img src="kayaks.jpg?crop=100,100,915,155">

存儲驅動

可以使用flysystem驅動，這意味著不僅可以操作本地的文件，還支持各類存儲方式，比如SFTP、FTP、對象存儲等等。

// 圖片地址
$source=new League\Flysystem\Filesystem(
    new League\Flysystem\Local\LocalFilesystemAdapter('path/to/source/folder')
);

// 緩存地址
$cache=new League\Flysystem\Filesystem(
    new League\Flysystem\Local\LocalFilesystemAdapter('path/to/cache/folder')
);

$server=new League\Glide\Server(
    $source,
    $cache,
);

標準返回Response

可以通過getImageResponse方法獲取標準的PSR-7響應對象，同時官方提供了laravel等框架的擴展響應對象。

默認配置

可以設置默認的圖片處理設置。

$server=League\Glide\ServerFactory::create([
    'defaults'=> [
        'mark'=> 'logo.png',
        'markw'=> '30w',
        'markpad'=> '5w',
    ]
]);

預設

可以提前將各種參數設置好，然后直接傳入預設的名稱即可。比如下面的代碼：

<?php

$server=League\Glide\ServerFactory::create([
    'presets'=> [
        'small'=> [
            'w'=> 200,
            'h'=> 200,
            'fit'=> 'crop',
        ],
        'medium'=> [
            'w'=> 600,
            'h'=> 400,
            'fit'=> 'crop',
        ]
    ]
]);

然后直接使用預設就可以了：

<img src="kayaks.jpg?p=small">

也可以同時使用多個預設：

<img src="kayaks.jpg?p=small,watermarked">

甚至可以使用帶有附加參數的預設：

<img src="kayaks.jpg?p=small,watermarked&filt=sepia">

圖像驅動

支持GD庫和Imagick庫。

$server=League\Glide\ServerFactory::create([

    // 默認使用GD
    'driver'=> 'gd',

    // 使用ImageMagick
    'driver'=> 'imagick',
]);

安裝

使用compsoer安裝即可。

composer require league/glide

安全保護

glide提供了一套簽名機制，通過私鑰（一長串字符）生成一個token，只有攜帶了這個token 才能調用參數，避免人們通過大量的圖像調整參數攻擊服務器。

配置

<?php

use League\Glide\Signatures\SignatureFactory;
use League\Glide\Signatures\SignatureException;

try {
    // 設置秘鑰
    $signkey='v-LK4WCdhcfcc%jt*VC2cj%nVpu+xQKvLUA%H86kRVk_4bgG8&CWM#k*b_7MUJpmTc=4GFmKFp7=K%67je-skxC5vz+r#xT?62tT?Aw%FtQ4Y3gvnwHTwqhxUh89wCa_';

    // 驗證訪問
    SignatureFactory::create($signkey)->validateRequest($path, $_GET);

} catch (SignatureException $e) {
    // 處理異常
}

生成URL

<?php

use League\Glide\Urls\UrlBuilderFactory;

// 上面的那個秘鑰
$signkey='v-LK4WCdhcfcc%jt*VC2cj%nVpu+xQKvLUA%H86kRVk_4bgG8&CWM#k*b_7MUJpmTc=4GFmKFp7=K%67je-skxC5vz+r#xT?62tT?Aw%FtQ4Y3gvnwHTwqhxUh89wCa_';

// 實例化
$urlBuilder=UrlBuilderFactory::create('/img/', $signkey);

// 生成url
$url=$urlBuilder->getUrl('cat.jpg', ['w'=> 500]);

// 使用url
echo '<img src="'.$url.'">';

// 輸入預覽
<img src="/img/cat.jpg?w=500&s=af3dc18fc6bfb2afb521e587c348b904">

總結

只要簡單的幾行代碼，就實現了一套健全的圖片處理HTTP服務，當你有類似的需求的時候，抓緊用上吧。

原文標題：[league/glide]兩行代碼實現一套強大的圖片處理HTTP服務

原文地址：https://phpreturn.com/index/a64084605c3759.html

原文平臺：PHP武器庫

版權聲明：本文由phpreturn.com（PHP武器庫官網）原創(chuàng)和首發(fā)，所有權利歸phpreturn（PHP武器庫）所有，本站允許任何形式的轉載/引用文章，但必須同時注明出處。

者有話要說：此文是作者自己的學習總結，供大家參考，不足之處還請見諒和指正~

在學習完了基本的HTML+CSS標簽之后，就可以嘗試寫一些簡單的靜態(tài)網頁啦~練習的過程是充滿成就感的，值得反復體會和思考！

網頁結構

簡單提一下常用于表示網頁機構的標簽：

header 整個頁面的標題（也可表示一個內容區(qū)塊）

main 頁面主體部分

footer 整個頁面的腳注（也可表示一個內容區(qū)塊）

article 一塊與上下文無關的獨立內容

section 表示一個內容區(qū)塊，常嵌套于article中

aside 在article之外與其內容相關的輔助信息

nav 頁面中的導航欄

figure 表示一段獨立的流內容

三欄布局

一個網頁最少由header、main、footer三部分組成，那么從三欄布局開始練習吧。無論是上-中-下結構還是左-中-右結構，關鍵都在于設置中間部分的寬高或位置。我們知道網頁的主體內容（版心）是處于居中位置、隨網頁縮放而縮放的。那么左右（或上下）兩欄固定后，須使中間部分自適應。以下總結了幾種三欄布局的方法，以左-中-右結構為例：

先寫左中右三個盒子。

1.使用float

需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否則right盒子會跑到下一行右側）。以上代碼中，設置center盒子的左右外邊距來實現寬度自適應，若父盒子layout無高度要求，可用min-height實現高度自適應。不加高度自適應也可，在未設置center盒子高度的情況下本身高度會隨文本內容的擴充而自動增加。

2.使用position

三個盒子都分別使用絕對定位，left、right分別距離窗口左右端為0，center距離窗口左端的間距為left盒子的寬度，距離窗口右端的間距為right盒子的寬度。

3.使用flex

須給父盒子layout加上彈性盒屬性，給center盒子設置大于0的flex值，利用彈性盒自動拉伸效果實現center盒子的寬度自適應。

4.使用table

給父盒子layout設置為table，寬度為整個窗口，給三個子盒子都設置為table-cell，此時三個盒子就有了表格的屬性。固定left、right盒子的寬度，center盒子自動占滿父盒子剩余寬度。需要注意的是，因為父盒子具有表格屬性，當left、center、right三者中任意一個盒子高度改變時，其他兩個盒子會跟著改變。

5.使用grid

將父盒子layout設置為grid，寬度為整個窗口，用template-rows設置行高，用template-columns分別設置三個盒子的寬度，其中auto實現center盒子的寬度自適應。需要注意的是，這里用template-rows設置了固定的行高，因此center的高度不會自適應。

仿寫練習

適合初學者練習的網頁有很多，可以打開網址之家去里面挑一挑，以靜態(tài)頁面為主的網站。作者自己是以豆瓣首頁（局部）進行練習的。練習過程中，千萬不要去看網站源碼（此時你也有很多地方看不懂），先試著自己分析和思考，用所學的知識看看能做到哪一步。

放上對比圖，還是有很多不一樣的地方，網頁也沒有功能，作為初學者這都是正常的。靜態(tài)網頁練習的主要目的是熟悉HTML+CSS布局，培養(yǎng)做網頁的思維。具體細節(jié)隨著學習的深入，可以讓網頁更還原、頁面更精美，網頁功能也能逐步完善起來，實現真正的網站開發(fā)。