这段时间一直在面试，通过面试也发现了自己的不足。
所以我总结一下面试会遇到什么知识。
但是，这次我不想把问题和答案一起放出来。
我会只放问题，答案需要看官们自己去找，自己去思考。这样记忆的才深刻。
**开始的开始。请给一个赞，鼓励一下累死在键盘上的我。这很重要**
最全前端面试真题汇总
一：CSS面试题
1.盒模型
2.如何让一个盒子水平垂直居中？
3.css 优先级确定
4.解释下浮动和它的工作原理，清除浮动的方法？
5.CSS隐藏元素的几种方法
6.如何实现浏览器内多个标签页之间的通信?
7.简要说一下CSS的元素分类
8.link @import 导入 css
9.画三角形
10.BFC（Block Formatting Context） 是什么？应用？
二：JavaScript基础面试题
1.栈和堆的区别？
2.Javascript实现继承的几种方式？
3.Javascript创建对象的几种方式？
4.Javascript作用链域
5.什么是闭包（closure），为什么要用它？
6. javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
7.深拷贝和浅拷贝
8.JS延迟加载的方式有哪些？
9.什么是跨域问题 ，如何解决跨域问题?
10.模块化开发怎么做？
11.DOM操作
12.什么是Cookie 隔离？
13.响应事件
14.flash和js通过什么类如何交互?
15.JS垃圾回收机制？
三：Vue框架面试题
1.对于MVVM的理解？
2.Vue的生命周期
3.Vue组件间的参数传递
4.Vue实现数据双向绑定的原理
5.Vue的路由实现：hash模式 和 history模式
6.vue路由的钩子函数
7.请问 v-if 和 v-show 有什么区别？
8.对于Vue是一套渐进式框架的理解
9.Vue 组件间通信有哪几种方式？
10.vue中子组件调用父组件的方法
11.怎么定义vue-router的动态路由？怎么获取传过来的值？
12.请介绍一下你对vue-router的理解？
13.vue-router有哪几种路由守卫?
14.vuex有哪几种属性？
15.vuex的State特性是？
16.vue-cli如何新增自定义指令？
17.vue等单页面应用及其优缺点
四：浏览器面试题
1.跨标签页通讯
2.浏览器架构
3.浏览器下事件循环(Event Loop)
4.从输入 url 到展示的过程
5.重绘与回流
6.存储
7.Web Worker
8.V8 垃圾回收机制
9.内存泄露
五：服务端与网络
1.http/https 协议
2.常见状态码
3.get/ post
4.Websocket
5.TCP 三次握手
6.TCP 四次挥手
7.Node 的 Event Loop: 6 个阶段
8.跨域
9.安全
六：Webpack 相关
1.原理简述
2.Loader
3.Plugin
4.编译优化
七：算法
1.五大算法
2.基础排序算法
3.高级排序算法
4.递归运用(斐波那契数列)： 爬楼梯问题
5.数据树
6.天平找次品
八：进阶知识
React框架
1.Fiber
2.生命周期
3.setState
4.HOC(高阶组件)
5.Redux
6.React Hooks
7.SSR 服务端渲染
8.函数式编程
面试中你要明白的事情：
一：STAR法则
在写简历和面试过程中，都需要描述工作经验或个人经历。优秀的面试者往往会用 STAR 法则来建立个人事件，让面试官可以更好地通过你过去的经历来判断你的个人能力和潜质。
STAR 法则四要素：
Situation：场景 - 当时是怎样的场景；
Task：任务 - 当时的任务是什么；
Action：我采取了怎样的行动；
Result：达到了什么样的结果。
往往大部分同学一上来就直接介绍做了什么以及实现的过程，条理也比较清晰，内容也颇具技术含量。但很多同学很容易忽略了 Situation 和 Result 的部分也就是背景和结果。或者是在面试官进一步了解追问细节的时候容易惊慌失措。这些原因往往都是由于面试前对自己的经历没有将来龙去脉讲清楚以及总结不够全面和深入。
举个例子：比如有的同学提到了在 XXX 项目过程中实现了一个 Webpack 插件 XXX，这个插件的功能是 XXXX 并且在 Github 上开源了。整个实现过程和思路都比较清晰，面试官听的也是饶有兴致，甚至回想起年轻时某个夜晚加班研究 Webpack 插件的青涩时光。
尽管这样面试官也同样希望了解当时项目的背景，是什么原因导致你要想到通过做 Webpack 插件来解决而不是通过其他工具，以及这个插件给项目带来了怎样的价值（是构建性能还是其他？）。背景和结果是面试官非常看重的一部分，必须拿出足够的理由和价值来说服面试官，否则尽管你在这个项目投入了足够的精力但最终并没有为你的面试评价加分，这是十分可惜的。
这时候有的同学也会想：我的项目只是个人/学校的练手项目，对于项目结果我想不到非常有吸引眼球的价值。那么这个时候你不妨说一下你在项目中学到内容，比如在这个 Webpack 插件例子中，就可以说一下：
Compiler 和 Compilation 以及它们的区别；
Webpack 是通过什么方式实现了插件之间的关系以及保证它们的有序性；
开发插件时需要依据当前配置是否使用了某个其他的插件而做下一步决定，如何判断 Webpack 当前使用了哪些插件；
开发插件过程中借鉴了其他插件的思路，我对这个插件源码的理解；
等等等等。
以上的在实际开发 Webpack 插件过程中大部分都会遇到，这些问题如果你有记录和总结也能作为 Result。
二：面试场景题
举一个例子，比如考察候选人是否聪明，star 法则会这样询问：
1.在刚才的项目中，你提到了公司业务发展很快，人手不够，你是如何应对的呢？
2.在你的项目里面解决了什么样的难题
3.在你的项目里面如何做的登录
4.前端的项目如何进行优化，移动端呢？
5.图片加载失败要做啥
6.让你带领一个小团队完成一个项目，你会怎么做？
7.项目的同源处理，跨域相关
8.如果再做这个项目，你会在哪些方面进行改善？
面试中，如果面试官让你描述一个自己比较得意的项目的时候，一定记得要遵循 STAR 法则进行回答。比如为了整合 xxx 业务(S)，我承担 xxx 角色，具体负责 xxx (T)。做了 xxx 事情(A)，最后产生了 xxx 结果
然后在描述项目亮点的时候也一样，比如
由于项目 xxx 原因(S)，我需要进行 xxx 改进(T)，然后进行了 xxx 处理(A)，最后产出了 xxx 结果，数据对比为 xxx。
整体这样下来，会显得你很有思考力，且具有行动力，可以给企业创造出价值，这也是面试官评定候选人最关键的指标之一。
三：总结一下面试官的套路
面试时所问的问题基本分为两种：具象的问题和开放性的问题。
具象的问题基本都会参考工作经验按照 STAR 法则来进行，主要是了解基本的素养，技术深度和潜力。
开放性的问题基本是考察思维发散能力，考察在某个领域的深度和广度，基本上会结合技术问题来问，或者是结合工作内容来问。
比如：实现某种技术的 n 种方法？某种技术的实现原理？
