前端应届生如何做一个职业规划？BAT大厂面试总结

01 前言

---

2021是不平凡的一年，这一年里发生许多事情，大家也都知道。对于互联网行业来说也是一次重大的打击，也有一些企业在这次疫情中倒闭了，所以可能对于今年2021年毕业的同学来说是一次很大的考验，也关乎我们的前途。

今年的面试基本上都不会线下面试，都是采取线上电话/视频的形式来进行，今天我就总结一下，分享一下自己所遇到的一些面试题，希望大家在这次春招中能够拿到满意的offer！毕竟自己当初也是看了很多师兄姐的面经，算是一个回馈社区。共勉！

二.技术基础知识

基础知识一直都是重点考察的内容，包含有HTML（5）、CSS（3）、JavaScript到Vue，React等等所有可能考察的知识。

基础知识不仅仅要知道是什么，更要明白怎么用，为什么这么用。死记硬背能应付一时，如果你遇到了想深入聊聊的面试官，死记硬背就没用了。所以每个知识点都要理解透彻，讲的清楚。

每次面试都要提前做好准备，下面是一些常考的面试知识点，大家可以提前准备

HTML(5)：

1）H5的新特性有哪些？
2）Label的作用是什么？是怎么用的？
3）HTML5的form如何关闭自动完成功能
4）实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果
5）title与h1的区别、b与strong的区别、i与em的区别？
6）每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
7）img的alt与title有何异同？ strong与em的异同？
8）简述一下src与href的区别？
9）知道的网页制作会用到的图片格式有哪些？
10）你如何理解HTML结构的语义化？
11）html5有哪些新特性、移除了那些元素？
12）如何处理HTML5新标签的浏览器兼容问题
13）…

CSS:

1）css盒模型
（1）css盒模型基本概念？
（2）标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？
（3）js如何设置获取盒模型对应的宽和高？
（4）…
2）BFC（边距重叠解决方案）
（1）BFC的基本概念？
（2）BFC原理/ BFC渲染规则？
（3）如何创建BFC？
（4）BFC的使用场景？
3）css浮动
（1）css浮动原理？
（2）浮动元素引起的问题？
（3）css清除浮动的方法？
4）css经典布局
（1）三栏布局：左右各300px,中间自适应？
（2）圣杯布局
（3）双飞翼布局
（4）css水平、垂直居中的写法，请至少写出4种？
5）css兼容
（1）经常遇到的css兼容性的问题在哪些？如何解决的？
6）css hack
（1）什么是CSS hack？
（2）CSS hack的原理？
（3）CSS hack分类？
（4）CSS hack书写顺序？
7）…

因为篇幅有限，面试题没有全部列出，所有的面试题包括HTML面试题总结，CSS面试题总结，JavaScript面试题总结，Vue面试题总结，React面试题总结等等面试题都有整理成PDF文档，有需要的伙伴可以看文末，免费领取！

JavaScript：

1）原型链
（1）创建对象有几种方法？
（2）instanceof的原理？
2）类
（1）类的声明？
（2）,生成实例？声明一个类，怎么生成类的实例？
3）继承
（1）call、apply的共同点与区别?
（2）用javascript实现对象的继承/ 继承的几种方式，这几种方式的优缺点?
4）作用域
（1）说说你对作用域链的理解？
（2）this？
（3）…
5）闭包
（1）闭包的特征？
（2）闭包应用场景？
（3）实际开发中闭包的应用？
（4）…
6）运行机制/ 单线程/ 异步
（1）如何理解js的单线程？
（2）js为什么是单线程的？
（3）同步和异步的区别是什么？分别举一个同步和异步的例子？
（4）何时需要异步？
（5）什么是任务队列？
（6）栈和队列的区别？
（7）栈和堆的区别？
7）数据类型
（1）js使用typeof能得到的哪些类型？
（2）如何准确判断一个变量是数组类型？
（3）js变量按照存储方式区分为哪些类型，并描述其特点？
（4）null和undefined的区别？
（5）undefined的典型用法？
（6）null的典型用法？
（7）…
8）内置函数/内置对象
（1）js中有哪些内置函数/ 数据封装类对象？
（2）js中有哪些内置对象？
（3）js变量按照存储方式区分为哪些类型，并描述其特点？
（4）字符串方法/ String对象方法?
（5）数组方法/ Array对象方法？
9）数组去重
（1）数组怎么去重？（方法）
（2）对上述数组去重方法速度比较？（性能）
（3）一句话数组去重？
（4）保留数组中非重复元素？
10）逻辑判断
11）内存泄漏
（1）哪些操作会造成内存泄漏？
（2）js内存泄漏的解决方式
12）dom
（1）dom是哪种基本的数据结构？
（2）dom操作的常用api有哪些？
（3）dom节点的attribute和property有何区别？
（4）dom结构操作/ 怎样添加、移除、移动、复制、创建和查找节点/ dom操作的
（5）常用api？
（6）dom事件的级别？
（7）dom事件模型？
（8）dom事件流？
（9）…
13）通信
（1）什么是同源策略及限制？
（2）前后端如何通信？
（3）跨域通信的几种方式？
14）ajax
（1）ajax请求的原理，手写一个ajax请求？
（2）readyState？
（3）ajax异步与同步的区别？

Vue:

1）vue-cli工程
（1）构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？
（2）vue-cli 工程常用的 npm 命令有哪些？
（3）请说出vue-cli工程中每个文件夹和文件的用处
（4）config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
（5）请你详细介绍一些 package.json 里面的配置
2）vue核心知识点
（1）对于Vue是一套渐进式框架的理解
（2）vue.js的两个核心是什么？
（3）请问 v-if 和 v-show 有什么区别
（4）vue常用的修饰符
（5）v-on可以监听多个方法吗？
（6）vue中 key 值的作用
（7）vue事件中如何使用event对象？
（8）$nextTick的使用
（9）Vue 组件中 data 为什么必须是函数
（10）v-for 与 v-if 的优先级
（11）vue中子组件调用父组件的方法
（12）vue中 keep-alive 组件的作用
（13）什么是vue生命周期？
（14）vue生命周期钩子函数有哪些？
（15）vue如何监听键盘事件中的按键？
（16）vue更新数组时触发视图更新的方法
（17）解决非工程化项目初始化页面闪动问题
（18）v-model语法糖的组件中的使用
（19）…
3）vue-router
（1）vue-router如何响应 路由参数 的变化？
（2）完整的 vue-router 导航解析流程
（3）vue-router有哪几种导航钩子（ 导航守卫 ）？
（4）vue-router传递参数的几种方式
（5）…
4）vuex
（1）什么是vuex？
（2）使用vuex的核心概念
（3）vuex在vue-cli中的使用
（4）在vue中使用vuex，修改state的值
5）http请求
（1）Promise对象是什么？
（2）axios、fetch与ajax有什么区别？
（3）…
6）UI样式
（1） .vue组件的scoped属性 的作用
（2）如何让CSS只在当前组件中起作用？
（3）vue中常用的UI组件库
（4）如何适配移动端？【 经典 】
（5）…
7）MVVM设计模式
（1）MVC、MVP与MVVM模式
（2）MVP
（3）MVVM的实现原理
（4）Object.defineProperty()方法

React

1）基本知识
（1）什么是React？
（2）React有什么特点？
（3）列出React的一些主要优点。
（4）React有哪些限制？
（5）什么是JSX？
（6）…
2）React 组件
（1）你理解“在React中，一切都是组件”这句话。
（2）解释 React 中 render() 的目的。
（3）如何将两个或多个组件嵌入到一个组件中？
（4） React中的状态是什么？它是如何使用的？
（5）区分状态和 props
（6）如何更新组件的状态？
（7）React 中的箭头函数是什么？怎么用？
（8）区分有状态和无状态组件。
（9）React组件生命周期的阶段是什么？
（10）详细解释 React 组件的生命周期方法。
（11）React中的事件是什么？
（12）如何在React中创建一个事件？
（13）React中的合成事件是什么？
（14）你对 React 的 refs 有什么了解？
（15）…
3）React Redux
（1）MVC框架的主要问题是什么？
（2） 解释一下 Flux
（3）什么是Redux？
（4）Redux遵循的三个原则是什么？
（5）列出 Redux 的组件
（6）…
4）React 路由
（1）什么是React 路由？
（2）为什么React Router v4中使用 switch 关键字 ？
（3）为什么需要 React 中的路由？

因为篇幅有限，面试题没有全部列出，所有的面试题包括HTML面试题总结，CSS面试题总结，JavaScript面试题总结，Vue面试题总结，React面试题总结等等面试题都有整理成PDF文档，有需要的伙伴可以看文末，免费领取！！！

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里免费获取

这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

资料领取方式：戳这里免费获取