前端面试题一

从他蓬松且凌乱的头发可以看出，坐在我面前这位面试小哥来者不善，我的自我介绍也变得那么形式化。（他推了推眼镜，仿佛在说你赶紧介绍完吧，我要开始吊打你了小子！），一道犀利的眼神从我脸上扫过，我故作镇定…

1、网络方面还可以吧（我默默的点点头），说说TCP的长连接和短连接的区别？

如果了解得比较深入，可以说说各自的优缺点。

一、短连接

概念:客户端与服务器建立连接开始通信，一次/指定次数通信结束之后就断开本次TCP连接，
     当下次再次通信时，再次建立TCP的链接。
   
优点：不长期占用服务器的内存，那么服务器能处理的连接数量是比较多的
   
缺点：1、因为要等到发送或者获取资源时，才去请求建立连接，而且http协议只能客户端主动向服务端发送数据后，服务端才返回
   	对应的数据，那么服务端想主动发送数据给客户端呢？Websocket可以让服务端主动发送数据给客户端，或者要等到下一次要请求数据时，才发送，比如我们采用
   	轮询（30秒或者更长）拉取消息， 那么服务器与客户端通信的实时性就丧失了。
   
      2、客户端采用轮询来实时获取信息，或者说大量的客户端使用短连接的方式通信，那么就浪费了大量的CPU和带宽资源用于建立连接
   	和释放连接，存在资源浪费，甚至是无法建立连接。比如经典的http长轮询（微信网页客户端端）
复制代码

二、长连接

概念:	TCP与服务器建立连接之后一直处于连接状态，直到最后不再需要服务的时候才断开连接

优点：	1、传输数据快
	2、服务器能够主动第一时间传输数据到客户端

缺点:	1、因为客户端与服务器一直保持这种连接，那么在高并发分布式集群系统中客户端数量会越来越多，占 用很多的系统资源
	2、TCP本身是一种有状态的数据，在高并发分布式系统会导致后台设计比较难做
复制代码

2、既然你提到了WebSocket，那就说明你用过咯，说说他的特点？

完了这是跟我杠上了，我依稀记得一些…，可以看出对基础考察得比较厉害

1、最大的特点就是服务端可以主动向客户端发送数据

2、与 HTTP 协议有着良好的兼容性。默认端口是80和443，并握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器。

3、数据格式比较轻量，性能开销小，通信高效。

4、可以发送文本，也可以发送二进制数据。

5、没有同源限制，客户端可以与任意服务器通信。

6、协议标识符是ws（如果加密，则为wss，加密层是TLS），服务器网址就是 URL。
复制代码

3、看你简历用过地图，说说现在地图都有哪几种坐标系？

这个我只回答出了前面两种，确实没太了解过这些。应该是还有的，可以自行查阅

1、GCJ-02 坐标系：国测局坐标，火星坐标系（高德、腾讯、Google中国地图都使用它）
2、BD-09坐标系：（百度中国地图所采用的坐标系）
3、WGS-84坐标系：地心坐标系，GPS原始坐标体系（在中国，任何一个地图产品都不允许使用GPS坐标，据说是为了保密）
复制代码

4、可以手写一个new()吗？

挽了挽衣袖，开撸

function myNew() {
  var constr = Array.prototype.shift.call(arguments);
  var obj = Object.create(constr.prototype);
  var result = constr.apply(obj, arguments);
  return result instanceof Object? result : obj;
}
复制代码

5、http是什么？

全部抬起小脑袋，不要再说http是超文本传输协议，它的英文是 HyperText Transfer Protocol。

HTTP是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。
复制代码

6、http和https的区别？

1、HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，
所有传输的内容都经过加密的。

2、可以说https是http的加强版（http+SSL/TLS=https）

3、http端口号是80，https是443.

4、HTTPS协议需要到CA申请证书，一般免费证书很少，需要交费。
复制代码

此时面试官小哥哥喝了一口82年的咖啡，心想这小子什么来头？

7、Vue中的computed和watch的区别？

1、computed：是一个有缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于
复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理

2、watch：没有缓存性，更多的是起到一个观察的作用。可以监听某些数据执行回调，当需要深度监听时，将deep:true开启即可。
复制代码

8、v-model的原理说一下？

通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信
桥梁，达到数据变化->视图更新在初始化vue实例时，遍历data这个对象，给每一个键值对利用Object.definedProperty对data的键值
对新增get和set方法，利用了事件监听DOM的机制，让视图去改变数据
复制代码

9、说一下 Event Loop的执行顺序

考察宏微任务

1、一开始整个脚本作为一个宏任务执行
2、执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
3、当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完
4、执行浏览器UI线程的渲染工作
5、检查是否有Web Worker任务，有则执行
6、执行完本轮的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空
复制代码

宏任务：script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering

微任务：MutationObserver、Promise.then()或catch()、fetch API、V8的垃圾回收过程、Node独有的process.nextTick
复制代码

10、介绍一下虚拟DOM

1、虚拟DOM本质就是用一个原生的JavaScript对象去描述一个DOM节点。是对真实DOM的一层抽象。

2、在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生性能问题，所以需要这一层抽象，在patch过程中尽可能地一次
   性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况。

3、Vue2.x中的虚拟DOM主要是借鉴了snabbdom.js，Vue3中借鉴inferno.js算法进行优化。
复制代码

11、跨域了解吗，如何解决，为什么会产生跨域？

跨域的产生是由于浏览器的同源策略，同源策略指的是：
  1、域名
  2、端口号
  3、协议名
只要有一个不同就称为跨域

解决跨域：
  1、jsonp跨域(只能解决get） 原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制，因为所有的src属性
     和href属性都不受同源策略的限制，可以请求第三方服务器资源内容

  2、服务器设置对CORS的支持 原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求
  
复制代码

12、说一下回流和重绘

回流：对 DOM 结构的修改从而引发 DOM 几何尺寸变化的时候，会发生回流的过程。

过程：由于DOM的结构发生了改变，所以需要从生成DOM这一步开始，重新经过样式计算、生成布局树、建立图层树、再到生成绘制
列表以及之后的显示器显示这整一个渲染过程走一遍，开销是非常大的。
复制代码

重绘：当 DOM 的修改导致了样式的变化，并且没有影响几何属性的时候，会导致重绘。

过程：由于没有导致 DOM 几何属性的变化，因此元素的位置信息不需要更新，所以当发生重绘的时候，会跳过生存布局树和建立图层树
的阶段，直接到生成绘制列表，然后继续进行分块、生成位图等后面一系列操作。
复制代码

小哥哥思量了半分钟，场面一度很尴尬，说先面到这儿吧，你先等一会儿。（后来叫来了技术总监，弱弱的我心里竟然有点小慌） 最后技术总监没问技术，问了我项目问题，还好没有打击我

这家最后还是过了，但是没有选择去，因为觉得平台不是我想要的，而且感觉没有什么诚意…