背景

“

记一下近大半个月的面试，后面继续补充内容跟答案

先放个图放松一下

html篇

1.html5新特性有哪些？

答：HTML5 API盘点

css篇

1.css盒子模型？

答：盒子模型分为两种：IE盒子模型，标准盒子模型。 IE盒子模型 box-sizing:border-box;他的宽高为border+padding+content。 标准盒子模型：box-sizing:content-box;；他的宽高就是content的宽高。

2.什么BFC？BFC可以怎么玩？

答：全称：block format context（块级格式化上下文）。是一个独立不干扰外界也不受外界干扰的盒子。 创建bfc的常用方式有：position：absolute;display:inline-block;float:left/right;overflow:hidden; BFC布局规则： 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 4.BFC的区域不会与float box重叠。 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 6.计算BFC的高度时，浮动元素也参与计算。

3.水平垂直居中方法？

答：比较多，可以自行百度

4.说一下css3 伪元素？其他的css3特性？

5.说一下css3动画吧？

答：链接同上

6.说一下css3选择器？

答：链接同上

js篇

1.说一下什么是事件委托？事件冒泡？事件捕获？为什么浏览器有两种事件机制？

答：浏览器为什么有两种事件机制，是因为各个浏览器的差异问题，在IE使用的是事件冒泡，其他浏览器则是事件捕获。

2.改变this指向的问题？bind，call，apply的区别。bind，call，apply是放在哪个原型链上的？为什么

答：bind，apply，call是放在Function.prototype上

3.说一下addEventListener？

答：第三个参数是默认事件在冒泡阶段执行，默认为false，true则为在捕获阶段执行。

4.说一下promise？口述一下怎么实现一个promise？promise的其他api

5.说一下let，const，var的区别

6.谈一下闭包吧?

答：我的理解是在外层函数内部通过return 一个内层函数将外层函数内部的执行上下文保存到外部引用。tips：无论何时声明新函数并将其赋值给变量，都要存储函数定义和闭包，闭包包含在函数创建时作用域中的所有变量，类似于背包，函数定义附带一个小背包，包里存储了函数定义创建时作用域中的所有变量。

7.谈一下继承都有哪些？寄生组合继承的实现？

8.谈一下event loop吧？

9.谈一下原型链的问题？

10.谈一下数组去重问题？

11.谈一下怎么判断是数组？

答：常用的 1. arr instanceof Array 2.Object.prototype.toString.call(arr) 3.Array.isArray(arr)

12.谈一下js数据类型？

答：基本类型：

1. string（字符串）
2. boolean（布尔值）
3. number（数字）
4. symbol（符号）
5. null（空值）
6. undefined（未定义）

tips：

1. string 、number 、boolean 和 null undefined 这五种类型统称为原始类型（Primitive），表示不能再细分下去的基本类型;
2. symbol是ES6中新增的数据类型，symbol 表示独一无二的值，通过 Symbol 函数调用生成，由于生成的 symbol 值为原始类型，所以 Symbol 函数不能使用new 调用；
3. null 和 undefined 通常被认为是特殊值，这两种类型的值唯一，就是其本身。

引用类型：Object

13.谈一下可以改变数组的方法？他们的区别？

14.谈一下防抖节流？怎么实现？

答：JS的防抖与节流

vue篇

1.谈一下vue的双向绑定原理?

答：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

借个图（来自书籍 深入浅出Vue.js）：

2.谈一下computed和watch的区别？

答：

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：1.当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

2.当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

3.谈一下vue的生命周期吧？

答：借图

4.谈一下vue相当于原生js的好处有哪些？vue的特点？

答：可根据个人情况简述。

1.数据双向绑定2.虚拟dom3.组件化系统4.vue生态5.市场

MVVM 是 Model-View-ViewModel 的缩写 Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为 View: 用户操作界面。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View ViewModel： 业务逻辑层，View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View. 总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

5.谈一下vue的编译原理？

答：

解析器（parser）的作用是将 模板字符串 转换成 element ASTs。

优化器（optimizer）的作用是找出那些静态节点和静态根节点并打上标记。

代码生成器（code generator）的作用是使用 element ASTs 生成 render函数代码（generate render function code from element ASTs）。

解析器（parser）的原理是一小段一小段的去截取字符串，然后维护一个 stack 用来保存DOM深度，每截取到一段标签的开始就 push 到 stack 中，当所有字符串都截取完之后也就解析出了一个完整的 AST。

优化器（optimizer）的原理是用递归的方式将所有节点打标记，表示是否是一个 静态节点，然后再次递归一遍把 静态根节点 也标记出来。

代码生成器（code generator）的原理也是通过递归去拼一个函数执行代码的字符串，递归的过程根据不同的节点类型调用不同的生成方法，如果发现是一颗元素节点就拼一个_c(tagName, data, children) 的函数调用字符串，然后 data 和 children 也是使用 AST 中的属性去拼字符串。最后拼出一个完整的 render 函数代码。

借图（easyhappy vue模板编译原理）：

6.谈一下vue的keep-alive的api？

答：keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：

1.一般结合路由和动态组件一起使用，用于缓存组件；

2.提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹 配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

3.对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

7.谈一下vue的路由模式有哪些？

答：

8.谈一下vue的一些路由守卫？

答：

9.谈一下vue的一些常用语法糖，v-model是怎么实现的？v-for v-if是哪个优先？

答：

10.谈一下vue的组件通信方式有哪些？

答：

11.谈一下为什么直接给数组下标赋值监听不到变化？怎么解决?

答：

12.一般在哪个生命周期里请求接口？

答：

13.vue的虚拟dom的原理？

答：

14.谈一下vue里面key的作用？

答：

15.谈一下vue项目的优化？

答：

16.谈一下你在项目里做了哪些比较有成就感的东西？

答：

17.谈一下vue的mixin？自己封装过组件吗？封装组件要考虑哪些东西？让你封装一个分页组件你怎么设计？

答：

18.手写一个eventbus吧？

答：

19.谈一下watch的两个api？实现原理呢？

答：

其他

1.谈一下http协议？https和http的区别？

答：

2.谈一下TCP/IP？谈一下SSL/TLS？握手过程？

答：面试官，不要再问我三次握手和四次挥手

3.谈一下XSS攻击?CSRF攻击呢？怎么防范？

4.谈一下cookie？cookie是怎么拼接的？

答：是用; 来拼接

5.谈一下cookie，session的区别

答：

6.谈一下请求头里面有什么?

答：

7.谈一下缓存？强缓存，协商缓存？

答：

8.谈一下常用的状态码？

答：

9.谈一下数字证书？https加密过程？先对称加密还是先非对称加密？

答：先非对称加密，后对称加密

10.谈一下http2.0的一些特点

答：

11.谈一下从输入url到页面渲染发生了什么？

答：这里可以贴个很厉害的人的总结！

从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

12.谈一下跨域吧？

答：前端常见跨域解决方案（全）

13.谈一下webpack里面loader，plugins是什么?

答：

14.谈一下想打包成兼容性很好的代码应该怎么做？

答：

15.谈一下你项目中使用webpack做了哪些优化？

答：

16.谈一下webpack的自动化路由？

答：

17.谈一下webpack的基本配置参数？

答：

18.了解ts吗？谈一下ts的type和interface的区别？enum是什么？编译成es5会是什么样？

答：

19.react看你用过，和vue觉得有哪些区别？优劣？

答：

20.react生命周期？react页面渲染原理？react里的setState原理，是同步还是异步？

答：

21.什么是函数式组件？react hooks和class写法的区别？

答：

22.useEffect是干什么的？详细介绍一下？

答：

23.说一下设计模式吧？平常用到哪些设计模式？

答：不打广告，可以买一下修言大佬的小册，写的好

24.谈谈项目性能优化？你刚刚提到了减少http请求是怎么一个方法？什么情况拆分请求，什么情况下合并请求？

答：

25.谈一下了解数据结构吗？常见算法题？

26.了解过自动化部署吗？

答：

27.了解websocket吗？

答：

28.了解过webworker吗？他的原理是什么？

答：

总结：

面试也是总结的过程，也是对自己知识的梳理，通过面试进行查漏补缺，对自己的知识水平有一个认知，向大厂靠近。

由于本人技术能力所限，如果相关错误请及时与我联系修改，谢谢！

本文使用 mdnice 排版