前端面试（持续更新）-优快云博客

本文链接：https://blog.youkuaiyun.com/Gnemoah6/article/details/126363003

前端面试（持续更新）

网络篇：

1、http和https的基本概念

http：是一个客户端和服务端请求和应答的标准（TCP），用于从www服务器传输超文本到本地浏览器的超文本传输协议。

https：是以安全为目标的HTTP通道，是对http加入SSL层进行了加密，建立一个信息安全通道。

2、http和https的区别和优缺点

http是超文本传输协议，https协议要比http协议更加的安全，https协议是通过ssl加密进行数据的传输，可以防止数据在传输的过程中被窃取，改变，确保数据的完整
http默认的端口是80端口，https默认的端口是443
http链接简单，是无状态的。https在握手阶段是比较费时间的，会使页面加载时间延长50%
https缓存不如http高效，会增加数据的开销
https需要ca证书，费用比较高

3、三次握手和四次挥手

第一次握手：客户端发送数据包给服务端，并把SYN标志位置为1

第二次握手：服务端收到客户端的请求，把SYN也置为1，同时生成数据包，ACK（确认连接）为1，ack为x+1

第三次握手：客户端收到服务端的同意请求返回，客户端再给服务端返回ack标准位置为y+1。完成TCP连接

第一次挥手：客户端停止发送数据发送网络包，告知服务器我要和你断开连接，之后进入一个类似等待的状态

第二次挥手：服务端收到断开连接请求包之后，也返回一个包，也进入等待状态，并询问确认断开连接吗

第三次挥手：客户端接收到服务端的确认指令之后，告知服务端可以释放断开连接，于是发送一个网络包，并再次进入等待，等待服务器真正断开释放连接

第四次挥手：服务端接收到客户端传过来的网络包指令，于是发送了释放连接最后的数据包，发送完成之后服务器进入关闭状态

4、http请求跨域问题

1、跨域的原理，什么是跨域

跨域是指浏览器不能执行其它网站的脚本。他是由浏览器同源策略造成的。

同源策略是浏览器对js实施的安全限制。只要协议，域名，端口有任何一个不同，都会当做是不同的域，就会出现跨域

2、解决方案

1、使用jsonp的方式，jsonp只能支持get请求

去创建一个script标签
script的src属性设置接口地址
接口参数，必须要带一个自定义的函数，要不然后台无法返回数据
通过定义函数名去接受返回的数据

2、proxy代理方式

在vue2项目里面就可以进行相应的操作，具体代码如下

proxyTable: {
    '/film': {  ///fil是匹配的路径
        target: 'https://m.maizuo.com',  //代理转换的路径
        changeOrigin: true,
        pathRewrite: {
            '^/film': ''  //在生成路径里面删除/film
        }
    },
},

可根据自身项目的情况进行相应的配置

3、h5的新特性window.postMessage()

具体使用的方式可以参考：https://blog.youkuaiyun.com/qq_45745319/article/details/123372895

4、就是后端解决

设置白名单，corc …等

5、Cookie，sessionStorage，localStorage的区别

cookie：

Cookie内容主要包括：名字name，值value，过期时间expires，路径path和域domain。路径和域一起构成cookie的作用范围。Cookie在设置过期时间之前是一直有效的，存储文件的大小在4kb左右，一般cookie存储在内存里，若是设置了过期时间则存到硬盘里面，浏览器关闭也不会失效，若不设置过期时间，则有效期就是浏览器窗口的会话期间，关闭浏览器窗口就会失效

原理：

客户端请求服务器时，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。而客户端浏览器会把Cookie保存起来。当浏览器再请求服务器时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器通过检查该Cookie来获取用户状态。

localStorage：

localStorage的生命周期是永久，除非手动去清除，否则永远都存在，他的储存大小是5MB，仅在客户端浏览器上储存，不参与服务器的通信。

  //设置localStorage保存到本地，第一个为变量名，第二个是值
  localStorage.setItem('Author', 'Jane')
  // 获取数据
  localStorage.getItem('Author')
  // 删除保存的数据
  localStorage.removeItem('Author')
  // 清除所有保存的数据
  localStorage.clear()

sessionStorage:

sessionStorage顾名思义，是在当前会话下有效，引入了一个“浏览器窗口的概念”,sessionStorage是在同源的同窗口中，始终存在的数据，只要浏览器不关闭，即使是刷新或者进入同源的另一个页面，数据仍在。同时打开“独立”的窗口，即使是同一个页面，sessionStorage的对象也是不同的。关闭窗口后sessionStorage就会被销毁。

  // 设置sessionStorage保存到本地，第一个为变量名，第二个是值
  sessionStorage.setItem('sessionName', 'John')
  // 获取数据
  sessionStorage.getItem('sessionName')
  // 删除保存的数据
  sessionStorage.removeItem('sessionName')
  // 清除所有保存的数据
  sessionStorage.clear()