前端系统复习（一）（HTTP/HTML/浏览器）

（1）http和https

都是运行在传输层

http(超文本传输协议)，是客户端和服务端请求和应答的标准（TCP），用于从web服务器传输超文本到本地浏览器的传输协议，使浏览器更加高效，让网络传输减少。
https:以安全为目标的HTTP通道，再http下加入SSL层，主要作用就是建立信息安全通道确保数据的传输。

区别：

1.http传输的是明文，https传输的是ssl协议加密传输和身份认证的网络协议。
2.https协议需要ca协议，费用较高。
3.连接方式不同http：80端口，https：443端口

（2） https方式与web服务器通信的步骤

1.客户端使用url访问服务器,要求web服务器建立ssl连接
2.web服务器接收到客户端的请求之后,将网站的证书(证书中包含了公钥),返回或者说传输给客户端
3.客户端和web服务器端开始协商SSL链接的安全等级,也就是加密等级
4.客户端通过双方协商一致的安全等级,建立会话密钥,然后通过网站的公钥来加密会话密钥,并传送给网站.
5.web服务器通过自己的私钥解密出会话密钥
6.web服务器通过会话密钥加密与客户端之间的通信

（3）https的优点和缺点

优点：

1.可以认证用户和服务器,确保数据发送到正确的客户端和服务器
2.传输过程由ssl+HTTP协议构建仅限加密传输和身份认证的网络协议，要比http安全，也可以防止数据在传输过程中不被窃取，改变

缺点：

1.https握手阶段比较费时，会使页面加载时间延长
2.缓存会增加开销
3.ssl证书需要钱，功能越强大的证书费用越高
4.ssl证书需要绑定ip

（4）tcp三次握手

1.由客户端向服务器端发送SYN=1（表示请求建立新连接）和seq=x（x、）（报文的序列号）
2.服务端接收到来自客户端的tcp报文之后，

• 返回SYN和ACK表示 确认客户端的报文序列号seq有效。服务器能正常接收客户端发送的数据，并同意创建新连接。（就是告诉客户端，服务器收到了你的数据）
• seq为y
• 确认号为ack = x+1，表示收到客户端的序列号seq并将值加1，作为自己确认号Ack的值

3.客户端收到来自服务端确认收到的tcp报文之后，确认客户端向服务端发送的数据传输时正常的，并返回最后一段tcp报文

• ACK标志位，确认收到服务端同意连接的信号（告诉服务器，我知道你收到了我发送的数据）
• seq = x+1 表示收到服务端的确认号ack，并将其值作为自己的序号值。
• 确认号ack+y+1，表示确认收到服务器端序号seq，并将其值加1作为自己的确认号ack的值

（5）TCP和UDP的区别

1.tcp面向连接，udp是无连接的即时发送数据
2.tcp提供可靠的服务，通过tcp连接传送的数据，无差错，不丢失，不重复，并且按照时序到达。udp不保证
3.tcp面向字节流，udp面向报文
4.tcp只能1对1，udp支持1对1，1对多。
5.tcp的首部较大位20字节，udp只有8字节

（6）WebSocket的实现和应用

websoket最大特点就是主动向客户端推送信息，客户端也可以主动向服务器发送信息，属于服务器推流技术的一种。

阮一峰的播客可以仔细学习websocket

（7）HTTP请求的方法

HTTP1.0 GET,POST,HEAD方法
HTTP1.1 OPTIONS,PUT,DELETE,TRACE和CONNECT

GET：请求指定的页面信息，并返回实体主体。
HEAD：类似与get，只不过返回的响应中没有具体的内容，用于获取抱头。
POST：向指定资源提交数据进行处理请求（例如提交表单或上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立或已有资源的修改。
PUT：从客户端向服务端传送的数据取代指定的文档的内容。
DELETE：请求服务器删除指定的页面。
CONNECT：HTTP1.1协议中预留该能改将连接改为管道方式的 代理服务器。
OPTIONA：允许客户端查看服务器的性能。
TRACE：回显服务器收到的请求，主要用于测似和诊断,

（8）实用的BOM对象

• location，history，Navigator

（9）14个状态码

• 1系：信息性状态码：接受的请求正在处理
• 2系：成功状态码：请求正常处理完毕
• 3系：重定向状态码：需要进行附加操作来完成请求
• 4系：客户端错误状态码：服务器无法处理请求
• 5系，服务器错误状态码：服务器处理请求出错

---

• 200：请求正常处理

204：请求处理成功，但是没有资源返回给客户端
206：对资源的某一部分的请求

301：资源的url已经更新。永久性的重定向
302：资源的URL已经临时定位到其他位置。临时性重定向。
303：资源的url已经更新，你能否临时按照新的URL访问。
304：资源找到了，但是不符合条件。请求报文中会带上这次请求的要求从格式到传输形式。
307：临时的重定向。

• 400：服务器不能理解客户端发送的请求。客户端的请求头有问题，语法错误。

401：表示这次发送的请求需要有通过HTTP认证才可以正常访问

• 403：访问的资源被拒绝。服务器不允许这个资源被访问（未授权的IP等等，或者是权限问题）
• 404：访问资源错误。路径错误。
• 500：后端文件出错。表示服务端在执行请求时存在bug，或者某种临时性的故障。
• 503：表示现在服务器正处于超负载或正在停机维护

（9）fetch发送请求的原因

fetch发送post请求的时候,总是发送2次,第一次时204,第二次才成功?
第一次是询问服务器是否支持修改的请求头,服务器支持的话,在第二次发送真正的请求…

• 前端文件流请求的时候有一些问题可以看看这篇文档
  https://blog.csdn.net/qq_44786519/article/details/108588353

(10)Cookies,localStorage,sessionStorage

Cooikes:始终在同源的http请求中携带（即使不需要）会在客户端和服务器间来回传递。而sessionStorage和localStorage不会这样，只在本地保存，cookies也有路径的概念，存储容量少只有4K左右
sessionStorahe：仅在当前浏览器关闭前有效，不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage：始终有效作为持久数据保存，只要是同源页面都可以共享。

cooike的作用：
保存用户登录状态，可以设置过期时间，过期后，cookies就会自动消失。
跟踪用户行为：可以记录上一次用户的选项或行为。

（11）Web Worker 和异步的对比

https://blog.csdn.net/qq_44786519/article/details/108598665

(12)html语义化

本质就是在正确的位置使用正确的标签,结构良好,有什么用呢,方便检索页面,和容易支持一些浏览器自带的功能,比如看小说时候可以选择听小说,使用一个不同的标签,在某些浏览器下有特殊的样式或表现形式

(13)Doctor的作用?两个模式有什么区别?

Doctor声明在html文档的最前面,用来告诉浏览器用那种模式渲染页面.严格模式和混杂模式.
严格模式的排版和js:用浏览器的最高标准来进行
混杂模式,向后兼容,模拟老式浏览器,防止浏览器无法兼容页面.

(14)web 安全(客户端的XSS和会话劫持,服务端的SQL注入,Xpath注入)

https://blog.csdn.net/qq_44786519/article/details/108607757

（15）viewport和移动端布局

我们最常见的viewport就是

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

就是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。防止出现横向滚动条
viewport在移动设备上就是显示我们页面的那一快区域，浏览器中显示页面的那部分区域，但是viewport又不局限与浏览器的可是区域，可能比浏览器的可视区域大

（16）addEventListener 参数