http0.9流程:
客戶端,構建請求,通過DNS查詢IP地址,三次握手建立TCP連接,客戶端發(fā)起請求,服務器響應,四次揮手,斷開TCP連接。(與服務器只有一個來回)
http1.0流程:
客戶端,構建請求,通過DNS查詢IP地址,三次握手建立TCP連接,客戶端發(fā)起請求,服務器響應,四次揮手,斷開TCP連接。(與服務器有兩個來回)
因為不足缺陷,就有了http1.1。
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ù)解析渲染,直到結束。
第一種GET方法:發(fā)送一個請求來獲取服務器上的某一些資源。
第二種POST方法:向URL指定的資源提交數據或附加新的數據。
第三種PUT方法:跟POST方法一樣,可以向服務器提交數據,但是它們之間也所有不同,PUT指定了資源在服務器的位置,而POST沒有哦。
第四種HEAD方法:指請求頁面的首部。
第五種DELETE方法:刪除服務器上的某資源。
第六種OPTIONS方法:它用于獲取當前URL所支持的方法,如果請求成功,在Allow的頭包含類似GET,POST等的信息。
第七種TARCE方法:用于激發(fā)一個遠程的,應用層的請求消息回路。
第八種CONNECT方法:把請求連接轉換到TCP/TP通道。
簡單說說,瀏覽器根據請求的url交給dns域名解析,查找真正的ip地址,向服務器發(fā)起請求;服務器交給后臺處理后,返回數據,瀏覽器會接收到文件數據,比如,html,js,css,圖像等;然后瀏覽器會對加載到的資源進行語法解析,建立相應的內部數據結構;載入解析到的資源文件,渲染頁面,完成顯示頁面效果。
不夠清楚明白碼?
那就再次詳細一下,咳咳,從瀏覽器接收url,開始進行網絡請求線程,發(fā)出一個完整的HTTP請求,從服務器端接收請求到對應的后臺接收到請求,然后是后臺和前臺的http交互;其中的緩存問題(http的緩存),瀏覽器接收到http數據包后的解析流程,css的可視化格式模型,js引擎解析過程等;其他呈現頁面效果。
:這里就需要你對瀏覽器內核的理解:其中主要的渲染引擎和JS引擎,這里了解一下你對瀏覽器內核的理解。
瀏覽器的內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。其實最開始渲染引擎和JS引擎是沒有區(qū)分明確的,不過后來JS引擎越來越獨立,so,內核就傾向于渲染引擎。
對于資源請求/獲取,資源響應/頁面渲染,會給網絡帶寬和設備資源帶來壓力,這個時候就會考慮到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會造成額外的往返傳輸)
除了網絡,還有頁面內容本身或服務器性能,如首字節(jié)時間TTFB,內容下載時間,開始渲染時間,文檔加載完成的時間等。
那么什么是TTFB,它是指客戶端從開始定位到web頁面,直接收到主體頁面響應的第一字節(jié)所耗費的時間。它是測量:從瀏覽器發(fā)起請求至收到其第一字節(jié)之間的耗時。
內容下載時間是等同于被請求資源的最后字節(jié)到達時間。
開始渲染時間,從客戶看到空白頁面的時長。
優(yōu)化技術:
對于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ā)包數上限),這時候連接進入擁塞避免階段,這種機制需要往返幾次才能得知最佳擁塞窗口大小,但往返幾次所需的時間成本不可忽略。
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)問題。
數據壓縮,在瀏覽器中發(fā)送請求時會帶著Content-Encoding: gzip,里面時瀏覽器支持的壓縮格式列表,有多種如,gzip,deflate,br等。這樣服務器就可以從中選擇一個壓縮算法,放進Content-Encoding響應頭里,再把原數據壓縮后發(fā)給瀏覽器。
分塊傳輸,就是將傳輸的文件分解成多個小塊,然后分發(fā)給瀏覽器,瀏覽器收到后再重新組裝復原。
每個分開包含兩個部分,分塊長度和分塊數據(長度頭和數據塊),長度頭以CRLF結尾的一行明文,數據塊緊跟在長度頭后面,也是用CRLF結尾,最后用一個長度為0的塊表示結束。
在響應報文里用頭字段Transfer-Encoding:chunked表示報文里的body部分不是一次性發(fā)送過來的,而是分成了許多塊逐個發(fā)送的。
在Transfer-Encoding:chunked和Content-Length中,這兩個字段是互斥的。
一個響應報文的傳輸長度要么已知,要么長度未知(chunked)。
Content-Length: 299
斷點續(xù)傳
要實現該功能需要制定下載的實體范圍,這種制定范圍發(fā)送請求叫做范圍請求。
Accept-Ranges:服務器使用http響應頭Accept-Ranges標識自身支持范圍請求,字段的具體值用于定義范圍請求的單位。
語法
Accept-Ranges: bytes,范圍請求的單位是 bytes (字節(jié))
Accept-Ranges: none,不支持任何范圍請求單位
范圍請求時用于不需要全部數據,只需要其中的部分請求時,可以使用范圍請求,允許客戶端在請求頭里使用專用字段來表示只獲取文件的一部分。
Range的格式,請求頭Range是HTTP范圍請求的專用字段,格式是“bytes=x-y”,以字節(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
多端數據,就是在Range頭里使用多個“x-y",一次性獲取多個片段數據。使用一種特殊的MIME類型:“multipart/byteranges”,用來表示響應報文包含了多個范圍時使用。多種范圍請求 響應會在頭部 Content-Type 表明 multipart-byteranges。
多段數據圖:分隔標記boundary來區(qū)分不同的分段
存儲的大小
cookie的數據大小不能超過4k;sessionStorage和localStorage雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或者更大。
有限期時間
因為CDN緩存更方便;突破瀏覽器并發(fā)限制;節(jié)約cookie帶寬;節(jié)約主域名得連接數,優(yōu)化頁面響應速度;防止不必要得安全性問題。
http2是超文本傳輸協(xié)議的第二版,相比http1協(xié)議的文本傳輸格式,http2是以二進制的格式進行數據傳輸的,具有更小的傳輸體積以及負載。
http2.0分層,分幀層(http2多路復用能力的核心部分),數據或http層(包含傳統(tǒng)上被認為是 HTTP 及其關聯(lián)數據的部分)。
HTTP2.0:
HTTP/2較HTTP/1.1優(yōu)化亮點
多路復用的實現:
在單個域名下仍可以建立一個TCP管道,使用一個TCP長連接,下載整個資源頁面,只需要一次慢啟動,并且避免了靜態(tài),瀏覽器發(fā)起請求,分幀層會對每個請求進行分割,將同一個請求的分割塊打上相同的id編號,然后通過協(xié)議棧將所有的分割體發(fā)送給服務器,然后通過服務器的分幀層根據id編號進行請求組裝,服務器的分幀層將回應數據分割按同一個回應體進行ID分割回應給客戶端,客戶端拼裝回應。
對于http2中的幀(frame),http1不是基于幀(frame)的,是文本分隔的。
GET/HTTP/1.1 <crlf>
這樣,對于http1的請求或者是響應可能有的問題:
HTTP/1 的請求和響應報文,是由起始行、首部和正文組成,換行符分隔;HTTP/2是將請求和響應數據分割成更小的幀,采用二進制編碼,易于解析的。
參考圖片:
幀結構總結 所有的幀都包含一個9 byte的幀頭 + 可邊長的正文不同。根據幀的類型不同,正文部分的結構也不一樣。
幀頭:
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)先級策略。
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消息示例:
IP 的基本思路
Ip地址的表示方法
IP地址的結構-子網掩碼表示網絡號與主機號之間的邊界。
解析器的調用方法
DNS服務器的基本工作
DNS 服務器之間的查詢操作
數據通過類似管道的結構來流動
們經常使用第三方的對象存儲服務,比如七牛云或阿里云,他們都提供了“智能媒體服務”,其實就是在鏈接上加上各種參數,實現圖片的裁剪、縮放等,可以便捷的實現縮略圖,節(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個參數,幾乎可以涵蓋所有的場景需求。
名稱 | 功能參數 | 介紹 |
方向 | or | 旋轉圖像,支持0, 90, 180或者 270,同時支持auto,會根據圖片的Exif 信息自動確定位置 |
翻轉 | flip | 翻轉圖像,支持水平、垂直、圓心等 |
裁剪 | crop | 將圖像裁剪到指定尺寸,支持居中、左上角、居左等10多個設置 |
寬度 | w | 設置圖像的寬度,根據fit參數表現不同 |
高度 | h | 設置圖像的高度,根據fit參數表現不同 |
尺寸效果 | fit | 設置圖像如何適應新的尺寸,顯示最大寬度、最小寬度、變形、裁剪等等6中效果 |
設備像素比 | dpr | 通過此參數可以生成不同像素比的圖片,在蘋果和安卓設備中有更好的表現,最大8 |
亮度 | bri | 調整圖像亮度 |
對比度 | con | 調整圖像對比度 |
伽馬 | gam | 調整圖像伽馬值值 |
銳化 | sharp | 銳化圖像 |
模糊 | blur | 為圖像增加模糊效果 |
像素化 | pixel | 為圖像增加像素化效果 |
濾鏡 | filt | 能夠指定使用那些濾鏡處理圖像,內置灰度和褐色,可以自定義。 |
水印路徑 | mark | 給圖像增加水印 |
水印寬度 | markw | 設置水印的寬度 |
水印高度 | markh | 設置水印的高度 |
水印偏移量X | markx | 水印的X偏移量 |
水印偏移量Y | marky | 水印的Y偏移量 |
水印的填充 | markpad | 水印的填充,padding |
水印的定位 | markpos | 水印的位置,居左、居中等 |
水印的透明度 | markalpha | 設置水印的透明度 |
背景 | bg | 設置圖片的背景色 |
邊框 | border | 給圖片增加邊框 |
質量 | q | 設置輸入的質量 |
格式 | fm | 設置圖像的編碼格式,jpg、png等 |
本文對幾個重點的功能做個介紹。
設置圖像如何適應新的尺寸。
支持的參數:
當尺寸效果設置為裁剪時,可以使用裁剪參數。
裁剪位置:
您還可以通過添加裁剪位置來設置裁剪圖像的位置。 接受 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,
);
可以通過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) {
// 處理異常
}
<?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三部分組成,那么從三欄布局開始練習吧。無論是上-中-下結構還是左-中-右結構,關鍵都在于設置中間部分的寬高或位置。我們知道網頁的主體內容(版心)是處于居中位置、隨網頁縮放而縮放的。那么左右(或上下)兩欄固定后,須使中間部分自適應。以下總結了幾種三欄布局的方法,以左-中-右結構為例:
先寫左中右三個盒子。
body部分
1.使用float
利用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ā)。
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。