大家好,我是蝸牛,今天我們聊聊HTTP協(xié)議,通過這篇文章我們能了解到不同版本HTTP優(yōu)缺點(diǎn)、他們之間的性能差異以及現(xiàn)在主流的HTTP協(xié)議用的那個版本
HTTP/1.1 對 HTTP/1.0 做了許多優(yōu)化,也是當(dāng)今使用得最多的 HTTP 協(xié)議:
在 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)都是開啟的)
持久連接解決了連接復(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ā)送請求。
在 HTTP/1.1 時代主要增加了:
連接或拼接JS和CSS文件,雪碧圖,以減少HTTP請求,同時瀏覽器可緩存這些靜態(tài)資源,為下次訪問節(jié)約時間。但是這樣帶來的副作用是,維護(hù)成本高,其中某一個小改動都會使得整個拼接后的文件發(fā)生改變,重新緩存。
當(dāng)然并不是說無止境的拼接,建議大小為:30~50 KB
由于瀏覽器的限制,同一個域名下最多只能建立6個連接(不同的瀏覽器限制不一樣)。我們通常使用子域名來減少所有資源在只有一個連接時的產(chǎn)生的排隊(duì)延遲。這個顯然不適用在HTTP2中,因?yàn)椴煌挠蛐枰⒉煌倪B接。
對于不常用的,較小大資源內(nèi)嵌在文檔中,比如base64的圖片,以減少HTTP請求,但是這樣的資源不能在瀏覽器中緩存,也不可能被其他頁面共享,同時還有可能編碼之后的資源變等更大了。在HTTP2中,這樣的資源就可以使用SERVER PUSH來推送。
建議:
由于現(xiàn)代網(wǎng)頁的不斷豐富, HTTP/1.1 協(xié)議的性能也逐漸吃不消,因此2012年google(google就是牛逼)如一聲驚雷提出了SPDY的方案,實(shí)際上,HTTP/2.0 也是以 SPDY 作為原型進(jìn)行開發(fā)的。
多路復(fù)用通過多個請求stream共享一個tcp連接的方式,解決了http1.x holb(head of line blocking)的問題,降低了延遲同時提高了帶寬的利用率。
多路復(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)容。
前面提到過幾次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ā)。
2015年5月, HTTP/2.0 在萬眾矚目下以RFC 7540正式發(fā)表。(熱烈鼓掌~啪啪啪啪~~)
在應(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)地更新。
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 文件技巧,反而不適用了。
既然所有資源都是并行發(fā)送,那么就需要「優(yōu)先級」的概念了,這樣就可以對重要的文件進(jìn)行先傳輸,加速頁面的渲染。
在 HTTP2.0中,服務(wù)器推送是指在客戶端請求之前發(fā)送數(shù)據(jù)的機(jī)制。如果一個請求是由你的主頁發(fā)起的,服務(wù)器很可能響應(yīng)主頁內(nèi)容、logo以及樣式表,因?yàn)樗揽蛻舳藭玫竭@些東西。這相當(dāng)于在一個 HTML 文檔內(nèi)集合了所有的資源,不過與之相比,服務(wù)器推送有一個很大的優(yōu)勢:可以緩存!
雖然 HTTP/2.0 協(xié)議并沒聲明一定要用 SSL,但是 Google Chrome 等瀏覽器強(qiáng)制要求使用 HTTP/2.0 必須要用上 SSL, 也就是說必須要:https://
http:// 將繼續(xù)使用 http/1.0
1. 需要瀏覽器的支持,目前最新版的 Chrome、Opera、 FireFox、 IE11、 edge 都已經(jīng)支持了
2. 需要 WEB 服務(wù)器的支持,比如 Nginx , H20
如果瀏覽器或服務(wù)器有一方不支持,那么會自動變成 Http/1.1
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)用層
注意以下幾點(diǎn):
示例:
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í)踐。
HTML表格由<table>標(biāo)簽創(chuàng)建,基本結(jié)構(gòu)包括<thead>、<tbody>、<tfoot>和<tr>(表格行),以及<th>(表頭單元格)和<td>(表格單元格)。
<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ù)的基本表格。
為表格添加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;
}
在移動設(shè)備上查看時,表格應(yīng)能自動調(diào)整以適應(yīng)不同的屏幕尺寸。可以使用CSS的媒體查詢來實(shí)現(xiàn)響應(yīng)式表格,或者利用JavaScript進(jìn)行更復(fù)雜的操作。
使用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>
通過JavaScript和AJAX,可以實(shí)現(xiàn)表格的動態(tài)數(shù)據(jù)加載和更新,這對于需要實(shí)時數(shù)據(jù)顯示的應(yīng)用尤為重要。
掌握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)之路。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。