前端面试题一

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; overflow-x: hidden; color: rgba(51, 51, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px } .markdown-body h1 { font-size: 30px; margin-bottom: 5px } .markdown-body h2 { padding-bottom: 12px; font-size: 24px; border-bottom: 1px solid rgba(236, 236, 236, 1) } .markdown-body h3 { font-size: 18px; padding-bottom: 0 } .markdown-body h4 { font-size: 16px } .markdown-body h5 { font-size: 15px } .markdown-body h6 { margin-top: 5px } .markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px } .markdown-body img { max-width: 100% } .markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px } .markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em } .markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace } .markdown-body pre { overflow: auto; position: relative; line-height: 1.75 } .markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) } .markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) } .markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) } .markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) } .markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left } .markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) } .markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px } .markdown-body td { min-width: 120px } .markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) } .markdown-body blockquote:after { display: block; content: "" } .markdown-body blockquote>p { margin: 10px 0 } .markdown-body ol, .markdown-body ul { padding-left: 28px } .markdown-body ol li, .markdown-body ul li { margin-bottom: 0 } .markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none } .markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 } .markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px } .markdown-body ol li { padding-left: 6px } @media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }

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

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

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

一、短连接

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

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

缺点：1、因为要等到发送或者获取资源时，才去请求建立连接，而且http协议只能客户端主动向服务端发送数据后，服
ad8
务端才返回
对应的数据，那么服务端想主动发送数据给客户端呢？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），服务器网址就是 U
ad8
RL。
复制代码

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的原理说一下？

15a8

通过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 几何属性的变化，因此元素的位置信息不需要更新，所以当发生重绘的时候，会跳过生存布局树和建立图层树
的阶段，直接到生成绘制列表，然后继续进行分块、生成位图等后面一系列操作。
复制代码

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

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

.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) } .hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic } .hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 } .hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) } .hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) } .hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 } .hljs-subst { font-weight: 400 } .hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 } .hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 } .hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) } .hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) } .hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) } .hl 1064 js-meta { color: rgba(153, 153, 153, 1); font-weight: 700 } .hljs-deletion { background: rgba(255, 221, 221, 1) } .hljs-addition { background: rgba(221, 255, 221, 1) } .hljs-emphasis { font-style: italic } .hljs-strong { font-weight: 700 }