背景

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

先放个图放松一下html

html篇

1.html5新特性有哪些？

css篇

1.css盒子模型？

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

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的高度时，浮动元素也参与计算。html5

3.水平垂直居中方法？

答：比较多，能够自行百度react

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

答：before，after CSS3 特性建议看一遍，深究的话看公司需求。webpack

5.说一下css3动画吧？

答：连接同上css3

6.说一下css3选择器？

答：连接同上web

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

答：Promise

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

答：let,const,var区别

6.谈一下闭包吧?

答：个人理解是在外层函数内部经过return 一个内层函数将外层函数内部的执行上下文保存到外部引用。tips：不管什么时候声明新函数并将其赋值给变量，都要存储函数定义和闭包，闭包包含在函数建立时做用域中的全部变量，相似于背包，函数定义附带一个小背包，包里存储了函数定义建立时做用域中的全部变量。

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

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

12.谈一下js数据类型？

答：基本类型：

string（字符串）
boolean（布尔值）
number（数字）
symbol（符号）
null（空值）
undefined（未定义）

tips：

string 、number 、boolean 和 null undefined 这五种类型统称为原始类型（Primitive），表示不能再细分下去的基本类型;
symbol是ES6中新增的数据类型，symbol 表示独一无二的值，经过 Symbol 函数调用生成，因为生成的 symbol 值为原始类型，因此 Symbol 函数不能使用new 调用；
null 和 undefined 一般被认为是特殊值，这两种类型的值惟一，就是其自己。

引用类型：Object

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

答：【干货】js 数组详细操做方法及解析合集

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攻击呢？怎么防范？

答：【面试篇】寒冬求职之你必需要懂的Web安全

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 排版

面试半个月，我写下了这些总结

背景