前端工程師應該對 HTTP 了解到什麼程度？從哪些途徑去熟悉更好？

12-18

在工作中發現自己對 http 概念太模糊, 對細節不了解, 導致在問題方向上出錯. 但是發現 http 這個好深, 所以問下大家, 前端工程師應該熟悉哪些(至少應該懂哪些). 最近與 CDN 打交道, 裡面也涉及到類似知識. 感覺更複雜了

我個人認為如果前端工程師想走技術路線的話（也就是長遠目標是資深前端工程師和架構師），那必須充分了解 HTTP。

作為一位熟練的前端工程師，至少應該能在調試 HTTP 時毫無障礙。你要輕鬆看明白捕獲回來的 HTTP 請求，並且知道是不是其中某個地方有問題導致出現你想要修復的 bug，如何處理能夠最終修復這個 bug。常見的問題包括，某些必要的 header 欄位沒有設置，或者設置得不正確，還有就是編碼方式不正確。可以說調試往往是前端工程師接觸到 HTTP 最多的地方。

如果你已經開始做前後端交互 API 的設計工組，要考慮是不是把 API 設計為符合 REST，這時候你必須非常熟悉 HTTP 協議。各種狀態碼和 header 欄位分別是用來幹什麼的，你都需要很清楚，絕對不能重複發明輪子。同時還要考慮如何傳輸數據更佳高效，這時候你就要設計合理的 cache 規則。

總之，HTTP 往往是前端工程師最容易忽略掉的一塊。很多人覺得前端就是 HTML、CSS、JavaScript。對比起演算法和數據結構來說，前端忽略 HTTP 的後果更嚴重。有時間的話，建議讀 RFC 2616，至少挑重點來讀。還有時間可以看看 Roy Fielding 那篇關於 REST 的論文。

其實我到感覺前端應該了解從http發起請求，到dns到apache，到某後端語言，然後回來，瀏覽器渲染的整個過程。這樣有助於更好的把前端做好，也為了方便問題的排查。
其實我一直認為這是一個很好的面試題，比一上手問人閉包，更具有實戰意義。
以下是積累的一些資料，分享一下，希望有用：

瀏覽器的工作原理：現代網路瀏覽器幕後揭秘

NutUX

從瀏覽器的渲染原理講CSS性能-Smallni"s blog

瀏覽器的渲染原理簡介

javascript文件並行載入與順序執行《高性能javascript》讀書筆記
js 並行載入與順序執行
從輸入 URL 到頁面載入完成的過程中都發生了什麼事情？ FEX 做最專業的前端
NutUX
瀏覽器的工作原理：新式網路瀏覽器幕後揭秘
js和css的順序關係%E5%92%8Ccss%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%85%B3%E7%B3%BB

js css的順序
Javascript 裝載和執行
瀏覽器載入和渲染html的順序

DNS工作流程及原理域名、IP與DNS的關係_longshu_新浪博客

DNS工作流程及原理淺說域名、IP與DNS的關係

DNS域名伺服器

HTML解析原理

瀏覽器載入渲染網頁過程解析--總結（三）

瀏覽器載入渲染網頁過程解析（二）

前端必讀：瀏覽器內部工作原理

瀏覽器的工作原理：現代網路瀏覽器幕後揭秘

HTTP協議詳解（真的很經典）

超文本傳送協議

TCP與UDP區別_動物園黑手黨

php和apache的關係和作用

有其它疑問，加群吧：389875212，禁止閑聊，非喜勿加。

HTTP協議本身並不複雜。然而，如果不知道，可能會「不明白是因為自己不知道才遇到這些問題」。如果沒有常年的積累，還需要系統的學習一下。

了解HTTP協議，其實是一個認識 HTTP 協議局限性的過程。讀完才知道互聯網上為什麼做一些性能優化的背後原理，才知道為什麼 Google 要出 SPDY 協議，才知道 HTTP/2.0 好在哪裡。HTTP協議和性能和安全性的關係應該是最大的。

說到從哪些途徑去熟悉，厚臉皮貼上我最近在更新的《圖解HTTP》讀書筆記。絞盡腦汁想了很多方法，盡量簡短又精確的傳達書中的內容。希望你閱讀得又快又很輕鬆，歡迎來看。

《圖解HTTP》讀書筆記

HTTP不複雜。死記硬背的不是知識，那只是數據。
Roy Fielding的REST論文太玄妙，你要兜好大好大的一個圈子回來，還不一定明白。兜好多個圈子可能湊合明白一些。

《REST in Practice》（感謝 @楊超糾正）不錯，其實要理解的還是架構。組合和集成是不同的架構風格。

如果想深入了解的話，這些東西需要讀一讀：

網路傳輸的分層模型，看看三 (IP) 、四 (TCP) 、七層 (HTTP) 與實際技術棧的關係
了解訪問網站所需要的技術面，如 DNS 如何工作的，HTTP 和 SSL，HTML
看看 MIME 的協議族（一系列RFC），了解文本為啥可以傳輸各種數據
看看 HTTP 的RFC，看看 HTTP 的知識是如何分組表述的
看看郵件傳輸協議 SMTP

這個回答好像不太好……混亂了。

對於Web 開發的相關人員，不管是前端還是後端，建議都看看這個一直在 StackExchange Programmer排名第一的回答，個人認為 Web 開發需要學習的東西，沒有答案在準確性和廣度上能夠超過這個回答。初學者可以瀏覽，有一定經驗的可以挑自己感興趣的部分深入看下去，要想成為箇中高手，可能需要對這個回答的每個鏈接都深入的理解和實踐。

What technical details should a programmer of a web application consider before making the site public?

針對這個問題，看看上面鏈接中給出相關的回答：

Understand HTTP and things like GET, POST, sessions, cookies, and what it means to be "stateless".
Learn the difference between 301 and 302 redirects (this is also an SEO issue).
Implement caching if necessary, understand and use HTTP caching properly as well as HTML5 Manifest.
Use SSL/HTTPS for login and any pages where sensitive data is entered (like credit card info).

不過作為一個好的前端工程師，不光是要學習 HTTP，上面回答中提到的技術要點，都能有所了解，觸類旁通，可能對工作的幫助會更大一點。

那話怎麼說來著：人是要有追求的。可能大牛和我們的唯一區別，就是在於大牛將相關領域的知識點都吃透了，所以比我們牛。大神嘛，這個先天就決定了，也不是我們常人能夠企及的。在日常的前端開發的工作中想到了深入學習 HTTP 協議，就是邁出了可喜的第一步，爭取努力成為大牛吧，共勉！

常見的狀態碼是必須的

HTTP裡面和前端最貼切的就是緩存策略，必須了解。

HTTP協議自身有「資源新鮮度」、「資源版本號」和「資源過期時間」三種策略。

我們在URL上面玩的版本號、MD5、時間戳，先人們早已想到並有對應的設計

《http權威指南》《TCP/IP》那三卷看看

前端工程師也是程序員，或多或少要了解各種基礎知識，比如，C語言、演算法、數據結構、Linux命令行工具等。當然，前端工程師主要和WEB打交道，也需要熟悉WEB相關的知識，比如，HTTP協議，郵件協議，資料庫、WEB伺服器（Apache、Nginx）、WEB後端語言（PHP、Python、Ruby、Java等）。

skyline75489/what-happens-when-zh_CN · GitHub

只要是程序員都應該對常見的網路協議有一定程度的了解，http是最基礎也是應用最廣的互聯網協議，當然應該有深入的了解，和你是「XX類型程序員」沒有關係。
但是成熟的協議都是經過時間打磨錘鍊，涉及的細節會非常之多。對於學習的新人來說，往往會覺得茫然無措，無從下手。買幾本大部頭的書硬啃過後也不是很有底自己到底掌握到了什麼程度。
原因就是學習一樣新事物要做到知行合一，理論的知識需要實踐的印證才能加深理解。按我的標準，關於http，以下這些最常見的知識點你是需要知道的。。

首先http的組成結構要清楚，request line, status line, head和body是什麼樣子。
常見的status code有哪些，200，404，1xx， 3xx， 5xx各代表什麼含義。。
request的時候一般分post和get，兩個啥區別要理解，get的時候url encode又是幹嘛用的？post一般body里數據有哪幾種類型（content-type）？
head裡面常用的幾個欄位有哪些要知道，比如說connection, content-type, cache-control…
說道cache-control，要知道文件的緩存和過期機制。。
說到connection, keep-alive要知道有什麼用。
說到keep-alive，要知道http通道和socket tcp通道啥區別？http又怎麼保持長連接。。polling是什麼之類的。
說到tcp，三次握手和slow start要知道是啥，tcp的header前20個位元組各代表啥要明白，options選擇了解。。
tcp header裡面第14個位元組所代表的8個flag要明白，你用tcpdump抓包的時候總要能理清一個http請求哪裡開始哪裡結束。。
tcpdump怎麼用要知道，常用的參數要存到你的大腦緩存里。
抓包的時候遇到https你就抓瞎了，但是https是啥要知道的。
說到https，PKI是什麼就要明白。
tcpdump是牛刀，有時候curl就夠用了，curl要知道。
http是明文協議，安全性沒辦法保證，怎麼讓裡面的數據更安全，常用的對稱加密演算法要會用。
http是明文協議，有時候運營商會截獲然後給你加點料，你要有提防。。

暫時想到這些，後面有空再補充。。總而言之呢，你最好對從用戶敲鍵盤，到數據怎麼經過tcp/ip 5層協議，然後怎麼到達server，數據最後怎麼又回來到用戶顯示器上，整個過程都清楚點。。
對了，你是前端工程師，javascript, css, dom應該是如數家珍吧，body里裝的什麼東西一眼要能看明白的。

RFC太晦澀，建議通過閱讀《計算機網路:自頂向下方法》來了解。

入門的話推薦《圖解HTTP》萌萌的圖像看起來比較有愛

工作兩年多的前端工程師，對於http，只是知道用ajax 或者用socekt， post get去請求介面，拿數據，然後渲染頁面。。。。

還有可能就是壓縮圖片減少http請求吧提高頁面的載入速度

還有啥對了還有壓縮js 用webpack打包下

具體的定義還真的沒有了解過，看完大家的回答，我想我應該買本圖解http來看看。

看完再來回答這個問題吧嘎嘎

最近我也感覺對http協議了解很有必要，能了解些後端知識，與後端互動下比較好，個人感覺前端還是非常有必要了解些後端知識的，這個可以參考下w3，慕課網上有個視頻，好像叫ajax全面接觸，可以看看，

了解 HTTP？難道這不應該是你必須知道，熟悉，並且可以隨隨便便拿出來說的嗎？

不僅如此，HTTPS 呢？HTTP2.0呢？WebSocket 呢？

這些不都是要你必須知道，熟悉，並且可以隨隨便便拿出來說的嗎？

沒有，這些知識，後台隨便給你一個 5xx 返回碼，你都不知道是誰的 bug。

具體可以參考：

HTTP2即未來 | villianHR

通信方式進階 | villianHR

上面簡單，闡述了相關協議。更細節的就需要你自己去看文檔了。

高級前端玩家必須考慮http對性能安全的影響

還是有必要了解http的，未來程序前後端通吃啊特別是node.js的興起

作為工程師，解決問題的能力很儲備知識更多更好。更何況是前端體系內的

這東西才多大知識量，不佔用什麼學習時間吧，能手寫一個簡單GET請求，能看懂RESPONSE，就可以算是基本夠用了