金九银十来了，各家大厂的岗位仍有少量空缺，奈何却招不到合适的人。身边的HR跟我说，最近面试者情况普遍不太理想。
一问到项目细节，很多候选人都支支吾吾，答不明白。接下来我作为一个工作了将近 3 年前端er来谈谈一名应届生应该如何去获得满意的 offer。
一、说起面试
在校招面试时，大家总会感觉心慌慌。可能是不自信，可能是感觉好多没准备好。没关系，既然投递了简历，又通过了筛选，就不要胆怯。首先要知道面试官都是抱着想把你招进来的想法的，只是想多了解你的具体情况。既然面试官愿意花时间和你聊，那么证明自己还是有实力的，有被看中的闪光点，那么有什么好心虚的呢，勇敢自信的面对就好了。
为了让大家在收到一家公司前端面试邀请之后，准备得更加充足，这里准备了一些高频和基础的前端面试题，希望可以帮助大家更加顺利完成求职，得到自己满意的offer。
最全前端面试真题汇总
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.函数式编程
☀️由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分面试题截图出来粗略的介绍，每个小节点里面都有更细化的内容！已经打包完毕！！
二、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 种方法？某种技术的实现原理？和什么什么相比有哪些优缺点？你对这项技术的思考是什么？
面试者的应对
1.就实际情况做回答，提前准备的时候多发散，多思考，多总结。这一块是可以自己准备的加分项。
2.发散性问题主要是看自己平时积累。首先基础知识要牢固，同时也要了解最新技术动态。面对这类问题切记也不能答非所问而跑题了。
五、我收集的面试题集
最后，再分享我耗时50天编写了1.8w字打造完成的前端面试笔记，凭借它最终成功入职大厂，已整理成了一份pdf，拿去不谢，资料是按目录进行编排，每一章下面都有更具体的内容：
HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，数据结构与算法，设计模式，项目等等共【350页】PDF。
资料截图：
爱分享·爱学习
以上面试都已打包，希望对大家学习有帮助！！！