总结Ⅴ-框架篇之HTTP

218 阅读9分钟

HTTP

1. http和https

结论:

  • HTTPS是HTTP协议的安全版本,HTTP协议的数据传输是明文的,是不安全的,HTTPS使用了SSL/TLS协议进行了加密处理。
  • http和https使用连接方式不同,默认端口也不一样,http是80,https是443。

HTTP协议是什么?

超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。


HTTP原理

HTTP是一个基于TCP/IP通信协议来传递数据的协议,传输的数据类型为HTML 文件,图片文件, 查询结果等。


一般http中存在如下问题:

  • 请求信息明文传输,容易被窃听截取。
  • 数据的完整性未校验,容易被篡改
  • 没有验证对方身份,存在冒充危险

什么是HTTPS?

为了解决上述HTTP存在的问题,就用到了HTTPS。

HTTPS 协议(HyperText Transfer Protocol over Secure Socket Layer):一般理解为HTTP+SSL/TLS,通过 SSL证书来验证服务器的身份,并为浏览器和服务器之间的通信进行加密。


那么SSL又是什么?

SSL(Secure Socket Layer,安全套接字层):1994年为 Netscape 所研发,SSL 协议位于 TCP/IP 协议与各种应用层协议之间,为数据通讯提供安全支持。


HTTPS的缺点

  • HTTPS协议多次握手,导致页面的加载时间延长近50%;
  • HTTPS连接缓存不如HTTP高效,会增加数据开销和功耗;
  • 申请SSL证书需要钱,功能越强大的证书费用越高。
  • SSL涉及到的安全算法会消耗 CPU 资源,对服务器资源消耗较大。

2. HTTP 状态码知道哪些?分别什么意思?

参考

访问一个网页时,浏览器会向web服务器发出请求。此网页所在的服务器会返回一个包含HTTP状态码的信息头用以响应浏览器的请求。

状态码分类

  • 1XX- 信息型,服务器收到请求,需要请求者继续操作。

  • 2XX- 成功型,请求成功收到,理解并处理。

  • 3XX - 重定向,需要进一步的操作以完成请求。

  • 4XX - 客户端错误,请求包含语法错误或无法完成请求。

  • 5XX - 服务器错误,服务器在处理请求的过程中发生了错误。

常见状态码

  • 200 OK - 客户端请求成功

  • 301 - 资源(网页等)被永久转移到其它URL

  • 302 - 临时跳转

  • 304:Not Modified    未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

  • 400 Bad Request - 客户端请求有语法错误,不能被服务器所理解

  • 401 Unauthorized - 请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用

  • 404 - 请求资源不存在,可能是输入了错误的URL

  • 500 - 服务器内部发生了不可预期的错误

  • 503 Server Unavailable - 服务器当前不能处理客户端的请求,一段时间后可能恢复正常。

3. HTTP缓存有哪几种

参考文章

(详细的了解 ETag:MD5、CacheControl:max-age=600、Expires:日期)

浏览器的缓存机制有强缓存协商缓存。浏览器请求资源时,根据Expires和Cache-Control判断是否命中强缓存。(1)如果缓存还没失效,就命中了强缓存,直接从缓存读取资源,不发请求;(2)如果没有命中强缓存,浏览器就一定会发请求到服务器,通过Last-Modified和ETag判断资源是否被修改,也就是判断协商缓存。如果资源没被修改,命中了协商缓存,服务器返回304,告诉浏览器从缓存读取资源。(3)两者都没有命中,说明缓存失效了,而且资源也被修改了,服务器会返回新的资源。

相同点:如果命中了,都是从浏览器的缓存读取资源,而不是从服务器获取

不同点:强缓存不发请求,协商缓存要发请求到服务器

ETag是服务器根据某种算法,给每个资源计算出来一个唯一的标志值如MD5。在浏览器请求该资源时,以ETag的头部发过去。下次浏览器再次请求时,会带着这个值一起,用If-None-Match的头部。服务器会和自己这里的资源的ETag比较,如果相同,说明没有修改,返回304。如果不同,说明被修改了,返回新的资源,状态码200

考点1:Expire和Cache-Control的区别

Expire是以时刻值表示过期时间,绝对时间,bug在于如果用户的本地时间错乱,就会有问题;而Cache-Control是以max-age时间段表示过期时长,这是相对时间,与本地时间无关。

考点2:Etag和Cache-Control的区别

Cache-Control是从本地,浏览器的文件缓存里读取缓存的,而ETag还是会发请求的,Cache-Control是无请求的。

4. GET 和 POST 的区别

  1. GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。

  2. GET请求在URL中传送的参数有长度限制(一般是1024字节),而POST没有(实际上也有,一般限制4M~20M)。

  3. GET参数通过URL传递,POST放在Request body(消息体)中。

  4. GET只需要一个报文,POST需要两个以上(原因是POST有消息体)。

  5. GET幂等,POST不幂等。(意思是发多次GET不会改变数据库,POST可能会)

本质区别:GET 用于获取资源,POST 用于提交资源。

5. Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session

1. Cookie 和 Session区别

  • 定义:

    cookie是服务器发给浏览器的一段字符串,浏览器在之后向同一服务器发起请求时携带cookie。

    session是会话,表示浏览器和服务器一段时间内的一次会话。

  • 区别:

    cookie是在保存浏览器上的,session是在保存服务器上的。session是基于cookie实现的,一般把session_id放在cookie里

2. Cookie 和 LocalStorage区别

存储大小限制不同,Cookie 一般最大 4k,LocalStorage 可以用 5Mb 甚至 10Mb(各浏览器不同)

Cookie 用来存储用户信息,而 LocalStorage 则负责存储一些不重要的数据

Cookie 会被发送到服务器,而 LocalStorage 不会

3. LocalStorage 和 SessionStorage 区别

存储数据的生命周期不同,LocalStorage 一般不会自动过期(除非用户手动清除),而 SessionStorage 在session结束时过期(如关闭浏览器)

6. HTTP2.X 相对于HTTP1.X的新特性

多路复用(MultiPlexing),即连接共享,即每一个request都是是用作连接共享机制的。一个request对应一个id,这样一个连接上可以有多个request,每个连接的request可以随机的混杂在一起,接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。

服务端推送(server push)服务端推送能把客户端所需要的资源伴随着index.html一起发送到客户端,省去了客户端重复请求的步骤。正因为没有发起请求,建立连接等操作,所以静态资源通过服务端推送的方式可以极大地提升速度。

HTTP2强制开启https

7.HTTP请求的方式

前三个最重要

序号方法描述
1GET请求指定的页面信息,并返回实体主体。
2HEAD类似于 GET 请求,只不过返回的响应中没有具体的内容,用于获取报头
3OPTIONS允许客户端查看服务器的性能。
4POST向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
5PUT从客户端向服务器传送的数据取代指定的文档的内容。
6DELETE请求服务器删除指定的页面。
7CONNECTHTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
8TRACE回显服务器收到的请求,主要用于测试或诊断。
9PATCH是对 PUT 方法的补充,用来对已知资源进行局部更新 。

8.HTML5和CSS3用的多吗?你了解它们的新属性吗?有在项目中用过吗?

html5:

1)标签增删

8个语义元素 header section footer aside nav main article figure

内容元素mark高亮 progress进度

新的表单控件calander date time email url search

新的input类型 color date datetime datetime-local email

移除过时标签big font frame frameset

2)canvas绘图,支持内联SVG。支持MathML

3)多媒体audio video source embed track

4)本地离线存储,把需要离线存储在本地的文件列在一个manifest配置文件

5)web存储。localStorage、SessionStorage


css3:

CSS3边框如border-radius,box-shadow等;CSS3背景如background-size,background-origin等;CSS3 2D,3D转换如transform等;CSS3动画如animation等。

参考文章

9.HTML5 drag api

HTML 拖放( Drag and Drop) 接口使应用程序能够在浏览器中使用拖放功能。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。

对于网站、扩展以及 XUL 应用程序,你可以自定义什么元素是可拖拽的、可拖拽元素产生的反馈类型,以及可放置的元素。 dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发,。

  • darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。

  • dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。

  • dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。

  • dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。

  • drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。

  • dragend:事件主体是被拖放元素,在整个拖放操作结束时触发