前端面试知识整理(长连接、WebSocket、粘性会话、HTTP请求、send()函数、Sass,Less、vue.js----patch、Babel和Webpack、splice()方法、Wasm)

1. 长连接
   在HTTP/1.0中默认使用短连接。也就是说，客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。当客户端浏览器访问的某个HTML或其他类型的Web页中包含有其他的Web资源（如JavaScript文件、图像文件、CSS文件等），每遇到这样一个Web资源，浏览器就会重新建立一个HTTP会话。
   在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接需要客户端和服务端都支持长连接。
2. WebSocket
   WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
   Websocket是传统TCP套接字之上的一个相当薄的抽象层.在初始握手之后,差异很小.所以,问题是:如何知道远程对等方是否收到了数据块？
   简短的回答:只有当对等方通过应用程序级协议明确地确认它时.远程客户端将为您将发送它的每个数据包发送TCP ACK数据包,但是这个事实很好地隐藏在应用程序中.仅接收ACK数据包意味着远程TCP堆栈已处理它,但没有说明客户端应用程序如何(以及如果)处理它.
   在聊天协议中添加特殊的"确认接收"消息类型.在所有传出消息中包含单调递增的序列号,并在ACK消息中包含接收消息的SN,以准确了解客户端已处理的数据量.

长连接和WebSocket区别：HTTP1.1通过使用Connection:keep-alive进行长连接，HTTP 1.1默认进行持久连接。在一次 TCP 连接中可以完成多个 HTTP 请求，但是对每个请求仍然要单独发 header，Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。这种长连接是一种“伪链接”
websocket的长连接，是一个真的全双工。长连接第一次tcp链路建立之后，后续数据可以双方都进行发送，不需要发送请求头。

keep-alive双方并没有建立正真的连接会话，服务端可以在任何一次请求完成后关闭。WebSocket 它本身就规定了是正真的、双工的长连接，两边都必须要维持住连接的状态。
3. 粘性会话
粘性会话是说假设后端有很多台机器，上次负载均衡器(ALB),网络负载均衡器(NLB),经典负载均衡器(CLB)转发给哪台，下次就还转发给同一台。这样的好处是后端服务器就不需要维护一个共用的 session 池子了，比如用户之前登录的 session 是保存在某台后端 server上面，下次请求过来还会转发到那台server，不然的话如果转发到其他没有这个登录状态的server上，用户就得重新登录。
4. HTTP的八种请求类型
（1）OPTION： 返回给服务器针对特定资源所支持的请求方式，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性。
（2）HEADER：是需要向服务器索要与GET一样的请求，但是不返回返回体，这个方法可以在不必传输整个响应内容的情况下，获取包含在响应消息头中的元信息。
（3）GET :向指定资源请求数据，一般用来获取，查询资源信息，较不安全，幂等（幂等是对同一URL的多个请求应该返回同样的结果）的，只用来获取数据不会修改数据，其请求显示在url上，会被缓存，对请求长度有限制。和post是常用的提交方式。
（4）POST: 向指定资源提交数据进行请求处理，一般用来更新资源信息，非幂等，请求显示在请求体里面，不会被缓存，对请求长度无限制。
（5）PUT: 向指定资源上传最新的内容。
（6）DELETE: 请求服务器器删除Request-URI所标识的资源。
（7）TRANCE: 回显服务器收到的请求，主要用于测试或诊断。
（8）CONNECT: HTTP1.1预留给可以将连接改为管道方式的服务器。

5. send()函数发送数据
   服务端中有一个接收缓存区，客户端中有一个发送缓存区，同时每个TCP socket在内核中也都有一个发送缓冲区和一个接收缓冲区。
   send()函数的作用就是将客户端或服务端中的数据拷贝到SOCKET的发送缓存区中
   recv()函数的作用就是将SOCKET的接收缓存区中数据拷贝到客户端或服务端的接收缓存区中
   综上，send()函数和recv()函数只完成应用层到传输层的数据搬运，并不直接将数据传送到数据的另一端去，真正完成数据的传输的是协议功能（TCP/UDP）
   send()函数的返回值
   （1）成功执行时，返回发送的字节数。
   （2）失败则返回SOCKET_ERROR
   recv()函数的返回值
   （1）成功执行时，返回接收到的字节数。
   （2）若另一端已关闭连接则返回0，这种关闭是对方主动且正常的关闭
   （3）失败返回-1，errno被设为以下的某个值

6. Sass,Less
   （1）它们是什么？
   Sass,Less都是CSS预处理器。他们是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
   例如：less是一种动态样式语言，将CSS赋予了动态语言的特性，如变量，继承，运算，函数，less既可以在客户端上运行（支持IE6+，webkit，Firefox），也可以在服务端运行（借助Node.js）。
   （2）为什么要使用他们？
   结构清晰，便于扩展。
   可以方便的屏蔽浏览器私有语法差异。
   可以轻松实现多重继承。
   完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。

7. vue.js----patch
   虚拟DOM最核心的部分是path，它可以将vnode渲染成真实的DOM。patch也可以叫作patching算法，通过它渲染真实DOM时，并不是暴力覆盖原有DOM，而是比对新旧两个vnode之间有哪些不同，然后根据对比结果找出需要更新的节点进行更新。
   （1）对比两个vnode之间的差异只是patch的一部分，这是手段，而不是目的。
   （2）patch的目的其实是修改DOM节点，也可以理解为渲染视图。
   （3）patch不是暴力替换节点，而是在现有DOM上进行修改来达到渲染视图的目的。
   （4）对现有的DOM进行修改需要做三件事:
   创建新增的节点
   删除已经废弃的节点
   修改需要更新的节点
   （5）patch的过程其实就是创建节点、删除节点和修改节点的过程。
   （6）渲染视图的标准是以vnode（使用最新状态创建的vnode）来渲染而不是oldVnode（上一次渲染DOM所创建的vnode）。
   （7）当oldVnode和vnode不一样的时候，以vnode为准来渲染视图。

8. Babel和Webpack
   （1）babel是一个语法编辑器，用来转换最新的JS语法，比如把ES6,ES7等语法转换为ES5语法，从而可以在大部分浏览器运行，
   执行过程分三步：分析，转化，生成代码。
   但是babel一些最新的api是不转化的，比如Object,assign,Promise等，所以可以使用插件
   babel-pilofill来引入对全部api的支持。
   （2）Webpack是一个前端打包工具(模块打包机)，可以将js,image,css当做一个模块进行打包(可理解为编译)，需要和Babel配合使用。基于nodejs运行
   优点：
   1，模块化开发
   程序员在开发时可以分模块创建不同的js,css等小文件方便开发，
   最后使用webpack将这些小文件打包成一个大文件，减少了http的请求次数。
   2，编译typescript,es6等高级js语法
   随着前端技术的发展，开发中可以使用很多高级javascript版本，比如typescript,
   es6等方便开发，提高效率，但部分浏览器不识别，所以需要webpack转换成可识别的语法。
   3，css预编译
   webpack允许在开发中使用sass和less等原生css扩展技术，通过sass-loader,less-loader将
   语法编译成浏览器可识别的css语法。
   Webpack的缺点：
   1，配置有点繁琐
   2，文档不丰富
   大概过程：
   在packagejson中配置script
   配置webpackconfig
   配置入口文件entry

9. js中splice()方法
   对于数组的项，splice() 方法可以：删除、插入与替换。
   1、删除：用于删除元素。两个参数，第一个参数（要删除第一项的位置），第二个参数（要删除的项数） 。

var spliceArr3 = ["aaa","bbb","ccc","111","22","333"];
var spliceArr4 = spliceArr3.splice(2,2);

2、插入：向数组指定位置插入任意项元素。三个参数，第一个参数（其实位置），第二个参数（0），第三个参数（插入的项）。

var arr = ['a','b','c','d'];
 arr.splice(2,1,'w','z');//从下标为2的地方截取1个元素，并添加两个元素
 console.log(arr)//a,b,w,z,d

3、替换：向数组指定位置插入任意项元素，同时删除任意数量的项。三个参数。第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。

list.splice(0,1,4); // 替换 -> 从下标为0开始,项数为1的数组元素替换成4
        console.log(list);  // [4,2,3]
        list.splice(0,2,4); // 替换 -> 从下标为0开始,项数为2的数组元素替换成4(即4,2整体替换成4)
        console.log(list);  // [4,3]

4、 参数个数为 1 的情况：
当 splice 方法的参数只有 1 个的时候（i），表示删除数组中索引为 i 及 i 之后的所有元素。返回删除的元素，数组原地修改。其中，参数 i 是整数。

var a = [1, 2, 3, 4, 5]
a.splice(-3)
console.log(a) // [1, 2]

10. Wasm
    WebAssembly（Wasm）是由 Mozilla 、谷歌、微软、苹果等公司合作研发的二进制指令格式语言，最初是为浏览器设计的，具有内存安全、可移植等特性。
    2019年12月5日，W3C 正式宣布 WebAssembly 成为继 HTML、CSS 和 Javascipt 之后的第四大标准Web语言。这是 WebAssembly 在前端的高光时刻。
    Web Assembly 比 asm.js 要激进很多。 Web Assembly 连标注 Js 这种事情都懒得做了，后来改成 AST 树。对于不支持 Web Assembly 的浏览器， 会有一段 Javascript 把 Web Assembly 重新翻译为 Javascript 运行， 这个技术叫 polyfill, HTML5 刚出来的时候很常用的一个技术。
    使用 AST 的原因是因为 AST 比字节码更容易压缩，也更容易翻译。
    不了解 AST 可以看下面这张图， 说明 Javascript 引擎的执行过程。 Javascript 先编译为 AST， 然后到 Bytecode. AST 的抽象程度比 Bytecode 要高一级。
    

其他小结：
（1）在SO中看到了很多关于c＃中的类vs结构的讨论。最后得出的结论是它的堆/堆内存分配。并建议在小型数据结构中使用结构。
（2）数据库的默认约束和检查约束区别：
默认约束：当插入记录时该字段没有赋值，会使用默认值
检查约束：列字段的内容必须符合要求,通常是一个取值范围