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

210 阅读10分钟

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

况且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)......

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

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文档,有需要的伙伴可以点击这里免费领取!!!

三,项目经验

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

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

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

最后总结:

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

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