前端开发应该如何准备面试
一眨眼又到年底了，每到这个时候，我们都会慢慢反思，这一年都做了什么？有什么进步？年初的计划都实现了吗？明年年初有跳槽的底气了吗？
况且2020年我们经历了新冠疫情的洗礼，很多程序员都经历了失业，找工作的恐慌。导致今年的互联网环境太差，需要自己有足够的知识储备，才能够应对这凌冽的寒风。
下面一起来看看面试要如何准备，大家可以参考参考提前准备好面试。
一，简历：
简历是到公司面试的敲门砖，如果无法通过的第一步简历筛选，就没有后面的事了。
所以简历一定要写好，千万不要出现错别字或者语句不通的地方，特别是别把专业名词写错了。
如果有条件，可以找老师或者同学帮你看看简历，力求第一印象良好。
二，技术基础知识
基础知识一直都是重点考察的内容，包含有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）栈和堆的区别？
（8）......
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对象方法？
（6）......
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）跨域通信的几种方式？
（4）......
14）ajax
（1）ajax请求的原理，手写一个ajax请求？
（2）readyState？
（3）ajax异步与同步的区别？
（4）......
15）......
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）......
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()方法
（5）......
8）......
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 中的路由？
（4）......
因为篇幅有限，面试题没有全部列出，所有的面试题包括HTML面试题总结，CSS面试题总结，JavaScript面试题总结，Vue面试题总结，React面试题总结等等面试题都有整理成PDF文档，有需要的伙伴可以点击这里，免费领取！！！
三，项目经验
面试中，项目经验非常重要，是作为能力评估的重要参考标准。对于基础知识的面试，项目经验面试更要考察你的实际开发能力，需要能讲出自己的实战理解和给出具体的实现方案。
一般都会问到一些技术上的实现技巧，可能会让你用代码来实现，一般说清楚思路就可以了，也可以写伪代码来体现。一般能表述清楚，评价不会太低。
会考察的问题包括但不限于：
项目开发流程、技术架构、说说做的比较好的项目、你在项目中担任的角色、项目中的收获、项目两点、项目中遇到的难点、简历中罗列的技术栈你是怎么理解的，如果让你运用实现你怎么做、组件设计和实现、兼容性问题、底层原理、性能优化、工程化、前端学习规划、算法
最后总结：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
