言

大家好，我是蝸牛，今天我們聊聊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)用層

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

現(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)之路。