疫情影响下一枚前端菜鸟的求职之路（面试题）

前言

我在六月初裸辞，准备了一周，离开了青岛，踏上去往杭州的求职之路。之后经历了两周半的面试，终于找到了一家心仪的公司，在这里记录一下面试过程中遇到的面试题，大家仅供参考。
受疫情影响，今年的行情没有往年好，我也是年轻气盛，没有考虑这么多就直接裸辞了，在这里劝大家一定要找好下一家在辞职，不然压力会很大。
杭州这边面试流程会比较长，一面二面三面HR面，一二三面都是技术面，一面一般问的不是很难，都是基础题，大厂会问的比较深入一些。有的公司二面三面是一起的，一般是技术主管/总监面试，会根据你的简历上的内容问一些东西，所以不会的东西一定不要写在简历上，以免坑自己，二三面的问题会更加偏向于“为什么”，而不是“怎么做”，所以在平时要更加注重一些技术实现的原理。

面试题

css方面

1. 一个盒子如何做到水平垂直居中？出现频率：高！
2. css的一些选择器有哪些？
3. 说一下css的盒模型？出现频率：高！
4. px、em和rem的区别？
5. 你遇到的一些IE8的兼容性问题如何处理？因为我在简历上写了做过兼容IE8的项目。

js方面

1. js的数据类型有哪些？
   原始数据类型：Null、Undefined、Boolean、String、Number、Symbol(ES6新增)
   引用数据类型：Object 为引用类型，包括：Array, Function, Date, RegExp
2. 由上一个问题引出，如何判断数据类型？
   typeof和instanceof
3. 由上一个问题引出，typeof和instanceof的区别？null为什么会判断为Object？
   typeof和instanceof原理
   一句话回答：
   typeof原理： 不同的对象在底层都表示为二进制，在Javascript中二进制前（低）三位存储其类型信息。
   在Javascript中二进制前（低）三位都为0的话会被判断为Object类型，null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回"object"。
   instanceof：用来比较一个对象是否为某一个构造函数的实例。只能用于对象，不适用原始类型的值。
4. 如何判断一个数组？除了instanceof说出几种其他方式。
   toString、isArray、constructor
   在JavaScript中，如何判断数组是数组？
5. 说一下事件捕获和事件冒泡？出现频率：高！
   事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点。
   时间捕获：与事件冒泡相反
   如何阻止事件冒泡：stopPropagation()、preventDefault()、@click.xxx.stop
   你真的理解 事件冒泡 和 事件捕获 吗？
6. 防抖函数和节流函数，如何实现以及区别？出现频率：高！
   简单回答（入门级）：https://juejin.im/post/5b651dc15188251aa30c8669
   深入理解（进阶级）：https://juejin.im/post/5d1bf9edf265da1b7004c3e1
7. 一个页面从输入url到加载的全过程？出现频率：高！
   https://juejin.im/post/5bf3ad55f265da61682afc9b
   类似回答有很多，百度一下即可
8. 由问题7引出，说一下浏览器的缓存？出现频率：较高！
   强缓存和协商缓存
   强缓存规则：response headers 中的 Cache-Control，取值有，max-age（过期时间） 、 no-cache（不进行强缓存）、no-store （不强缓存，也不协商缓存）、private（仅浏览器可以缓存）、public（浏览器和代理服务器都可以缓存）
   协商缓存：
   ETag/If-None-Match：Etag就像一个指纹，资源变化都会导致ETag变化，跟最后修改时间没有关系，ETag可以保证每一个资源是唯一的。If-None-Match的header会将上次返回的Etag发送给服务器，询问该资源的Etag是否有更新，有变动就会发送新的资源回来
   Last-Modified/If-Modified-Since：Last-Modified 表示本地文件最后修改日期，浏览器会在request header加上If-Modified-Since（上次返回的Last-Modified的值），询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。
   协商缓存Last-modified/Etag没有过期时，服务端返回状态码304。
   浏览器缓存
9. 由问题7引出，说一下三次握手和四次挥手。
   很经典的问题，一般不会问的很深入
   面试官，不要再问我三次握手和四次挥手
10. http和https的区别？
    也是一个常规的问题，这个问题做过准备，但是我遇到的很少问。
11. js实现继承的方式？出现频率：必问！
    原型和原型链，老生常谈的问题了
    简单理解
    原型和原型链
    JavaScript实现继承的方式
12. 问题11一般会延伸一下，es6的继承。这个最好自己说出来，不要等面试官问。
    关于es6的问题，推荐阮一峰老师的《ECMAScript 6 入门教程》，网上有电子版的，实体书也有
    https://es6.ruanyifeng.com/
13. 闭包了解吗，详细说一下？出现频率：必问！
    对闭包的理解
    JavaScript 闭包
    JavaScript 闭包入门（译文）
    闭包也是比较经典的问题了，各种分析数不胜数
14. es6了解吗，说一下你用过哪些？出现频率：高！
    es6那本书里有
15. promise了解吗，详细说一下？出现频率：高！
    同上
16. 由promise引出Await/Async，说一下两者的区别？这个最好也是自己引出来。
    同上
17. 前端的安全问题了解过吗？csrf和xss，出现频率：较高！
    比较常见的是csrf和xss
    csrf：跨站请求伪造，如何防止：Referer、Token、服务端增加多重安全校验
    xss：跨站脚本攻击，如何防止：输入验证、定义域名白名单
    更加详细的解释：「前端食堂」想进大厂必须要知道的Web安全问题
18. 事件委托用过吗？
    同问题5
19. 由14引出，普通函数和箭头函数的区别？
    主要是this区别，如果能答出其他方面就更好了
    普通函数与箭头函数的区别
20. 为什么会产生跨域，如何解决？出现频率：必问！
    前端跨域方法论
    补充：如果只是为了解决开发环境的跨域，chrome插件也可以，这个比较冷门，看了很多博主的回答都没有提过
21. session和cookie的区别？
    Cookie 和 Session 关系和区别
22. javastring的垃圾回收机制了解吗？
    这个问题关联的知识点比较多，栈和堆、执行上下文、内存回收机制。如果只是回答这个问题，那就是：引用计数和标记清除，具体了解
    https://juejin.im/post/5dba7c24518825036974d707#heading-10
23. eventLoop事件环。一般不会直接问，而是通过一些代码的执行顺序问，这个也比较重要。
    带你彻底弄懂Event Loop
    是不是感觉自己理解了，来几道题测试一下
    【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)
24. BFC知道吗？
    学习 BFC (Block Formatting Context)
    前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？
25. 对于http请求有了解过嘛？常见的状态码都有那些？如果接下来问缓存，还会问强制缓存和协商缓存返回的状态码。
    答一下get请求和post请求以及区别，还会问你做没做过一些请求的封装，按照实际情况回答，如果没做过的话，先去了解下。状态码2xx、3xx、4xx、5xx
    具有代表性的 HTTP 状态码
26. 浏览器的回流和重绘了解过吗？如何避免？
    你真的了解回流和重绘吗
27. 深拷贝知道吗？说一下具体实现？
    浅拷贝比较简单，使用Object.assign，对于二维数组的深拷贝可以使用JSON.parse(JSON.stringify(arr))
    那更加复杂的对象的深拷贝呢：
    自己来实现一个深拷贝函数
    深拷贝的终极探索
28. 图片懒加载原理是什么？
    比较简单，图片懒加载原理

Vue方面

1. vue的生命周期说一下？出现频率：必问！
   Vue 的生命周期指的是组件从创建到销毁的一系列的过程，被称为 Vue 的生命周期，包括初始化–挂载–更新–销毁过程，对应的钩子函数：
   beforeCreate（初始化界面前）
   created（初始化界面后）
   beforeMount（挂载前）
   mounted（挂载后）
   beforeUpdate（更新数据前）
   updated（更新数据后）
   beforeDestroy（卸载组件前）
   destroyed（卸载组件后）
2. 在哪个阶段可以获取到Dom？
   mounted
3. vue组件间的通讯方式有哪些？父子、隔代、兄弟组件通信。出现频率：必问！
   props 和 $emit、$parent 和 $children、vuex等等，更加详细的回答：
   vue组件间的通讯方式总结
4. vue中常见的指令有哪些？出现频率：较高！
   v-if v-show v-bind v-for v-html v-text v-on v-model v-cloak
5. 由问题4引出，v-if和v-show的区别？
   官网有解答，其实大部分问题官网都有，所以说回归官网文档很重要，
   v-if vs v-show
6. 谈谈你对vuex的理解？出现频率：必问！
   Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
   （1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
   （2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
   主要包括以下几个模块：
   State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
   Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
   Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
   Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
   Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
   其实这种问题只要用过不难回到。
7. vue的双向数据绑定原理？出现频率：必问！
   通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
   Vue双向数据绑定原理（分析与代码）
8. 一般由上一个问题引出，vue3.0的数据绑定了解过吗？然后继续问，vue3.0和2.x的区别？出现频率：较高！
   vue3.0 的响应式数据是通过es6 的Proxy来实现的
   解析Vue2.0和3.0的响应式原理和异同(带源码)
   vue2.0响应式到vue3.0响应式原理
9. MVVM是什么？出现频率：较高！这个问题一般是第一个问的。
   即Model-View-ViewModel
   M - Model，Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
   V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来
   VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View
10. computed和watch区别？
    computed：计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算，computed是同步的
    watch：更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。
11. 由问题3引出，父组件到子组件所触发的生命周期？
    组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
    组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
    加载渲染过程
    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
    子组件更新过程
    父beforeUpdate->子beforeUpdate->子updated->父updated
    父组件更新过程
    父 beforeUpdate -> 父 updated
    销毁过程
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
12. webpack使用过吗？说一下一个具体的例子？
    这个回答的不是很好，有没有大神可以补充一下
13. vue-router使用过吗？说一下hash和history模式区别？出现频率：高！
    url 展示上，hash 模式有“#”，history 模式没有
    刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由。
    兼容性。hash 可以支持低版本浏览器和 IE。
14. 说一下vue-router的路由守卫？
    beforeEach和afterEach，说了一下我在实际开发中的应用，导航守卫
15. history模式需要后端配置一下，不然会404，知道为什么吗？
    Vue Router history模式的配置方法及其原理
16. 说一下vue-router懒加载的实现？
    写法：路由懒加载
    使用懒加载的优点： vue是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验。
17. 做过项目的优化吗？具体说一下如何优化的？出现频率：高！
    首屏优化：提升90%加载速度——vuecli下的首屏性能优化
    性能优化：Vue 项目性能优化 — 实践指南（网上最全 / 详细）
    挑选你做过或者比较熟悉的几点回答即可，回答的越多越好
18. diff算法的理解？为什么要生成虚拟dom？虚拟dom和真实dom的差别？出现频率：高！！
    浅入浅出图解domDIff
    Vue中的虚拟DOM及diff算法
19. vue如何实现自定义指令？
    代码实现的问题，不多做解释，看官网即可
20. vue和react的区别？因为我的简历上写了了解react，所以会问这个问题。
    react使用的比较少，只回答了函数时编程、jsx，感觉回答得不太好，等待补充。。。
21. nextTick知道吗？出现频率：高！
    在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
    Vue中$nextTick源码解析

写在最后

推荐一下优秀的面经：
霖呆呆的近期面试128题汇总(含超详细答案) | 掘金技术征文
2万字 | 前端基础拾遗90问-写代码像蔡徐抻
面试分享：两年工作经验成功面试阿里P6总结-子弈
「面试题」20+Vue面试题整理-童欧巴