前端开发应该如何准备面试

约定不等于承诺〃 2023-01-09 14:27 182阅读 0赞

一眨眼又到年底了，每到这个时候，我们都会慢慢反思，这一年都做了什么？有什么进步？年初的计划都实现了吗？明年年初有跳槽的底气了吗？

况且2020年我们经历了新冠疫情的洗礼，很多程序员都经历了失业，找工作的恐慌。导致今年的互联网环境太差，需要自己有足够的知识储备，才能够应对这凌冽的寒风。

下面一起来看看面试要如何准备，大家可以参考参考提前准备好面试。

![816346c37e4b7bdac81906d3244b7cd3.png][]

### 一，简历： ###

简历是到公司面试的敲门砖，如果无法通过的第一步简历筛选，就没有后面的事了。  
所以简历一定要写好，千万不要出现错别字或者语句不通的地方，特别是别把专业名词写错了。  
如果有条件，可以找老师或者同学帮你看看简历，力求第一印象良好。

### 二，技术基础知识 ###

基础知识一直都是重点考察的内容，包含有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）**…**  
![3d165f97a55f2901deabca4ecc86839e.png][]

#### 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）**…**  
![f5deb8f0fd8b5e535b5e5387751f9624.png][]

> 因为篇幅有限，面试题没有全部列出，所有的面试题**包括HTML面试题总结，CSS面试题总结，JavaScript面试题总结，Vue面试题总结，React面试题总结等等**面试题都有整理成PDF文档，有需要的伙伴可以[点击这里][Link 1]，**免费领取**！！！

#### 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）…**  
![acc4d7642d3d36f5b6c4758eb87b0271.png][]

#### 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）…**  
![61b4b52e726bf704a28a37979c93c9e4.png][]

#### 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）**…**  
![02b255cdec939f34bef4d3245be6b72e.png][]

### 三，项目经验 ###

面试中，项目经验非常重要，是作为能力评估的重要参考标准。对于基础知识的面试，项目经验面试更要考察你的实际开发能力，需要能讲出自己的实战理解和给出具体的实现方案。

一般都会问到一些技术上的实现技巧，可能会让你用代码来实现，一般说清楚思路就可以了，也可以写伪代码来体现。一般能表述清楚，评价不会太低。

会考察的问题包括但不限于：  
项目开发流程、技术架构、说说做的比较好的项目、你在项目中担任的角色、项目中的收获、项目两点、项目中遇到的难点、简历中罗列的技术栈你是怎么理解的，如果让你运用实现你怎么做、组件设计和实现、兼容性问题、底层原理、性能优化、工程化、前端学习规划、算法

### 最后总结： ###

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

[816346c37e4b7bdac81906d3244b7cd3.png]: /images/20221119/cfd1e8c85d0e42ec805aa153dcd45976.png
[3d165f97a55f2901deabca4ecc86839e.png]: /images/20221119/2acc163d0ea24158840b02775e7d22b6.png
[f5deb8f0fd8b5e535b5e5387751f9624.png]: /images/20221119/f748408aabfb4a2ebba4a70d2a0831f9.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=nMKWRce2
[acc4d7642d3d36f5b6c4758eb87b0271.png]: /images/20221119/c64bb5df61b249d7bb64265c1de64fdd.png
[61b4b52e726bf704a28a37979c93c9e4.png]: /images/20221119/2ee919e7e8ff408e97fd6af4abbfc287.png
[02b255cdec939f34bef4d3245be6b72e.png]: /images/20221119/8c0cedd3c9a84c75973d4f08ecae851d.png