前端面试题

1.网络

• tcp

  • 短连接

    概念：客户端与服务器建立连接开始通信，一次/指定次数通信结束之后就断开本次tcp连接，当下次再次通信时，再次建立tcp的链接。

    优点：不长期占用服务器的内存，那么服务器能处理的连接数量是比较多的。

    缺点：1.因为要等到发送或者获取资源时，才去请求建立连接，而且http协议只能客户端主动向服务端发送数据后，服务端才返回对应的数据，websocket可以让服务端主动发送数据给客户端，或者要等到下一次要请求数据时，才发送，比如采用轮询拉取信息，服务器与客户端通信的实时性就丧失了。

    2.客户端采用轮询来实时获取信息，或者说大量的客户端使用短连接的方式通信，浪费了大量的cpu和带宽资源用于建立连接和释放连接，存在资源浪费，甚至无法建立连接，如经典的http长轮询。

微信截图_20210301155153.png

• 长连接

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

  优点：1.传输数据快

  2.服务器能够主动第一时间传输数据到客户端

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

  • websocket特点

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

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

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

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

    5.没有同源限制，客服端可以与任意服务端通信

    6.协议标识符ws（如加密，则为wss,加密层tls）服务器网址就是url

    • new

      function new(){

      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;

      }

    • http时一个在计算机世界里专门在两点之间传输文字，图片，音频，视频等超文本数据的约定和规范

    • 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申请证书，一般免费证书很少，需要交费。

    • vue中的computed和watch的区别

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

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

    • v-model原理

      通过observer来监听自己的model数据变化，同过compile来解析编译模板指令，最终利用watcher搭起observer和compile的桥梁，达到数据变化->视图更新在初始化vue实例时候，遍历data这个对象，给每一个键值利用object.definedProperty对data的键值新增get和set方法，利用事件监听dom的机制，让视图去改变数据。

    • 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

    • 虚拟dom

      1.虚拟dom本质就是用一个原生的javascript对象去描述一个dom节点，是对真实dom的一层抽象

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

      3.vue2中的虚拟dom主要借鉴了snabbdom.js,vue3中借鉴inferno.js算法进行优化。

    • 跨域

      跨域的产生是由与浏览器的同源策略，同源策略指的是：

      1.域名

      2.端口号

      3.协议名

      解决跨域：

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

      2.服务器设置对cors的支持,原理：服务器设置access-control-allow-origin http响应头之后，浏览器将会允许跨域请求。

      • 回流和重绘

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

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

2.vue

1.object.defineProperty缺陷

无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应，以及对象添加了新的属性也不行。

只能劫持对象的属性，从而需要遍历对象，proxy可以劫持整个对象，并返回一个新的对象。

proxy不仅可以代理对象，还可以代理数组，还可以代理动态增加的属性。

2.div水平垂直居中

.parent{display:flex;justify-content:center;align-items:center}

.parent{position:relative}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

.parent{display:grid}

.child{justify-self:center;align-self:center}

.parent{text-align:center}

.child{display:inline-block;vertical-align:middle}

.parent{text-align:center;height:30px;line-height:30px;}