2021年最新前端面试题-H5新特性，cookies，localstorage和sessionstorage的异同，cookie和session的区别，WebSocket

2021年最新前端面试题-H5新特性有哪些

1. H5新特性有哪些

• html语义化
  <hrader></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<detailes></detailes>
<summary></summary>
<dialog></dialog>

• 增强性表单
  HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。：color、date、datetime、email
  HTML5 新增的表单属性： placehoder 、min 和 max、step、height 和 width、autofocus、multiple

• 视频和音频
  HTML5 提供了播放音频文件的标准，即使用 元素
  HTML5 规定了一种通过 video 元素来包含视频的标准方法。

• Canvas绘图
  标签只是图形容器，必须使用脚本来绘制图形。

• SVG绘图
  SVG是指可伸缩的矢量图形

• 地理定位
  HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}　

• 拖放API
  拖放的源对象(可能发生移动的)可以触发的事件——3个：
  dragstart：拖动开始
  drag：拖动中
  dragend：拖动结束
  整个拖动过程的组成： dragstart1 + dragn + dragend1
  拖放的目标对象(不会发生移动)可以触发的事件——4个：
  dragenter：拖动着进入
  dragover：拖动着悬停
  dragleave：拖动着离开
  drop：释放
  整个拖动过程的组成1： dragenter1 + dragovern + dragleave1
  整个拖动过程的组成2： dragenter1 + dragovern + drop*1
  dataTransfer：用于数据传递的“拖拉机”对象；

  在拖动源对象事件中使用e.dataTransfer属性保存数据：
  e.dataTransfer.setData( k, v )
  在拖动目标对象事件中使用e.dataTransfer属性读取数据：
  var value = e.dataTransfer.getData( k )

• Web Storage
  localStorage - 没有时间限制的数据存储
  sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

• WebSocket
  WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

• Web Worker
  当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
  　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

2. 介绍一下cookie和session的区别
   常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。
   Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
   Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

3. 介绍一下token的作用，和用法
   –Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。
   –Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
   –使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

4. cookie、sessionStorage和localStorage区别
   –cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
   –存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
   –数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
   –作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
   Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
   Web Storage 的 api 接口使用更方便。

5. 介绍一下http2.0
   –多路复用： 即多个请求都通过一个TCP连接并发地完成
   –服务端推送： 服务端能够主动把资源推送给客户端
   –新的二进制格式： HTTP/2采用二进制格式传输数据，相比于HTTP/1.1的–文本格式，二进制格式具有更好的解析性和拓展性
   –header压缩： HTTP/2压缩消息头，减少了传输数据的大小

6. 简述http和https的区别
   HTTP和HTTPS的基本概念
   　　HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
   　　HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
   　　HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。
   　　
   1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
   2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
   3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
   4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

7. 说一下websocket的原理，状态
   –websocket的创建和常用的属性方法
   以下 API 用于创建 WebSocket 对象。
   var Socket = new WebSocket(url, [protocol] );
   以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

–WebSocket 属性
Socket.readyState 只读属性 readyState 表示连接状态
Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

CONNECTING：值为0，表示正在连接。

OPEN：值为1，表示连接成功，可以通信了。

CLOSING：值为2，表示连接正在关闭。

CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

 var webSocket = new WebSocket(url);
  if(webSocket.readyState == webSocket.CONNECTING){
    console.log('连接正在打开');
  }

  webSocket.onopen = function () {
    webSocket.send(consumerId);
    //可以看到 "连接正在打开"并没有被打印，说明open对应的就是OPEN状态；
    if(webSocket.readyState == webSocket.CONNECTING){
      console.log('连接正在打开1');
    }
    if(webSocket.readyState == webSocket.OPEN){
      console.log('连接已打开');
    }
    sendMsg();
    window.weui.alert('已经建立连接');
  };


//连接关闭时触发
  webSocket.onclose = function () {
    if(webSocket.readyState == webSocket.CLOSED){
      console.log('连接已关闭')
    }
      window.weui.alert('连接已断开');
  };

  //连接
  webSocket.onerror = function () {
    window.weui.alert('连接错误，请稍后再试');
  };