整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          圖解不同版本的HTTP協(xié)議

          大家好,我是蝸牛,今天我們聊聊HTTP協(xié)議,通過這篇文章我們能了解到不同版本HTTP優(yōu)缺點(diǎn)、他們之間的性能差異以及現(xiàn)在主流的HTTP協(xié)議用的那個版本

          HTTP/1.1 時代

          HTTP/1.1 對 HTTP/1.0 做了許多優(yōu)化,也是當(dāng)今使用得最多的 HTTP 協(xié)議:

          1. 持久化連接以支持連接重用
          2. 分塊傳輸編碼以支持流式響應(yīng)
          3. 請求管道以支持并行請求處理
          4. 字節(jié)服務(wù)以支持基于范圍的資源請求
          5. 改進(jìn)的更好的緩存機(jī)制

          持久連接

          在 HTTP/1.0 時代,每一個請求都會重新建立一個 TCP 連接,一旦響應(yīng)返回,就關(guān)閉連接。而建立一個連接,則需要進(jìn)行三次握手(https的話則是9次握手),這極大的浪費(fèi)了性能

          因此 HTTP/1.1 新增了「keep-alive」功能,當(dāng)瀏覽器建立一個 TCP 連接時,多個請求都會使用這條連接。(現(xiàn)如今大多數(shù)瀏覽器默認(rèn)都是開啟的)

          PipeLining 管道

          持久連接解決了連接復(fù)用問題,但還是存在著一個問題:在一個 TCP 連接中,同一時間只能夠發(fā)送一個請求,并且需要等響應(yīng)完成才能夠發(fā)送第二個請求。

          因此 HTTP/1.1 制訂了 PipeLining 管道,通過這個管道,瀏覽器的多個請求可以同時發(fā)到服務(wù)器,但是服務(wù)器的響應(yīng)只能夠一個接著一個的返回 ( 但各大瀏覽器有些不支持/默認(rèn)關(guān)閉,因此這功能可以說是雞肋)

          因?yàn)槊恳粭l連接同時只能夠返回一個響應(yīng),因此瀏覽器為了改善這種情況,會同時開啟4~8個 TCP 連接進(jìn)行發(fā)送請求。

          小結(jié)

          在 HTTP/1.1 時代主要增加了:

          1. keep-alive 選項(xiàng),建立連接后,在一定時間內(nèi)不會斷開,其他請求都可以使用這條連接。
          2. pipelining 管道,通過這個管道,瀏覽器的多個請求可以同時發(fā)到服務(wù)器,但是服務(wù)器的響應(yīng)只能夠一個接著一個的返回 ( 但各大瀏覽器有些不支持/默認(rèn)關(guān)閉,因此這功能可以說是雞肋)

          HTTP/1.1 時代的優(yōu)化

          1、連接和拼接

          連接或拼接JS和CSS文件,雪碧圖,以減少HTTP請求,同時瀏覽器可緩存這些靜態(tài)資源,為下次訪問節(jié)約時間。但是這樣帶來的副作用是,維護(hù)成本高,其中某一個小改動都會使得整個拼接后的文件發(fā)生改變,重新緩存。

          當(dāng)然并不是說無止境的拼接,建議大小為:30~50 KB

          2、域名分區(qū)

          由于瀏覽器的限制,同一個域名下最多只能建立6個連接(不同的瀏覽器限制不一樣)。我們通常使用子域名來減少所有資源在只有一個連接時的產(chǎn)生的排隊(duì)延遲。這個顯然不適用在HTTP2中,因?yàn)椴煌挠蛐枰⒉煌倪B接。

          3、資源內(nèi)嵌

          對于不常用的,較小大資源內(nèi)嵌在文檔中,比如base64的圖片,以減少HTTP請求,但是這樣的資源不能在瀏覽器中緩存,也不可能被其他頁面共享,同時還有可能編碼之后的資源變等更大了。在HTTP2中,這樣的資源就可以使用SERVER PUSH來推送。

          建議:

          1. 只考慮嵌入1~2 KB 以下的資源,因?yàn)樾∮谶@個標(biāo)準(zhǔn)的資源經(jīng)常會導(dǎo)致比它自身更高的HTTP 開銷
          2. 如果文件很小,而且只有個別頁面使用,可以考慮嵌入。理想情況下,最好是只用一次的資源
          3. 如果文件很小,但需要在多個頁面中重用,應(yīng)該考慮集中打包
          4. 如果小文件經(jīng)常需要更新,就不要嵌入了
          5. 通過減少 HTTP cookie的大小將協(xié)議開銷最小化

          SPDY 時代

          由于現(xiàn)代網(wǎng)頁的不斷豐富, HTTP/1.1 協(xié)議的性能也逐漸吃不消,因此2012年google(google就是牛逼)如一聲驚雷提出了SPDY的方案,實(shí)際上,HTTP/2.0 也是以 SPDY 作為原型進(jìn)行開發(fā)的。

          SPDY基礎(chǔ)功能

          多路復(fù)用(multiplexing)

          多路復(fù)用通過多個請求stream共享一個tcp連接的方式,解決了http1.x holb(head of line blocking)的問題,降低了延遲同時提高了帶寬的利用率。

          請求優(yōu)先級(request prioritization)

          多路復(fù)用帶來一個新的問題是,在連接共享的基礎(chǔ)之上有可能會導(dǎo)致關(guān)鍵請求被阻塞。SPDY允許給每個request設(shè)置優(yōu)先級,這樣重要的請求就會優(yōu)先得到響應(yīng)。比如瀏覽器加載首頁,首頁的html內(nèi)容應(yīng)該優(yōu)先展示,之后才是各種靜態(tài)資源文件,腳本文件等加載,這樣可以保證用戶能第一時間看到網(wǎng)頁內(nèi)容。

          header壓縮

          前面提到過幾次http1.x的header很多時候都是重復(fù)多余的。選擇合適的壓縮算法可以減小包的大小和數(shù)量。SPDY對header的壓縮率可以達(dá)到80%以上,低帶寬環(huán)境下效果很大。

          SPDY 現(xiàn)已經(jīng)被大多數(shù)瀏覽器以及 WEB 服務(wù)器所支持,但為了推進(jìn) HTTP/2.0, Google 已經(jīng)宣布在 2016年對其停止開發(fā)。

          HTTP/2.0 時代

          2015年5月, HTTP/2.0 在萬眾矚目下以RFC 7540正式發(fā)表。(熱烈鼓掌~啪啪啪啪~~)

          二進(jìn)制分幀

          在應(yīng)用層與傳輸層之間增加一個二進(jìn)制分幀層,以此達(dá)到“在不改動HTTP的語義,HTTP 方法、狀態(tài)碼、URI及首部字段的情況下,突破HTTP1.1的性能限制,改進(jìn)傳輸性能,實(shí)現(xiàn)低延遲和高吞吐量。”

          在二進(jìn)制分幀層上,HTTP2.0會將所有傳輸?shù)男畔⒎指顬楦〉南⒑蛶?并對它們采用二進(jìn)制格式的編碼,其中HTTP1.x的首部信息會被封裝到Headers幀,而我們的request body則封裝到Data幀里面。

          壓縮頭部

          HTTP/2.0規(guī)定了在客戶端和服務(wù)器端會使用并且維護(hù)「首部表」來跟蹤和存儲之前發(fā)送的鍵值對,對于相同的頭部,不必再通過請求發(fā)送,只需發(fā)送一次

          事實(shí)上,如果請求中不包含首部(例如對同一資源的輪詢請求),那么首部開銷就是零字節(jié)。此時所有首部都自動使用之前請求發(fā)送的首部。

          如果首部發(fā)生變化了,那么只需要發(fā)送變化了數(shù)據(jù)在Headers幀里面,新增或修改的首部幀會被追加到“首部表”。首部表在 HTTP2.0的連接存續(xù)期內(nèi)始終存在,由客戶端和服務(wù)器共同漸進(jìn)地更新。

          多路復(fù)用

          HTTP/2.0 時代擁有了「多路復(fù)用」功能,意思是: 在一條連接上,我可以同時發(fā)起無數(shù)個請求,并且響應(yīng)可以同時返回。

          這個連接可以承載任意數(shù)量的雙向數(shù)據(jù)流。在過去, HTTP 性能優(yōu)化的關(guān)鍵并不在于高帶寬,而是低延遲。TCP 連接會隨著時間進(jìn)行自我調(diào)節(jié),起初會限制連接的最大速度,如果數(shù)據(jù)成功傳輸,會隨著時間的推移提高傳輸?shù)乃俣取_@種調(diào)節(jié)則被稱為 TCP 慢啟動。由于這種原因,讓原本就具有突發(fā)性和短時性的 HTTP 連接變的十分低效。HTTP/2.0 通過讓所有數(shù)據(jù)流共用同一個連接,可以更有效地使用 TCP 連接,讓高帶寬也能真正的服務(wù)于 HTTP 的性能提升。

          這種單連接多資源的方式,減少服務(wù)端的連接壓力,內(nèi)存占用更少,連接吞吐量更大;而且由于 TCP 連接的減少而使網(wǎng)絡(luò)擁塞狀況得以改善,同時慢啟動時間的減少,使擁塞和丟包恢復(fù)速度更快。

          客戶端和服務(wù)器可以把HTTP消息分解為互不依賴的幀,然后亂序發(fā)送,最后再在另一端把它們重新組合起來。注意,同一鏈接上有多個不同方向的數(shù)據(jù)流在傳輸。客戶端可以一邊亂序發(fā)送stream,也可以一邊接收者服務(wù)器的響應(yīng),而服務(wù)器那端同理。

          也就是說,HTTP2.0通信都在一個連接上完成,這個連接可以承載任意數(shù)量的雙向數(shù)據(jù)流。

          注意,對一個域名,只需要開啟一條 TCP 連接,請求都在這條 TCP 連接上干活。

          因此在 HTTP/2.0 時代,之前的合并 JS、CSS 文件技巧,反而不適用了。

          請求優(yōu)先級

          既然所有資源都是并行發(fā)送,那么就需要「優(yōu)先級」的概念了,這樣就可以對重要的文件進(jìn)行先傳輸,加速頁面的渲染。

          服務(wù)器推送

          在 HTTP2.0中,服務(wù)器推送是指在客戶端請求之前發(fā)送數(shù)據(jù)的機(jī)制。如果一個請求是由你的主頁發(fā)起的,服務(wù)器很可能響應(yīng)主頁內(nèi)容、logo以及樣式表,因?yàn)樗揽蛻舳藭玫竭@些東西。這相當(dāng)于在一個 HTML 文檔內(nèi)集合了所有的資源,不過與之相比,服務(wù)器推送有一個很大的優(yōu)勢:可以緩存!

          強(qiáng)制 SSL

          雖然 HTTP/2.0 協(xié)議并沒聲明一定要用 SSL,但是 Google Chrome 等瀏覽器強(qiáng)制要求使用 HTTP/2.0 必須要用上 SSL, 也就是說必須要:https://

          http:// 將繼續(xù)使用 http/1.0

          對優(yōu)化的影響:

          1. 因?yàn)椤八械腍TTP2.0的請求都在一個TCP鏈接上”,“資源合并減少請求”,比如CSS Sprites,多個JS文件、CSS文件合并等手段沒有效果,或者說沒有必要。
          2. 因?yàn)椤岸嗦窂?fù)用”,采用“cdn1.cn,cdn2.cn,cdn3.cn,打開多個TCP會話,突破瀏覽器對同一域名的鏈接數(shù)的限制”的手段是沒有必要的。因?yàn)橐驗(yàn)橘Y源都是并行交錯發(fā)送,且沒有限制,不需要額外的多域名并行下載。
          3. 因?yàn)椤胺?wù)器推送”,內(nèi)嵌資源的優(yōu)化手段也變得沒有意義了。而且使用服務(wù)器推送的資源的方式更加高效,因?yàn)榭蛻舳诉€可以緩存起來,甚至可以由不同的頁面共享(依舊遵循同源策略)

          如何使用上 HTTP/2.0

          1. 需要瀏覽器的支持,目前最新版的 Chrome、Opera、 FireFox、 IE11、 edge 都已經(jīng)支持了

          2. 需要 WEB 服務(wù)器的支持,比如 Nginx , H20

          如果瀏覽器或服務(wù)器有一方不支持,那么會自動變成 Http/1.1

          HTTP/1.1 HTTP/2.0性能比較

          https://http2.akamai.com/demo 這是Akamai公司建立的一個官方演示,這個演示同時請求379張圖片,用于展示HTTP/1.1和HTTP/2的性能差距。不同的電腦配置、網(wǎng)絡(luò)情況以及服務(wù)器負(fù)載等情況不同,得到的結(jié)果肯定也不同,下圖是使用自己的電腦加載時間截圖:

          參考:

          https://linjunzhu.github.io/blog/2016/03/10/http2-zongjie/

          https://www.jianshu.com/p/52d86558ca57

          服務(wù)化基石之遠(yuǎn)程通信系列二:通信協(xié)議之應(yīng)用層

          JS中拼接html字符串,遇到的坑往往是由書寫格式引起的

          注意以下幾點(diǎn):

          1. 單雙引號需嵌套使用;
          2. 傳入 JSON 對象需要使用 JSON.stringify() 序列化為一個 JSON 字符串,并且更需要注意單雙引號嵌套問題。

          示例:

          let html = "";
          for(var i=0;i<data.length;i++){
           html += '<tr>'+
           '<td>'+ data[i].appName +'</td>'+
           '<td>'+ '<button type="button" onclick="edit('+JSON.stringify(data[i]).replace(/\"/g,"'")+')">按鈕1</button>'+'</td>'+
           '<td>'+ "<button type='button' onclick='del("+JSON.stringify(data[i])+")'>按鈕2</button>"+'</td>'+
           +'</tr>'
          }
          

          上述代碼中,使用了兩種不同的引號嵌套格式。按鈕1外層使用單引號,因此需要將JSON字符串中所有雙引號轉(zhuǎn)化成單引號,比較繁瑣。從語法角度考慮,JavaScript 字符串與 JSON 字符串的最大區(qū)別在于,JSON 字符串必須使用雙引號(單引號會導(dǎo)致語法錯誤),因此不推薦此寫法。

          推薦第二種寫法,直接在外層嵌套雙引號,無需進(jìn)行額外操作。

          現(xiàn)代網(wǎng)頁設(shè)計(jì)中,表格依然扮演著不可或缺的角色。無論是數(shù)據(jù)展示、報(bào)表制作還是復(fù)雜布局,合理運(yùn)用HTML中的<table>標(biāo)簽可以極大地提升網(wǎng)頁的信息結(jié)構(gòu)和用戶體驗(yàn)。本文將詳細(xì)解析HTML表格的高級技巧和創(chuàng)新應(yīng)用,幫助開發(fā)者和設(shè)計(jì)師精確掌握使用HTML表格的最佳實(shí)踐。

          1. HTML表格基礎(chǔ)

          1.1 表格結(jié)構(gòu)簡介

          HTML表格由<table>標(biāo)簽創(chuàng)建,基本結(jié)構(gòu)包括<thead>、<tbody>、<tfoot>和<tr>(表格行),以及<th>(表頭單元格)和<td>(表格單元格)。

          1.2 創(chuàng)建一個簡單的表格

          <table>
              <thead>
                  <tr>
                      <th>編號</th>
                      <th>姓名</th>
                      <th>年齡</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>1</td>
                      <td>張三</td>
                      <td>25</td>
                  </tr>
                  <tr>
                      <td>2</td>
                      <td>李四</td>
                      <td>30</td>
                  </tr>
              </tbody>
          </table>
          

          這個例子展示了一個包含標(biāo)題和兩行數(shù)據(jù)的基本表格。

          2. 樣式化表格

          2.1 使用CSS增強(qiáng)表格視覺

          為表格添加CSS樣式可以提升其視覺效果。例如,可以通過以下CSS代碼增加邊框、調(diào)整文字對齊方式,以及改善表格的顏色和間隔。

          table {
              width: 100%;
              border-collapse: collapse;
          }
          th, td {
              border: 1px solid #ddd;
              padding: 8px;
              text-align: left;
          }
          thead {
              background-color: #f2f2f2;
          }
          

          2.2 響應(yīng)式表格

          在移動設(shè)備上查看時,表格應(yīng)能自動調(diào)整以適應(yīng)不同的屏幕尺寸。可以使用CSS的媒體查詢來實(shí)現(xiàn)響應(yīng)式表格,或者利用JavaScript進(jìn)行更復(fù)雜的操作。

          3. 高級技巧和應(yīng)用

          3.1 合并單元格

          使用rowspan和colspan屬性可以合并行或列,創(chuàng)建跨多個行或列的單元格,這對于匯總信息特別有用。

          <tr>
              <td rowspan="2">合并行</td>
              <td>數(shù)據(jù)1</td>
              <td>數(shù)據(jù)2</td>
          </tr>
          <tr>
              <td>數(shù)據(jù)3</td>
              <td>數(shù)據(jù)4</td>
          </tr>
          

          3.2 交互式表格

          通過JavaScript和AJAX,可以實(shí)現(xiàn)表格的動態(tài)數(shù)據(jù)加載和更新,這對于需要實(shí)時數(shù)據(jù)顯示的應(yīng)用尤為重要。

          4. 結(jié)語

          掌握HTML表格的使用和優(yōu)化不僅能提升網(wǎng)頁的功能性和美觀,還能改善用戶的瀏覽體驗(yàn)。隨著技術(shù)的不斷進(jìn)步,我們預(yù)見表格在網(wǎng)頁設(shè)計(jì)中的應(yīng)用將更加靈活和強(qiáng)大。

          結(jié)尾部分:
          希望本文能為你在使用HTML表格時提供新的視角和方法。記得實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn),不斷嘗試和優(yōu)化,是每個網(wǎng)頁設(shè)計(jì)師和開發(fā)者成長的必經(jīng)之路。


          主站蜘蛛池模板: 国产综合无码一区二区三区| 亚洲av高清在线观看一区二区 | 亚洲av无码成人影院一区| 精品国产一区二区三区无码| 亚洲.国产.欧美一区二区三区| 午夜天堂一区人妻| 99久久人妻精品免费一区| 免费无码一区二区| 亚洲熟妇AV一区二区三区浪潮| 中文字幕一区二区免费| 国产一区二区三区在线看片 | 最新中文字幕一区二区乱码| 91香蕉福利一区二区三区| 国产精品免费综合一区视频| 99精品国产高清一区二区麻豆 | 一区国产传媒国产精品| 天堂资源中文最新版在线一区| 三上悠亚日韩精品一区在线| 一区二区三区四区在线观看视频| 天天躁日日躁狠狠躁一区| 日本福利一区二区| 国产在线观看一区二区三区四区| 久久蜜桃精品一区二区三区| 成人免费一区二区三区在线观看| 亚洲色一区二区三区四区| 免费高清av一区二区三区| 国产在线第一区二区三区| 国产成人无码精品一区不卡| 国产一区二区三区不卡在线观看 | 精品视频一区二区三区在线播放| 性色av闺蜜一区二区三区| 日本一区中文字幕日本一二三区视频| 国产乱码一区二区三区四| 中文精品一区二区三区四区| 亚洲熟妇无码一区二区三区导航| 久久久久久人妻一区二区三区| 天天躁日日躁狠狠躁一区| 亚洲免费一区二区| 久久精品国产一区二区三| 亚洲国产成人久久综合一区| 日韩欧美一区二区三区免费观看|