整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          計算機網絡的知識點(上)

          計算機網絡的知識點(上)

          .比較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個參數,幾乎可以涵蓋所有的場景需求。

          名稱

          功能參數

          介紹

          方向

          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等

          功能介紹

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

          尺寸效果 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三部分組成,那么從三欄布局開始練習吧。無論是上-中-下結構還是左-中-右結構,關鍵都在于設置中間部分的寬高或位置。我們知道網頁的主體內容(版心)是處于居中位置、隨網頁縮放而縮放的。那么左右(或上下)兩欄固定后,須使中間部分自適應。以下總結了幾種三欄布局的方法,以左-中-右結構為例:

          先寫左中右三個盒子。

          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ā)。


          主站蜘蛛池模板: 成人精品视频一区二区三区| 无码丰满熟妇浪潮一区二区AV| 精品国产一区二区三区在线| 中文国产成人精品久久一区| 日韩在线视频一区| 中文字幕精品一区二区三区视频| 丰满岳妇乱一区二区三区| 奇米精品一区二区三区在| 不卡无码人妻一区三区音频| 天堂va视频一区二区| 亚洲精品日韩一区二区小说| 中文字幕在线精品视频入口一区| 国产成人亚洲综合一区| 精品国产一区二区三区香蕉| 日韩三级一区二区| AV天堂午夜精品一区| 人妻夜夜爽天天爽爽一区| 一本一道波多野结衣AV一区| 亚洲熟女一区二区三区| 久久精品免费一区二区三区| 亚洲国产精品一区二区九九| 动漫精品专区一区二区三区不卡| 亚洲高清日韩精品第一区| 中文字幕亚洲综合精品一区| 日本一区二区在线播放| 久久久久人妻一区二区三区| 国产精品区一区二区三在线播放 | 波多野结衣一区二区免费视频| 国产乱码精品一区二区三区香蕉| 国产第一区二区三区在线观看| 亚洲av午夜福利精品一区人妖| 国产精品无码亚洲一区二区三区| 久久精品国产一区| 成人精品一区二区激情| 国产精品日本一区二区在线播放 | 亚洲码一区二区三区| 亚洲第一区精品观看| 国产乱码精品一区二区三区香蕉 | 久久99精品免费一区二区| 亚洲AV日韩综合一区| 一区二区免费视频|