前端的同学大家经常会在面试中碰到关于浏览器的问题但是我们由于经常在代码中很少碰到这方面的知识我们经常会忽略它，今天就来系统的总结一下。
我们经常会碰到这种高频试题
从输入域名到最后呈现经历的过程
这个题其实是个开发性试题 你从很多方面回答都是对的。
比如
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户 --> 四次挥手结束
当然我们也可以细化从浏览器得到html
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器把请求回来的 HTML 代码经过解析，构建成 DOM 树 -->计算 DOM 树上的 CSS 属性--> 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图(排版)--> 浏览器对页面进行渲染呈现给用户 --> 四次挥手结束
接下来我们看下大学中都会遇到的OSI七层模型
- Layer 7 - Application
- Layer 6 - Presentation
- Layer 5 - Session
- Layer 4 - Transport
- Layer 3 - Network
- Layer 2 - Data Link
- Layer 1 - Physical
在我们开始请求TCP的时候这个时候是在Transport层 在Node.js中属于net模块
IP属于Network层 在Node.js中要引入C++ libnet或者libpcap
接下来在HTTP时就在上面三层 在Node.js中属于HTTP模块
这也就是为什么我们创建HTTP server时候要用到HTTP模块
我们写个列子
const http = require('http');
const server = http.createServer((req, res) => {
res.setHeader('Content-Type', 'text/html');
res.setHeader('X-Foo', 'bar');
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('ok');
});
server.listen(8088)
HTTP
HTTP 协议是基于 TCP 协议出现的，对 TCP 协议来说，TCP 协议是一条双向的通讯通道，HTTP 在 TCP 的基础上，规定了 Request-Response 的模式。这个模式决定了通讯必定是由浏览器端首先发起的。
request
一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成
- 请求行 get post put
- 请求头部 accept user agent
- 空行 （最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头）
- 请求数据 （post中）
POST / HTTP/1.1 301 Moved Permanently // request line
Date: Fri, 25 Jan 2019 13:28:12 GMT // header
Content-Type: text/html
Content-Length: 182
Connection: keep-alive
Location: https://time.geekbang.org/
Strict-Transport-Security: max-age=15768000
// 空行
<html> // body
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
<center><h1>301 Moved Permanently</h1></center>
<hr><center>openresty</center>
</body>
</html>
response
HTTP响应也由三个部分组成，分别是：状态行、消息报头、响应正文。
- 状态行 get post put
- 消息报头 accept user agent
- 空行 （最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头）
- 响应正文 （post中）
状态行 有状态码
POST / HTTP/1.1 301 Moved Permanently // status line
Date: Fri, 25 Jan 2019 13:28:12 GMT // header
Content-Type: text/html
Content-Length: 182
Connection: keep-alive
Transfer-Rncoding: chunked
// 空行
2
<html> // body
<head><title>301 Moved Permanently</title></head>
<body bgcolor="white">
hi
</body>
</html>
HTTP状态码
- 1xx：临时回应，表示客户端请继续。
- 2xx：请求成功。
- 200：请求成功。
- 3xx: 表示请求的目标有变化，希望客户端进一步处理。
- 301&302：永久性与临时性跳转。
- 304：跟客户端缓存没有更新。
- 4xx：客户端请求错误。
- 403：无权限。
- 404：表示请求的页面不存在。
- 418：It’s a teapot. 这是一个彩蛋，来自 ietf 的一个愚人节玩笑。（超文本咖啡壶控制协议）
- 5xx：服务端请求错误。
- 500：服务端错误。
- 503：服务端暂时性错误，可以一会再试。
HTTP Request Header 传送门
Request Header 由 general-header | request-header | entity-header组成。
- general-header
- Cache-Control
- Connection
- Date
- Pragma
- Trailer
- Transfer-Encoding
- Upgrade
- Via
- Warning
- request-header
- Accept
- Accept-Charset
- Accept-Encoding
- Accept-Language
- Authorization
- Expect
- From
- Host
- If-Match
- If-Modified-Since
- If-None-Match
- If-Range
- If-Unmodified-Since
- Max-Forwards
- Proxy-Authorization
- Range
- Referer
- TE
- User-Agent
- entity-header
- Allow
- Content-Encoding
- Content-Language
- Content-Length
- Content-Location
- Content-MD5
- Content-Range
- Content-Type
- Expires
- Last-Modified
HTTP Response Header 传送门
Request Header 由 general-header | response-header | entity-header组成。
- general-header(同上)
- request-header
- Accept-Ranges
- Age
- ETag
- Location
- Proxy-Authenticate
- Retry-After
- Server
- Vary
- WWW-Authenticate
- entity-header(同上)
HTTPS 传送门
HTTPS在 HTTP 协议的基础上，HTTPS 和 HTTP2 规定了更复杂的内容，但是它基本保持了 HTTP 的设计思想，即：使用上的 Request-Response 模式。
我们首先来了解下 HTTPS。HTTPS 有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或者篡改。
HTTPS 是使用加密通道来传输 HTTP 的内容。但是 HTTPS 首先与服务端建立一条 TLS 加密通道。TLS 构建于 TCP 协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTPS 跟 HTTP 没有任何区别。
HTTP 2 传送门
2.0 最大的改进有两点，一是支持服务端推送，二是支持 TCP 连接复用。
服务端推送能够在客户端发送第一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存当中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题。
TCP 连接复用，则使用同一个 TCP 连接来传输多个 HTTP 请求，避免了 TCP 连接建立时的三次握手开销，和初建 TCP 连接时传输窗口小的问题。
Note: 其实很多优化涉及更下层的协议。IP 层的分包情况，和物理层的建连时间是需要被考虑的
网友评论