HTTP相关知识

1. HTTP 状态码知道哪些？

• 200(ok)：请求成功；
• 301(Moved Permanently)：请求的资源已永久地移动到新位置；
• 302(Found)：资源被临时移动；
• 304(Not Modified)：未修改；
• 403(Forbidden)：禁止访问；
• 404(Not Found)：未发现指定网址；
• 500(Internal Server Error)：服务器内部错误，无法完成请求；
• 502(Bad Gateway)：无效网关，服务器无反应；

image.png

2. 301 和 302 的区别是什么？

• 301：永久重定向，浏览器会记住，下次再访问就直接给重定向过去，就不会去再问服务器;
• 302：临时重定向；

3. HTTP 缓存怎么做？
4. Cache-Control 和 Etag 的区别是什么？
5. Cookie 是什么？Session 是什么？
6. LocalStorage 和 Cookie 的区别是什么？
7. （必考）GET 和 POST 的区别是什么？
   Ⅰ. 如果什么前提和规范都不考虑，只考虑语法的话，二者之间其实没有区别；
   Ⅱ.如果是基于web环境下的RFC规范(Request For Comments)，那么区别有：

• 参数。GET参数放在url的查询参数里；POST的参数，也就是要传的数据放在请求消息体中。
• 安全。GET没有POST安全。（其实都不安全）
• GET的参数（url查询参数）有长度限制，一般为2048个字符；POST的参数（数据）没有长度限制（其实有限制，一般为4~10Mb）
• GET刷新后退无影响，POST数据会被重新提交；
• 数据包。GET请求只需要发一个包；POST请求需要发2个以上的包（因为有消息体）；（其实GET也可以有消息体，发两个以上的包）
• GET编码类型是application/x-www-form-url；POST编码类型是application/x-www-form-urlencoded或multipart/form-data；

我们常说的HTTP协议实际上是基于RFC规范的，实际上GET和POST请求的语法是完全相同的，但是在RFC规范中，给GET请求和POST请求规定了语义，规定GET用来获取信息，POST用来发送信息。

8. （必考）怎么跨域？JSONP 是什么？CORS 是什么？postMessage 是什么？

• 第一种用JSONP （缺点：不能发POST请求）
  ①请求方创建script，src指向响应方，同时传一个查询参数?callbackName=yyy；

行内约定：

1. callbackName写成callback
2. 不要用固定的函数名yyy，给一个随机的函数名，这样就不污染全局变量了

②响应方根据查询参数callback，构型形如yyy.call(undefined,'你要的数据')这样的响应；
③浏览器接到响应，就会执行yyy.call(undefined,'你要的数据')；
④那么请求方就得到了它要的数据。

• 第二种CORS跨域（Cross-Origin Resource Sharing 跨站资源共享）
  ①它只需要在需要共享的域名后台加上一句response.setHeader('Access-Control-Allow-Origin','来访问的网站域名')
• 第三种用postMessage()，它是HTML5新出的一个API——Window.postMessage()
  ①发送方

otherWindow.postMessage(message,"http://a.com")

otherWindow是接收方的Window对象；
message是要发送的数据内容；
"http://a.com"是接收方的域名；
②接收方监听message事件

window.addEventListener("message",reciveMessage,false)
function reciveMessage(event){
   if(event.origin !== 发送方域名 )
   return
  .........
}

这里的event包含了data,source,origin的属性；
event.data是发送方传来的数据内容；
event.source是发送方Window对象的引用；
event.origin是发送方的域名。

状态码详解

HTTP状态码（HTTP Status Code）一些常见的状态码

• 1xx不常用
• 2xx成功啦
• 3xx:它不在这，你滚~
• 4xx:你的请求有问题啊
• 5xx:恩...我错了

1. 1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。
   100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
   101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。

2. 2xx （成功）表示成功处理了请求的状态代码。
   200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
   201 （已创建） 请求成功并且服务器创建了新的资源。
   202 （已接受） 服务器已接受请求，但尚未处理。
   203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
   204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
   205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
   206 （部分内容） 服务器成功处理了部分 GET 请求。

3. 3xx （重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
   300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
   301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
   302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
   303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
   304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
   305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
   307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4. 4xx（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
   400 （错误请求） 服务器不理解请求的语法。
   401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
   403 （禁止） 服务器拒绝请求。
   404 （未找到） 服务器找不到请求的网页。
   405 （方法禁用） 禁用请求中指定的方法。
   406 （不接受） 无法使用请求的内容特性响应请求的网页。
   407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
   408 （请求超时） 服务器等候请求时发生超时。
   409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
   410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
   411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
   412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
   413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
   414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
   415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
   416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
   417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。

5. 5xx（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
   500 （服务器内部错误） 服务器遇到错误，无法完成请求。
   501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
   502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
   503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
   504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
   505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

从输入url到浏览器显示页面发生了什么

1. 浏览器接收URL，把URL分割成几个部分：协议、网络地址、资源路径。协议是从该计算机获取资源的方式，常见的是HTTP、FTP，不同协议有不同的通讯内容格式；网络地址指示该连接网络上哪一台计算机，可以是域名或者IP地址，可以包括端口号；资源路径指示从服务器上获取哪一项资源；
2. 将URL与缓存进行对比，如果请求的页面在缓存中且没有过期，则直接进行第8步；
3. 请求的URL未在缓存中时，且网络地址不是一个IP地址，那将通过DNS将该地址解析成IP地址；

例如：www.baidu.com不是一个IP，向DNS询问请求www.baidu.com 对应的IP，获得IP，这个过程里，你的电脑直接询问的DNS服务器可能没有www.baidu.com 对应的IP，就会向它的上级服务器询问，上级服务器同样可能没有，就依此一层层向上找，最高可达根节点，找到或者全部找不到为止。

4. 浏览器与服务器通过三次握手建立TCP 连接

①客户端：我要连接你了，准备好了吗？
②服务器：我准备好了，你连接我吧！
③客户端：好的，那我连接你了。

5. 浏览器向服务器发送HTTP请求；
6. 服务器接收到请求，从它的文档空间中查找资源并返回HTTP响应；
7. 浏览器接受 HTTP 响应，检查 HTTP header 里的状态码，并做出不同的处理方式

比如404显示错误页面，304使用缓存，200下一步解码和渲染， 204页面不会发生更新；

8. 解码

①浏览器拿到index.html文件后，就开始解析其中的html代码，遇到js/css/image等静态资源时，就向服务器端去请求下载；
②解析成对应的树形数据结构DOM树、CSS规则树，Javascript脚本通过DOM API和CSSOM API来操作DOM树、CSS规则树；

9. 渲染

①计算CSS样式（JS可动态修改dom或css,进一步改变渲染树和分布）；
②构建渲染树（Repaint：屏幕的一部分要重画，比如某个CSS的背景色变了，元素的几何尺寸没有变。Reflow：几何尺寸变了，我们需要重新验证并计算Render Tree）；
③确认布局（定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……）；
④绘制（调用操作系统Native GUI的API绘制，将每个节点转化为实际像素绘制到视口上）；

10. 关闭TCP连接或继续保持连接

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