面试者今年四年经验，在上海工作。
面试题来源：来分享面经了，4年经验的前端在上海金三银四遨游。
一面
1. 自我介绍
2. 继承
js中的继承有哪几种，现在最常用的继承是什么
7中继承模式
| 标题 | 优点 | 缺点 |
|---|---|---|
| 工厂模式 | 原型无法识别，因为所有的实例原型都指向同一个原型 | |
| 构造函数模式 | 可以识别原型 | 每次创建实例，每个方法都会被创建一次 |
| 原型模式 | 方法不需要重新创建 | 所有属性和方法共享；不能初始化参数 |
| 组合继承（最常用) | 该共享共享，该私有私有 | 分装性不够好 |
| 动态原型模式 | 只能往原型上添加方法，不能重写原型 | |
| 寄生构造函数模式 | 降低了调用父类构造函数开销 | |
| 稳妥构造函数模式 |
详细解答：JS继承的多种方式
Babel转换Class是转换成什么继承
balbel将Class转换成了组合继承的方式，方法会被放在原型里面。
更多详细内容：入门babel--实现一个es6的class转换器
3. BFC，为什么会用到，怎么才能实现BFC
BFC：block formatting context块级上下文，是web页面可视化css渲染的一部分，是块级盒子发生布局的区域，也是浮动元素与其他元素发生交互的区域
创建块格式上下问的方式
- 根元素（html）
- 浮动元素（float: left/right）
- 定位元素（postion: absolute/fixed）
- dispaly为以下值时，
display: inlne-block; // 行内块元素
display: table-cell; // HTML表格元素默认为该值
display: table-caption; // html表格标题默认为该值
display: table/table-row/table-row-group/table-header-group/table-footer-group; // 分别为table/row/tbody/thead/tfoot
display: flow-root;
display: flex/inline-flex; // 弹性元素
display: grid/inline-grind; // 网格元素
- overflow计算值不为visible的元素
- contain值为layout、content、paint元素
- 多列元素（元素column-counth或column-width不为auto）
- column-span为all的元素始终创建一个新的BFC
资料来源：MDN-块格式化上下文
4. call，apply，bind
call、apply、bind改变函数中this的指向。 区别在于：
- call和apply会直接执行函数，第一个参数为函数this的值
- apply值接受两个参数，第二个参数是数组，call可以接受多个参数，后面参数为函数的入参数
- bind是返回一个this固定指向的函数
注意点：
- 箭头函数虽然不能改变this的指向，但是是可以使用这三个函数的，三个函数传入的其他参数是生效的
- bind是无法改变构造函数中this的指向，当用new关键字执行构造函数时，this仍指向创建的对象
更多详细说明：JS this绑定 - bind、call、apply
5. 聊下vue的2.0和3.0有啥区别
-
执行顺序
v3中会先执行setup方法，在执行兼容v2的其他方法，比如data、computed、watch等，并在setup执行过重，无法访问data中定义属性，因为此时还未执行的到data方法 -
mount挂载
v2会使用挂在元素的outerHTML作为template，并替换挂载元素。
v3会使用挂载元素的innerHTML作为template，并且只替换挂载元素的子元素。 -
this.$el、reactive refs、template refs
v2可以在组建挂在之后通过this.$el访问组件根元素。 v3去掉this，并且支持Fragment，所以this.$el没有存在的意义，建议通过refs访问DOM -
V3中移除一些特性
- v3取消了KeyboardEvent.keyCode
- 移除on，off，$once方法
- 移除fliters
- 移除inline-template
- 生命周期函数变更
更多详细内容：vue 3.x跟2.x的其他差异
6. Vite是什么，你用过吗？他实现原理
vite是一种全新的前端构建工具。
vite利用浏览器原生的ES模块支持和用编译到原生的语言开发的工具（如esbuild）来提供一个快速且现在的开发体验。
更多详细内容：Vite 2.0 发布了！
7. webpack的处理流程，
更多详细内容：你不知道的webpack静态文件生成过程
8. 插件和loader有啥区别
loader 是文本加载器，能够加载资源文件，并对这些文件进行一些处理，如编译、压缩等，最终一起打包到指定的文件中，处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader先执行，第一个loader最后执行，第一个执行的laoder接受源文件作为参数，其他loader接受前一个执行的loader的返回值作为参数，最后执行的laoder会返回此模块的JS源码。
plugin功能更强大，laoder不能做的都是它做，它的功能更加丰富，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务
更多详细内容：webpack的loader和plugin的区别
9. ts如何转换成原生js
暂未找到答案，后面补充
二面
1. vue原理
【其实看到这个题的时候，我有点不知道面试官官问什么，暂且答案放vue模版编译原理吧】
更多详细内容：Vue模板编译原理
2. keep-alive是什么原理
是什么？
keep-alive是一个Vue全局组件，本身不会渲染出来，也不会出现在父组件链中。包裹动态组件时，会缓存不活动的组件，而不是销毁他们。
怎么用
keep-alive接受三个参数
- include：可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存
- exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会缓存
- max：可传数字，限制缓存组件的最大数量
keep-alive原理
- created：初始化了一个
cache、keys,前者用来存缓存组件的虚拟dom集合，后者用来缓存组件的key集合 - mounted：实时监听
include、exclude这两个的变化，并执行相应操作 - destroyed：删除掉所有缓存相关的东西。遍历集合，执行所有缓存组件的
$destroy方法，将cache对应的key的内容设置为null，删除keys对应的元素
render函数
- 获取包括的第一个组件以及组件名称
- 判断组件名称是否被白名单、黑名单匹配，如果
不能被白名单匹配 || 能被黑名单匹配，直接返回Vnode，不往下执行。如果不符合，往下执行 - 根据
组件ID、tag生成缓存key，并在缓存集合中查找是否已经缓存过改组件。如果已经缓存过，直接取出缓存组件，并更新缓存key在keys中的位置（LRU算法），没有缓存，继续下面 - 分别在cache、keys中保存此组件以及他的缓存key，并检查数量是否超过max，超过则根据LRU算法进行阐述
- 将词组件实例的keepAlive属性设置为为true
更多详细内容：简单讲一讲keep-alive的原理吧
3. webpack和rollup有啥区别
webpack对于代码分割和静态资源导入有着先天的优势，并且支持热模块替换（HMR）
rollup不支持（HMR），对于代码的Tree-shaking和ES6模块有着算法优势上的支持。如果我们项目只需要打包出一个简单的bundle包，并使基于ES6模块开发的，可以考虑使用Rollup。
总结一句话就是：开发应用时使用webpack，开发库时使用Rollup。
更多详细内容：Webpack vs Rollup
4. 模块打包生成什么module
现在最常用的就是commonjs和es module，分别打成两个
5. 开发模块的时候，如何判断用什么module文件
pkg.main对应于commonjs，pkg.module对应于esmodule
6. commonjs和esmodule的区别
CommonJS
- CommonJS可以动态加载语句，代码发生在运行时
- CommonJS混合到处，还是一种语法，只不过不用声明前面对象而已，当我们到处应用对象是之前的到处就背覆盖了
- CommonJs导出的值是拷贝，可以修改导出的值，这在代码出错时，不好排查引起的变量污染
ES Module
- 静态的，不可以动态加载语句，只能声明在改文件的最顶部，代码发生在编译时
- 混合到处，单个导出，默认导出，完全互不影响
- 到处时引用值存之前存在映射院系，并且值都是可读的，不能修改
更多详细内容：聊聊什么是CommonJs和Es Module及它们的区别
7. 前端监控
8. CSRF攻击
CSRF：跨站请求伪造。原理是攻击构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户在登录状态的话，后端可以是用户在操作，从而进行相应的逻辑。
如何防御：
- get请求不修改数据
- 不让第三方网站拿到cookie
- 阻止第三方网站请求地址
- 请求时附带验证信息，比如严重码或者Token
更多详细内容：安全防范知识点
9. 浏览器强缓存和协商缓存
浏览器会把网站上的图片和数据下载到本地，我们再次访问的时候，网站资源就会从本地加载出来，这就是缓存。
缓存的地方有四个：
- service worker
- memory cache
- dist cache
- push cache
缓存类型有2个
- 强缓存，如果命中强缓存，不会发送请求到服务端，直接获取缓存，code码为200
- 协商缓存，一般来说会同时设置强缓存和协商缓存，如果没有命中强缓存，就会发送请求到服务端，根据协商缓存策略，如果文件修改，返回资源，code码200，如果文件未修改，code码304，继续读取本地资源。
更多详细内容：浏览器缓存机制
最后
从面试题可以看出，面试的同学简历上大概率写了熟悉工程发，以及webpack等打包工作的使用。
这个面试的内容主要考察了vue以及其周边工具（webpack，vite）等的使用，JS考察相对较少。整体面试内容还是不错的
这个面试还是有很多可以扩展的部分，不要局限面试题本身，比如在keep-alive题中提到的LRU算法，可以写出来吗？这个也是leetcode上的一个题，大家可以去练习一下。
最后祝大家面试顺利都过，问的都会。如果大家觉得文章有用，帮忙点个赞呗。
