前端面试题

说一说http和https

• 是什么
  1.http是一种超文本网络传输协议，是现在互联网上应用最广泛的网络协议，用于从服务器传输超文本到本地浏览器，可以使浏览器更加高效，网络传输减少
  2.https是http的安全版，它是由http协议和ssl协议共同构建的，在http协议的基础上添加了ssl层，进行了加密传输和身份认证协议，建立了一个信息安全通道，确保了数据的传输，与网站的真实性
• 区别
  1.http的传输信息是明文的，不具有安全性；但连接简单，是无状态的；使用的连接方式和端口号不同，端口号一般是80
  2.https的传输设置了ssl协议进行了数据的加密传输以及身份的认证，比http协议的安全性高；需要使用ca证书，费用比较高；它的端口号一般是443；使用https协议可以认证用户和服务器，确保数据发送到正确的客户端和服务器
• https协议的工作原理
  1.客户使用https url访问服务器，要求web服务器建立ssl链接
  2.服务器接收到请求，给客户端返回证书
  3.客户端与服务器商议其加密等级
  4.商议一致后，客户端建立会话密匙，然后通过网站的公匙来加密会话密匙，并传输给网站
  5.web服务器通过自己的私匙解密出会话密匙
  6.web服务器通过会话密匙加密与客户端之间的通信

TCP三次握手

• 是什么
  1.简单用一句话概括就是，客户端和服务端需要知道各自可以收发消息，因此需要三次握手
  2.第一次握手：服务端可以确认，自己可以接收到客户端发送来的报文段；第二次握手：客户端可以确认，服务端收到了自己的报文段，并确认服务器可以发送过来报文；第三次握手：服务端可以确认，客户端收到了自己的报文段
• TCP和UDP的区别
  一句话概括就是，利用tcp传输是更可靠的，udp传输不是很可靠
  1.tcp是面向连接的，而udp是无连接的，也就是发送数据之前不用先建立链接
  2.tcp提供可靠的服务，传输的数据无差错，不丢失，不重复，且按顺序到达，适合大数据量的交换，udp按最大努力交付，所以不保证可靠交付
  3.tcp面向的是字节流，udp面向的是报文，并且网络出现拥挤不会使发送率降低
  4.tcp只能1对1，而udp支持1对1和1对多
  5.tcp首部较大为20字节，而udp只有8字节
  6.tcp是面向连接的可靠性传输，而udp是不可靠的

WebSocket的实现和应用

• 是什么
  1.是HTML5的协议，支持持久连续
  2.是基于HTTP协议的，在握手阶段与HTTP是相同的
  3.两个属性，upgrade，connection
  告诉服务器发送的是websocket

说一说HTTP2.0

• http2.0是基于1999年发布的http1.0之后的首次更新
• 改进
  1.提升了访问速度（相比与http1.0，请求资源所需时间更少，访问速度更快）
  2.允许多路复用：允许同时通过单一的连接，发送多重请求-响应消息
  3.改善了：在http中在同一时间，针对同一域名下的请求有一定的数量限制（连接数量），超过限制会被阻塞
  4.二进制分帧：http2.0会将所有的传输消息分割成更小的信息或帧，并对他们进行二进制编码
  5.首部压缩
  6.服务端推送

fetch发送两次请求的原因

• 场景
  fetch发送post请求时，总是发送两次，第一次是204的状态码，第二次才发送成功

• 原因
  fetch使用post发送请求的时候，导致第一次发送了一个options请求，询问服务器是否可以支持修改请求头，如果支持，则在第二次中发送真正的请求

Cookie、sessionStorage、localStorage 的区别

• 共同点
  都是保存在浏览器端，并且是同源的

• 区别
  1.cookie
  ①cookie数据始终在同源的http请求中携带，即cookie可以在浏览器和服务器间来回传递，而session和localstorage不会自动把数据发送给服务端，仅在本地保存
  ②cookie有path路径的概念，可以限制cookie只属于某个路径下，存储容量小，大约只有4k左右
  ③cookie在设置cookie过期之前一直有效，即使窗口或者浏览器被关闭
  ④cookie在所有的同源窗口中是共享的
  ⑤它的作用：保持用户的登录状态，将id保存在cookie中，下次用户就不需要重新登录；设置过期时间，超过过期时间，cookie会自动消失
  2.sessionstorage
  ①本地存储，将数据保存在本地，仅在当前浏览器关闭前有效
  ②数据不能持久保存
  3.localstorage
  ①本地存储，将数据保存在本地，始终有效
  ②即使窗口或浏览器关闭数据也不会销毁，除非手动销毁数据，可以持久数据
  ③数据在所有的同源窗口中是共享的，不管浏览器与窗口关闭与否始终生效

说一下web worker

• 是什么
  是运行在后台的js，独立于其他脚本，不会影响页面的性能，通过postMessage将结果传递给主线程

ifram是什么，有什么缺点

• ifram元素可以创建包含另一个文档的内联框架
• 可以将提示文字放在之间，就可以提示某些不支持ifram的浏览器
• 缺点
  1.会阻塞主页面的onload事件
  2.搜索引擎无法搜索到，不利于seo
  3.ifram和主页面共享连接池，而浏览器对相对区域有限制，所以会影响性能

Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?

• doctype是声明在文档最前面的，用于告诉浏览器应该用什么方式渲染页面，有两种模式，严格模式和混杂模式
• 严格模式，是按照浏览器的最高标准进行排版与运作的
• 混杂模式的话是向后兼容，防止浏览器无法兼容页面

Cookie 如何防范 XSS 攻击

• xss（跨站脚本攻击），是指攻击者在返回的html中嵌入js脚本，为了减轻这些攻击，需要在http的头上配上，set-cookie
• httponly 这个属性可以防止xss，会禁止js脚本访问cookie
• secure 这个属性告诉浏览器，仅在请求为https的时候，发送cookie

说一下浏览器缓存

• 分为强缓存和协商缓存，由响应的header内容决定
• 强缓存的相关字段有expires，cache-control，如果这两个字段同时存在，那么后者优先级高于前者
• 协商缓存相关字段Last-Modified/If-Modified-Since，Etag/If-None-Match