http相关知识点总结

1. HTTP有什么特点
   简单快速：客户向服务器请求服务时，只需传送请求方法和路径
   灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由 Content-Type 加以标记
   无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接 (深入-持久连接、管线化)
   无状态：HTTP协议是无状态协议( Cookie 的出现)

2. http和https协议有什么区别
   http: 是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少
   https: 是以安全为目标的HTTP通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL ，因此加密的详细内容就需要 SSL

   http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议
   http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80 ，后者是 443
   http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全

3. http状态码有那些？分别代表是什么意思
   常用 http 状态码：

   200 OK 服务器成功处理了请求
   301/302 Moved Permanently（重定向）请求的URL已移走
   404 Not Found (页面丢失)未找到资源
   403 服务器拒绝请求
   408 （请求超时） 服务器等候请求时发生超时
   501 Internal Server Error 服务器遇到一个错误，使其无法对请求提供服务
   502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应
   504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求

4. 什么是HTTP持久化和管线化
   出现背景： HTTP 最初的版本中，每进行一次 HTTP 通信，就要断开一次 TCP 连接（无连接）
   为解决上述问题，HTTP/1.1 增加了持久连接（HTTP Persistent Connections ）的方法，其特点是，只要一方未明确提出断开连接，则另一方保持 TCP 连接状态

   管线化是指将多个 HTTP 请求整批发送，在发送过程中不用等待对方响应
   管线化是在持久连接的基础上实现的，管线化的实现，能够同时并行发送多个请求，而不需要一个接一个的等待响应

5. Http报文
   HTTP 报文是面向文本的，报文中的每一个字段都是一些 ASCII 码串，各个字段的长度是不确定的。HTTP 有两类报文：请求报文和响应报文
   HTTP的这两种报文都由三部分组成：开始行、首部行、实体主体

6. 从输入URL到页面加载全过程

7. 这是一道经典的面试题，这道面试题不光前端面试会问到，后端面试也会被问到。这道题没有一个标准的答案，它涉及很多的知识点，面试官会通过这道题了解你对哪一方面的知识比较擅长，然后继续追问看看你的掌握程度。当然我写的这些也只是我的一些简单的理解，从前端的角度出发，我觉得首先回答必须包括几个基本的点，然后在根据你的理解深入回答。

   1、浏览器的地址栏输入URL并按下回车。

   2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

   3、DNS解析URL对应的IP。

   4、根据IP建立TCP连接（三次握手）。

   5、HTTP发起请求。

   6、服务器处理请求，浏览器接收HTTP响应。

   7、渲染页面，构建DOM树。

   8、关闭TCP连接（四次挥手）。

说完整个过程的几个关键点后我们再来展开的说一下。
一、URL
　　我们常见的RUL是这样的:http://www.baidu.com, 这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询和其他片段，例如：http://www.tuicool.com/search?kw=%E4%。 我们最常见的的协议是HTTP协议，除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。URL的中间部分为域名或者是IP，之后就是端口号了。通常端口号不常见是因为大部分的都是使用默认端口，如HTTP默认端口80，HTTPS默认端口443。说到这里可能有的面试官会问你同源策略，以及更深层次的跨域的问题，我今天就不在这里展开了。

二、缓存
　　说完URL我们说说浏览器缓存,HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，我将其分为强制缓存，对比缓存。
　　强制缓存判断HTTP首部字段：cache-control，Expires。
　　Expires是一个绝对时间，即服务器时间。浏览器检查当前时间，如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题：服务器时间与客户端时间可能不一致。因此该字段已经很少使用。
　　cache-control中的max-age保存一个相对时间。例如Cache-Control: max-age = 484200，表示浏览器收到文件后，缓存在484200s内均有效。 如果同时存在cache-control和Expires，浏览器总是优先使用cache-control。
　　对比缓存通过HTTP的last-modified，Etag字段进行判断。
　　last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。
　　Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。

Paste_Image.png
三、DNS域名解析
　　我们知道在地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就产生了，域名解析的过程实际是将域名还原为IP地址的过程。
　　首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。
　　如果没找到则会查找本地DNS解析器缓存，如果查找到则返回。
　　如果还是没有找到则会查找本地DNS服务器，如果查找到则返回。
　　最后迭代查询，按根域服务器 ->顶级域,.cn->第二层域，hb.cn ->子域，www.hb.cn的顺序找到IP地址。

Paste_Image.png
递归查询，按上一级DNS服务器->上上级->…逐级向上查询找到IP地址。

Paste_Image.png

四、TCP连接
　　在通过第一步的DNS域名解析后，获取到了服务器的IP地址，在获取到IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过三次握手进行连接。
　　第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；
　　第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
　　第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
　　完成三次握手，客户端与服务器开始传送数据。

Paste_Image.png
五、浏览器向服务器发送HTTP请求
　　完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。

Paste_Image.png
六、浏览器接收响应
　　服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。
　　状态码主要包括以下部分
　　1xx：指示信息–表示请求已接收，继续处理。
　　2xx：成功–表示请求已被成功接收、理解、接受。
　　3xx：重定向–要完成请求必须进行更进一步的操作。
　　4xx：客户端错误–请求有语法错误或请求无法实现。
　　5xx：服务器端错误–服务器未能实现合法的请求。
　　响应头主要由Cache-Control、 Connection、Date、Pragma等组成。
　　响应体为服务器返回给浏览器的信息，主要由HTML，css，js，图片文件组成。

七、页面渲染
　　如果说响应的内容是HTML文档的话，就需要浏览器进行解析渲染呈现给用户。整个过程涉及两个方面：解析和渲染。在渲染页面之前，需要构建DOM树和CSSOM树。

Paste_Image.png
在浏览器还没接收到完整的 HTML 文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念：Reflow和Repaint。
　　Reflow，也称作Layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树，这个过程称为Reflow。
　　Repaint，中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就OK了，这个过程称为Repaint。
　　所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。
　　下面这些动作有很大可能会是成本比较高的：
1、增加、删除、修改DOM结点时，会导致Reflow或Repaint。
2、移动DOM的位置，或是搞个动画的时候。
3、内容发生变化。
4、修改CSS样式的时候。
5、Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
6、修改网页的默认字体时。

基本上来说，reflow有如下的几个原因：
1、Initial，网页初始化的时候。
2、Incremental，一些js在操作DOM树时。
3、Resize，其些元件的尺寸变了。
4、StyleChange，如果CSS的属性发生变化了。

八、关闭TCP连接或继续保持连接
　　通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。

Paste_Image.png
第一次挥手是浏览器发完数据后，发送FIN请求断开连接。
第二次挥手是服务器发送ACK表示同意，如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥，但考虑到服务器可能还有数据要发送，所以服务器发送FIN应该放在第三次挥手中。
这样浏览器需要返回ACK表示同意，也就是第四次挥手。

至此从浏览器地址栏输入URL到页面呈现到你面前的整个过程就分析完了，上面内容如有错误欢迎留言交流。
7. 为什么利用多个域名来存储网站资源会更有效
CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题