圖解不同版本的HTTP協議

言

大家好，我是蝸牛，今天我們聊聊HTTP協議，通過這篇文章我們能了解到不同版本HTTP優缺點、他們之間的性能差異以及現在主流的HTTP協議用的那個版本

HTTP/1.1 時代

HTTP/1.1 對 HTTP/1.0 做了許多優化，也是當今使用得最多的 HTTP 協議：

持久化連接以支持連接重用
分塊傳輸編碼以支持流式響應
請求管道以支持并行請求處理
字節服務以支持基于范圍的資源請求
改進的更好的緩存機制

持久連接

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

因此 HTTP/1.1 新增了「keep-alive」功能，當瀏覽器建立一個 TCP 連接時，多個請求都會使用這條連接。（現如今大多數瀏覽器默認都是開啟的)

PipeLining 管道

持久連接解決了連接復用問題，但還是存在著一個問題：在一個 TCP 連接中，同一時間只能夠發送一個請求，并且需要等響應完成才能夠發送第二個請求。

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

因為每一條連接同時只能夠返回一個響應，因此瀏覽器為了改善這種情況，會同時開啟4~8個 TCP 連接進行發送請求。

小結

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

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

HTTP/1.1 時代的優化

1、連接和拼接

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

當然并不是說無止境的拼接，建議大小為：30~50 KB

2、域名分區

由于瀏覽器的限制，同一個域名下最多只能建立6個連接（不同的瀏覽器限制不一樣）。我們通常使用子域名來減少所有資源在只有一個連接時的產生的排隊延遲。這個顯然不適用在HTTP2中，因為不同的域需要建立不同的連接。

3、資源內嵌

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

建議:

只考慮嵌入1~2 KB 以下的資源，因為小于這個標準的資源經常會導致比它自身更高的HTTP 開銷
如果文件很小，而且只有個別頁面使用，可以考慮嵌入。理想情況下，最好是只用一次的資源
如果文件很小，但需要在多個頁面中重用，應該考慮集中打包
如果小文件經常需要更新，就不要嵌入了
通過減少 HTTP cookie的大小將協議開銷最小化

SPDY 時代

由于現代網頁的不斷豐富， HTTP/1.1 協議的性能也逐漸吃不消，因此2012年google（google就是牛逼）如一聲驚雷提出了SPDY的方案，實際上，HTTP/2.0 也是以 SPDY 作為原型進行開發的。

SPDY基礎功能

多路復用（multiplexing)

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

請求優先級（request prioritization)

多路復用帶來一個新的問題是，在連接共享的基礎之上有可能會導致關鍵請求被阻塞。SPDY允許給每個request設置優先級，這樣重要的請求就會優先得到響應。比如瀏覽器加載首頁，首頁的html內容應該優先展示，之后才是各種靜態資源文件，腳本文件等加載，這樣可以保證用戶能第一時間看到網頁內容。

header壓縮

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

SPDY 現已經被大多數瀏覽器以及 WEB 服務器所支持，但為了推進 HTTP/2.0, Google 已經宣布在 2016年對其停止開發。

HTTP/2.0 時代

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

二進制分幀

在應用層與傳輸層之間增加一個二進制分幀層，以此達到“在不改動HTTP的語義，HTTP 方法、狀態碼、URI及首部字段的情況下，突破HTTP1.1的性能限制，改進傳輸性能，實現低延遲和高吞吐量。”

在二進制分幀層上，HTTP2.0會將所有傳輸的信息分割為更小的消息和幀,并對它們采用二進制格式的編碼，其中HTTP1.x的首部信息會被封裝到Headers幀，而我們的request body則封裝到Data幀里面。

壓縮頭部

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

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

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

多路復用

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

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

這種單連接多資源的方式，減少服務端的連接壓力,內存占用更少,連接吞吐量更大；而且由于 TCP 連接的減少而使網絡擁塞狀況得以改善，同時慢啟動時間的減少,使擁塞和丟包恢復速度更快。

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

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

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

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

請求優先級

既然所有資源都是并行發送，那么就需要「優先級」的概念了，這樣就可以對重要的文件進行先傳輸，加速頁面的渲染。

服務器推送

在 HTTP2.0中，服務器推送是指在客戶端請求之前發送數據的機制。如果一個請求是由你的主頁發起的，服務器很可能響應主頁內容、logo以及樣式表，因為它知道客戶端會用到這些東西。這相當于在一個 HTML 文檔內集合了所有的資源，不過與之相比，服務器推送有一個很大的優勢：可以緩存！

強制 SSL

雖然 HTTP/2.0 協議并沒聲明一定要用 SSL，但是 Google Chrome 等瀏覽器強制要求使用 HTTP/2.0 必須要用上 SSL，也就是說必須要：https://

http:// 將繼續使用 http/1.0

對優化的影響：

因為“所有的HTTP2.0的請求都在一個TCP鏈接上”，“資源合并減少請求”，比如CSS Sprites,多個JS文件、CSS文件合并等手段沒有效果，或者說沒有必要。
因為“多路復用”，采用“cdn1.cn,cdn2.cn,cdn3.cn，打開多個TCP會話，突破瀏覽器對同一域名的鏈接數的限制”的手段是沒有必要的。因為因為資源都是并行交錯發送，且沒有限制，不需要額外的多域名并行下載。
因為“服務器推送”，內嵌資源的優化手段也變得沒有意義了。而且使用服務器推送的資源的方式更加高效，因為客戶端還可以緩存起來，甚至可以由不同的頁面共享（依舊遵循同源策略）

如何使用上 HTTP/2.0

1. 需要瀏覽器的支持，目前最新版的 Chrome、Opera、 FireFox、 IE11、 edge 都已經支持了

2. 需要 WEB 服務器的支持，比如 Nginx , H20

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

HTTP/1.1 HTTP/2.0性能比較

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

參考：

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

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

服務化基石之遠程通信系列二：通信協議之應用層

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

注意以下幾點：

單雙引號需嵌套使用；
傳入 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字符串中所有雙引號轉化成單引號，比較繁瑣。從語法角度考慮，JavaScript 字符串與 JSON 字符串的最大區別在于，JSON 字符串必須使用雙引號（單引號會導致語法錯誤），因此不推薦此寫法。

推薦第二種寫法，直接在外層嵌套雙引號，無需進行額外操作。

現代網頁設計中，表格依然扮演著不可或缺的角色。無論是數據展示、報表制作還是復雜布局，合理運用HTML中的<table>標簽可以極大地提升網頁的信息結構和用戶體驗。本文將詳細解析HTML表格的高級技巧和創新應用，幫助開發者和設計師精確掌握使用HTML表格的最佳實踐。

1. HTML表格基礎

1.1 表格結構簡介

HTML表格由<table>標簽創建，基本結構包括<thead>、<tbody>、<tfoot>和<tr>（表格行），以及<th>（表頭單元格）和<td>（表格單元格）。

1.2 創建一個簡單的表格

<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>

這個例子展示了一個包含標題和兩行數據的基本表格。

2. 樣式化表格

2.1 使用CSS增強表格視覺

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

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

2.2 響應式表格

在移動設備上查看時，表格應能自動調整以適應不同的屏幕尺寸。可以使用CSS的媒體查詢來實現響應式表格，或者利用JavaScript進行更復雜的操作。

3. 高級技巧和應用

3.1 合并單元格

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

<tr>
    <td rowspan="2">合并行</td>
    <td>數據1</td>
    <td>數據2</td>
</tr>
<tr>
    <td>數據3</td>
    <td>數據4</td>
</tr>

3.2 交互式表格

通過JavaScript和AJAX，可以實現表格的動態數據加載和更新，這對于需要實時數據顯示的應用尤為重要。

4. 結語

掌握HTML表格的使用和優化不僅能提升網頁的功能性和美觀，還能改善用戶的瀏覽體驗。隨著技術的不斷進步，我們預見表格在網頁設計中的應用將更加靈活和強大。

結尾部分：
希望本文能為你在使用HTML表格時提供新的視角和方法。記得實踐是檢驗真理的唯一標準，不斷嘗試和優化，是每個網頁設計師和開發者成長的必經之路。

在線咨詢

上一篇：我自定義的攔截器為什么會靠后執行？
下一篇：HTML基礎教程：使用表格的布局

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商