关于前端:2021前端面试经

the first 论被到职的无奈

跟平常一样乐乐呵呵的下班，忽然间被告诉办公地点要搬到几十公里外的新办公区 (仅仅是外包同学)，听到这个可怜的音讯心里哇凉哇凉的。这可咋办呢？前一个月闲的无聊投过一些简历，后果面试反馈是根底不行。害

离搬中央还有半个月工夫，真的是工夫紧工作重呀。登时感觉压力山大，自身工作乐乐呵呵该下班下班该上班上班，leader 都明确示意让我再找工作机会了，没方法上号吧！

上号（BOSS 直聘）

对于没有学历的我, 流下了没学历的泪水。对于投简历的策略我采取的是广撒网政策哈哈哈，无论是外包还是正式，大公司 or 小企业，约了面试就行

这个后果就是一天可能会排四五个面试，对此，还在下班的我只能偷摸搬着电脑到楼下视频面~~~

后期筹备

因为上次找工作还是一年多之前，所以前端面试题也都忘的差不多了。并且这次面试工夫也比拟缓和只能边面试边记录面试题了，很仓促的感觉呀

面试 ing

大大小小面了几十个，总结了一下的几个面试题：

1.js 数据类型

值类型（根本类型）：字符串（String）、数字（Number）、布尔（Boolean）、对空（Null）、未定义（Undefined）、Symboly

援用数据类型：对象（Object）、数组（Array）、函数（Function）

2. 宏工作和微工作

宏工作：(macro)task，能够了解是每次执行栈执行的代码就是一个宏工作（包含每次从事件队列中获取一个事件回调并放到执行栈中执行）。w 微工作：microtask, 能够了解是在以后 task 执行完结后立刻执行的工作。也就是说，在以后 task 工作后，下一个 task 之前，在渲染之前。具体见：https://zhuanlan.zhihu.com/p/78113300

3. 继承的几种形式及优缺点

1. 原型链继承

实现形式：将子类的原型链指向父类的对象实例

长处: 可继承构造函数的属性，父类构造函数的属性，父类原型的属性

毛病：无奈向父类构造函数传参；且所有实例共享父类实例的属性，若父类共有属性为援用类型，一个子类实例更改父类构造函数共有属性时会导致继承的共有属性发生变化

2. 构造函数继承

实现形式：应用 call 或者 apply 更改子类函数的作用域，使 this 执行父类构造函数，子类因而能够继承父类共有属性

长处：可解决原型链继承的毛病

毛病：不可继承父类的原型链办法，构造函数不可复用

3. 组合继承

实现形式：综合应用构造函数继承和原型链继承

长处：可继承父类原型上的属性，且可传参；每个新实例引入的构造函数是公有的

毛病：会执行两次父类的构造函数，耗费较大内存，子类的构造函数会代替原型上的那个父类构造函数

4. 什么是闭包

“闭包就是可能读取其余函数外部变量的函数。例如在 javascript 中，只有函数外部的子函数能力读取局部变量，所以闭包能够了解成“定义在一个函数外部的函数“。在实质上，闭包是将函数外部和函数内部连接起来的桥梁。”

5. 数组去重

1. 利用 ES6 Set 去重

2. 利用 for 嵌套 for 而后 splice 去重

3. 新建一个空数组，循环遍历旧数组判断如果新数组中没有就放进去

4. 利用 sort 排序，而后在比照相邻的两个数

5. hasOwnProperty 判断是否存在

6. 应用递归去重

...

6.get 和 post 的区别

1. 传送形式：get 通过地址栏传输，post 通过报文传输

2. 传输长度：get 有长度限度，post 无限度

3. 缓存：get 申请能够被缓存，post 不能够被缓存

4. 编码：get 申请只 URL 编码，post 反对多种编码方式

5. 历史记录：get 申请的记录会留在历史记录中，post 申请不会留在历史记录

6. 字符限度：get 只反对 ASCII 字符，post 没有字符类型限度

7.vue 生命周期

beforeCreate: 在实例初始化之后、进行数据侦听和事件 / 侦听器的配置之前同步调用。created: 在实例创立实现后被立刻同步调用。beforeMount->onBeforeMount: 在挂载开始之前被调用。mounted->onMounted: 在实例挂载实现后被调用。beforeUpdate->onBeforeUpdate: 在数据产生扭转后。updated->onUpdated: 在数据更改导致的虚构 DOM 从新渲染和更新结束之后被调用。beforeDestroy->onBeforeUnmount: 在卸载组件实例之前调用。在这个阶段，实例依然是齐全失常的。destroyed->onUnmounted: 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

8.localStorage 和 sessionStorage 和 cookie

共同点:

都是保留在浏览器端、且同源的

不同点：cookie 数据始终在同源的 http 申请中携带（即便不须要）sessionStorage 和 localStorage 不会主动把数据发送给服务器，仅在本地保留

存储大小限度也不同，cookie 数据不能超过 4K，同时因为每次 http 申请都会携带 cookie、所以 cookie 只适宜保留很小的数据，如会话标识。sessionStorage 和 localStorage 尽管也有存储大小的限度，但比 cookie 大得多，能够达到 5M 或更大

数据有效期不同，sessionStorage：仅在以后浏览器窗口敞开之前无效；localStorage：始终无效，窗口或浏览器敞开也始终保留，因而用作持久数据；cookie：只在设置的 cookie 过期工夫之前无效，即便窗口敞开或浏览器敞开

作用域不同，sessionStorage 不在不同的浏览器窗口中共享，即便是同一个页面；localstorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的

9.vue2 和 vue3 区别

1. vue2 和 vue3 双向数据绑定原理产生了扭转。vue2 的双向数据绑定是利用 ES5 的一个 API Object.definePropert() 对数据进行劫持 联合 公布订阅模式的形式来实现的。2. 生命周期钩子应用不同。具体见第七条

3. vue3 的 template 反对多个根标签，vue2 不反对

4. vue3 引入了 tree-shaking 性能，按需打包体积更小

10.call apply bind 的区别

相同点:

三个函数都会扭转 this 的指向（调用这三个函数的函数外部的 this）不同点：bind 会产生新的函数，（把对象和函数绑定死后，产生新的函数）call 和 apply 不会产生新的函数，只是在调用时，绑定一下而已。call 和 apply 的区别，第一个参数都是要绑定的 this，apply 第二个参数是数组（是函数的所有参数），call 把 apply 的第二个参数单列进去。

11. 单页面性能优化

1. 缩小 http 申请

2. 非核心代码异步申请

3. 优化图片，压缩图片

4. 将脚本置底

12. vue2 中 data 为什么不是个函数？

重点解释：各个组件中的数据不受影响

vue 组件是可复用的 vue 实例，一个组件被创立好之后，就可能被用在各个中央，而组件不论被复用了多少次，组件中的 data 数据都应该是互相隔离，互不影响的. 基于这一理念，组件每复用一次，data 数据就会被复制一次，之后，当某一处复用的中央组件内 data 数据被扭转时，其余复用中央组件的 data 数据不受影响。

13. 解释 promise 原理

为了解决回调地区的问题，说到底，Promise 也还是应用回调函数，只不过是把回调封装在了外部，应用上始终通过 then 办法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及了解上会更直观和简洁一些。Promse.all 在解决多个异步解决时, 只有全副返回才执行 thenPromse.race 就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3]) 外面哪个后果取得的快，就返回那个后果，不论后果自身是胜利状态还是失败状态 Promise.any() 接管一个 Promise 可迭代对象，只有其中的一个 promise 胜利，就返回那个曾经胜利的 promise 如果可迭代对象中没有一个 promise 胜利（即所有的 promises 都失败 / 回绝），就返回一个失败的 promise

14. webpack 打包

用的不太多，临时没有总结汗

15. 防抖和节流

函数防抖（debounce）：当继续触发事件时，肯定时间段内没有再触发事件，事件处理函数    才会执行一次，如果设定的工夫到来之前，又一次触发了事件，就从新开始延时节流：函数节流（throttle）：当继续触发事件时，保障肯定时间段内只调用一次事件处理函数  节流艰深解释就比方咱们水龙头放水

16.eval 作用

把字符串参数解析成 JS 代码并运行，并返回执行的后果

17. 判断是否是数组

1.Array.isArray(arr)

2.arr instnceof Array

3.arr.constructor === Array

4.Object.prototype.toString.call(arr) ===‘[object Array]’

18. 左侧固定左边自适应

1.css 实现左侧固定，右侧自适应布局

2. 左侧 float 定位，右侧 margin-left: 左侧的宽度

3. 左侧 absolute, 右侧 margin-left：左侧宽度

4.flex 布局

5.table-cell 表格布局

19.Json.stringfy 毛病（问了好几遍）

1. 如果蕴含 function,undefined,Symbol 这几种类型，不可枚举属性，键值会隐没。2. 转换的数据中蕴含 Date 对象，JSON.Stringify 序列化之后，会变成字符串。

20.js 中 let 和 var 的区别

1. 作用域不同：var 是函数作用域，let 是块作用域。在函数中申明了 var，整个函数内都是无效的, 而 let 因为是块作用域，所以如果在块作用域内定义的变量，在其里面是不可被拜访的

2.let 不能在定义之前拜访该变量，然而 var 能够

3.let 不能被从新定义，然而 var 是能够的

4.let 是 ES6 新增的命令，之前是没有的

21. 什么是跨域以及产生起因

跨域是指 a 页面想获取 b 页面资源，如果 a、b 页面的协定、域名、端口、子域名不同，或是 a 页面为 ip 地址，b 页面为域名地址

所进行的拜访口头都是跨域的，而浏览器为了平安问题个别都限度了跨域拜访，也就是不容许跨域申请资源

22. 回流跟重绘

回流：当 render tree 的一部分或全副的元素因扭转了本身的宽高，布局，显示或暗藏，或者元素外部的文字构造发生变化 导致须要从新构建页面的时候，回流就产生了重绘：当一个元素本身的宽高，布局，及显示或暗藏没有扭转，而只是扭转了元素的外观格调的时候，就会产生重绘。例如你扭转了元素的

background-color.... 因而得出了一个论断：回流必然触发重绘，而重绘不肯定触发回流

23. 解释下 http 和 https

https 协定须要到 CA 申请证书，个别收费证书较少，因此须要肯定费用。http 是超文本传输协定，信息是明文传输，https 则是具备安全性的 ssl/tls 加密传输协定。http 和 https 应用的是齐全不同的连贯形式，用的端口也不一样，前者是 80，后者是 443。http 的连贯很简略，是无状态的；HTTPS 协定是由 SSL/TLS+HTTP 协定构建的可进行加密传输、身份认证的网络协议，比 http 协定平安。

24.keep-alive

keep-alive 是什么？keep-alive 是一个形象组件：它本身不会渲染一个 DOM 元素，也不会呈现在父组件链中；应用 keep-alive 包裹动静组件时，会缓存不流动的组件实例，而不是销毁它们。什么中央用？有时候咱们不心愿组件被从新渲染影响应用体验；或者处于性能思考，防止多次重复渲染升高性能。而是心愿组件能够缓存下来, 维持以后的状态。这时候就能够用到 keep-alive 组件。keep-alive 的生命周期首次进入时：created > mounted > activated；退出后触发 deactivated 再次进入：会触发 activated；事件挂载的办法等，只执行一次的放在 mounted 中；组件每次进去执行的办法放在 activated 中

25. 异步和同步

同步异步，举个例子来说，一家餐厅吧来了 5 个客人，同步的意思就是说，来第一个点菜，点了个鱼，好，厨师去捉鱼杀鱼，过了半小时鱼好了给第一位客人，开始下位一位客人，就这样一个一个来，按程序来雷同，异步呢，异步的意思就是来第一位客人，点什么，点鱼，给它一个牌子，让他去一边等吧，下一位客人接着点菜，点完接着点让厨师做去吧，哪个的菜先好就先端进去

同步的长处是：同步是依照程序一个一个来，不会乱掉，更不会呈现下面代码没有执行完就执行上面的代码，毛病：是解析的速度没有异步的快；异步的长处是：异步是接取一个工作，间接给后盾，在接下一个工作，始终始终这样，谁的先读取完先执行谁的，毛病：没有程序，谁先读取完先执行谁的，会呈现下面的代码还没进去上面的就曾经进去了，会报错；

26.css 权重

第一优先级：无条件无限的属性只须要在属性前面应用！important。它会笼罩页面内任何地位定义的元素款式。IE6 不反对该属性。第二优先级：在 HTML 中给元素标签加 style，即内联款式。该办法会造成 CSS 难以治理，所以不举荐应用。第三优先级：有一个或多个 id 选择器来定义。例如，#id{margin：0} 会笼罩.classname{margin: 3px}

第四优先级：有一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:

3px} 会笼罩 div{margin: 6px}

第五优先级：有一个或多个类型选择器定义。如 div{margin: 6px} 笼罩 *{margin: 10px;}

第六优先级：通配选择器，如 *{margin: 6px;}

27.this 指向

1. 一般函数 ->window

2. 对象函数调用 -> 调用的这个对象

3. 构造函数 -> 新创建的这个对象

4. 箭头函数 -> 函数里面的环境

28.route router 区别

route 对象示意以后的路由信息，蕴含了以后 URL 解析失去的信息。蕴含以后的门路，参数，query 对象等

router 对象是全局路由的实例，用来更改路由

29.New 操作符具体干了什么？

1. 创立了一个空对象：并且 this 变量引入该对象，同时还继承了函数的原型

2. 设置原型链：空对象指向构造函数的原型对象

3. 执行函数体：批改构造函数 this 指针指向空对象，并执行函数体

4. 判断返回值：返回对象就用该对象，没有的话就创立一个对象

复制代码

总结

这次仓促的找工作历时两周，最终兜兜转转也拿到的了称心的薪资。不过如果条件容许的话，还是应该多面几家并且做好短缺的筹备，我这次就没反面试题啥的，全靠临场发挥，在面试中积攒教训。

记录这次面试，咱们明年再战哈哈