筆者所在專案使用的前端技術比較老舊,在開發的過程中需要先啟動乙個後端專案 (tomcat + mysql + redis) 來做為靜態伺服器
然後使用的是乙個公司內部的類amd模組載入工具,每次重新整理頁面都要載入1000+ 的檔案,頁面的響應時間接近20s, 導致開發的過程非常痛苦
所以決定使用 http/2 來開發乙個開發伺服器來加快頁面的載入速度. 目前來說效果不錯,相對於 http1.1 來說載入速度提公升了 50%。
對於開發環境與我們類似的專案,可以嘗試一下。
當所需要的檔案數量很多時,我們每次只能請求一定數量的檔案,當前面的檔案的請求完成後才能去請求下乙個檔案,這就造成了堵塞。
從圖中我們可以看到明顯的鏈結限制和堵塞
而 http/2 可以在同一連線上進行多個併發交換,可以避免出現因為瀏覽器的併發限制而造成的堵塞
http/2 通過支援標頭字段壓縮和在同一連線上進行多個併發交換,讓應用更有效地利用網路資源,減少感知的延遲時間。具體來說,它可以對同一連線上的請求和響應訊息進行交錯傳送並為 http 標頭字段使用有效編碼。 http/2 還允許為請求設定優先順序,讓更重要的請求更快速地完成,從而進一步提公升效能。出台的協議對網路更加友好,因為與 http/1.x 相比,可以使用更少的 tcp 連線。 這意味著與其他流的競爭減小,並且連線的持續時間變長,這些特性反過來提高了可用網路容量的利用率。 最後,http/2 還可以通過使用二進位制訊息分幀對訊息進行更高效的處理。(超文字傳輸協議版本 2,草案 17) -http/2 中最令人期待的特性就是 sever push (伺服器推送)。
通過 server push,伺服器可以對瀏覽器的單個請求返回多個響應,而不需要等待瀏覽器發出請求再給去響應。
簡單舉個?
瀏覽器向伺服器傳送 a.com 請求
伺服器確定這個請求返回乙個 index.html 檔案,同時發現這個檔案需要 style.css 和 script.js 檔案
伺服器向瀏覽器放回 index.html 的響應,同時告訴瀏覽器我這裡有 style.css 和 script.js 檔案你可能需要
瀏覽器收到 index.html 後,解析後發現需要 style.css 和 script.js,正好伺服器端說可以推送這兩個資源,瀏覽器就不需要再次傳送請求去獲取,而是直接就收伺服器的推送
結合上面的連線復用,http/2 可以極大的加快資源檔案的載入速度
可以看到瀏覽器使用乙個鏈結載入完了所有的資源檔案
這裡先簡單介紹下 node 中 http/2 的使用,下篇文章將詳細闡述如何編寫乙個可以應用的 http/2 開發伺服器由於 http/2 需要使用 https,這裡我們需要先生成乙個證書。
openssl req -x509 -newkey rsa:2048 -nodes -sha256 -subj '/cn=localhost' \
-keyout localhost-privkey.pem -out localhost-cert.pem
.
├── certificate
│ ├── localhost-cert.pem
│ └── localhost-privkey.pem
├── node_modules
├── package-lock.json
├── package.json
├── src
└── www
├── index.html
├── script.js
└── styles.css
// www/script.js
const content = document.queryselector("#content");
content.innerhtml = ``;
/* www/styles.css */
h1
建立如上的專案結構
開啟控制台,進入 network ,開啟 protocol 顯示
訪問 https://localhost:8443/ ,即可看到協議變為h2
// 獲取 http2 header 常量
// 獲取靜態目錄下的所有檔案資訊
function createfileinfomap() ;
filelist.foreach(file => ;
fileinfomap.set(`/$`, );
});return fileinfomap;
}// 定義靜態目錄
const staticpath = path.resolve(__dirname, "../www");
const fileinfomap = createfileinfomap();
// 將傳入的檔案推送到瀏覽器
// 根據請求路徑獲取對應的檔案資訊
const fileinfo = fileinfomap.get(requestpath);
if (!fileinfo) );
stream.end("not found");
} // 訪問首頁時同時推送其他檔案資源
if (requestpath === "/index.html")
} // 推送首頁資料
stream.respondwithfd(fileinfo.fd, );
});server.listen(8443);
訪問 https://localhost:8443 就可以看到 styles.css 和 script.js 是通過 http/2 推送過來的
http/2 簡介 | web | google developers
http/2 server push 詳解(上) | alloyteam
http/2 server push 詳解(下) | alloyteam
使用C REST SDK開發HTTP伺服器
做windows開發的大家可能都已經知道了微軟開源的 c rest sdk。對於這個sdk的簡介我就不多提了,度娘上很多。根據這個名字,大家應該就知道,這個sdk主要是給客戶端開發的,網上也有很多客戶端開發實用的例子。然而對於伺服器的開發,網上的資料卻少之又少。下面我們著重來介紹下使用c rest ...
使用C 開發HTTP伺服器之支援HTTPS
https,即hyper text transfer protocol over secure socket layer的簡稱,是指以安全為目標的http協議。我們可以將其理解為在http協議的基礎上增加了安全機制,這裡的安全機制是指ssl,簡單來講https協議依然採用http協議,不過它在htt...
centos7上搭建http伺服器
檢視一下系統版本 rpm q centos releasecentos release 7 6.1810.2.el7.centos.x86 64 sudo yum install httpdapache 的所有配置檔案都位於 etc httpd conf 和 etc httpd conf.d,的資料...