一些出现率较高的前端面试题

1. html5新特性、语义化

答:

一、语义化概念HTML5的语义化指的是合理正确的使用语义化的标签来创建页面

结构 如:header,footer,nav,aside,section 从标签上即可以直观的知道这个标签的作用，而不是滥用div。

二、语义化

的优点有 1、代码结构清晰，易于阅读，利于开发和维护 2、方便其他设备解析（如屏幕阅读器）根据语义渲染网页。 3、有利于搜索引擎优化（SEO），搜索引擎爬虫

会根据不同的标签来赋予不同的权重 4、网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看

可能会涉及到的问题

html5的新标签

html如何做SEO优化

1、尽量简单，导航最好不要超过3级 2、控制首页链接数量 3、网站首页是权重最高的地方

，如果首页链接太少,影响网站收录数量。太多影响用户体验，也会降低网站首页的权重，收录效果也不好 4、图片必须添加alt和title，在每个菜单考虑增加面包屑导航

5、控制页面的大小，减少http请求，提高网站的加载速度 6、突出重要内容，合理的设计网站title、description和keywords 7、尽量让代码语义化，用正确的标签做正确的事

2. 行内元素

和块级元素

答:

一、行内元素 (1)设置宽高无效 (2)对margin

仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间 (3)不会自动进行换行 标签：a label select strong textarea

二、块级元素 (1)能够识别宽高 (2)margin和padding的上下左右均对其有效 (3)可以自动换行

(4)多个块状元素标签写在一起，默认排列方式为从上至下 标签： div p form h1-h6 ul olaudio video img input td

3. html的空标签(闭标签)

答:

一、概念 没有闭合的标签称为空标签

如：<br />和<img />等。他们不存在成对的情况（<colgroup>除外）反之具有成对性质的例如：<div></div>、<form></form>就不是空标签。

**二、空标签

**<area>、<base>、<br>、<col>、<colgroup> 、 <command>、<hr>、<img>、<input>、<link>、<meta>、<source>

4. mete标签

CSS面试题

1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

答:标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

可能会涉及到的其他问题

box-sizing

属性？

用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

display有哪些值？说明他们的作用?

inline（默认）–内联 none–隐藏 block–块显示 table–表格显示 list-item–项目列表 inline-bloc

2. CSS选择器有哪些？哪些属性可以继承？

答:CSS选择符：

可能会涉及到的其他问题

css优先级算法

如何计算?

元素选择符： 1 class选择符： 10 id选择符：100 元素标签

：1000

!important声明的样式优先级最高，如果冲突再进行计算。

如果优先级相同，则选择最后出现的样式。

继承得到的样式的优先级最低。

css3新增的伪类

有哪些?

1. p:first-of-type 选择属于其父元素的首个元素

2. p:last-of-type

选择属于其父元素的最后元素

3. p:only-of-type 选择属于其父元素唯一的元素

4. p:only-child 选择属于其父元素的唯一子元素

5. p:nth-child

(2) 选择属于其父元素的第二个子元素

6. :enabled :disabled 表单控件

的禁用状态。

7. :checked 单选框

或复选框被选中。

css的三大特征

一、层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。 比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）

二、继承性

继承性是指当子标签没有设置样式时，会继承父标签的样式。 比如一个子标签没有设置背景颜色，那么子标签

会继承父标签的背景颜色。

可继承的属性比如有字体类属性

（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）

三、优先级 优先级：!important>行内样式>id选择器>类选择器

>标签选择器

>通配符>继承 【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】

Javascript面试题篇

1. javascript的typeof

返回哪些数据类型

面试官想要你回答的问题?

思考:

要先清楚一共有多少种数据类型, 然后再进行数据类型检测

考虑到typeof检测Null和Undefined、Object和Array会返回什么

回答

string,boolean

,number,undefined,function,object

可能会涉及到的其他问题

其他检测数据类型的方法

使用typeof的缺点

typeof无法正确检测null、Array类型, 会直接返回object

undefined

和null的区别

null： Null类型，代表“空值”，代表一个空对象指针

，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

Vue基础面试题篇

1.vue

优点？

面试官想要你回答的问题?

思考:

vue的特点?

脱离原生使用框架的优势?

MVVM框架? 以及MVC框架的区别?

vue的双向数据绑定

?

更深的内容...例如diff算法

等等

回答：

• 轻量级框架

• ：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
• 双向数据绑定：保留了 angular
• 的特点，在数据操作方面更为简单；
• 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
• 虚拟DOM：dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
• 运行速度更快：相比较于 react

• 而言，同样是操作虚拟 dom ，就性能而言， vue 存在很大的优势。

可能会涉及到的其他问题

MVVM和MVC

o

MVVM

o

M —— model：服务器的业务逻辑操作

o

V —— view：用户界面

o

VM —— ViewModel：核心枢纽 过程：把view和model关联起来的就是View Model。

o

View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示,通过数据来显示视图层

。

o

o

MVC

o

M —— Model，数据模型

，负责数据相关的任务，操作所有数据（增删改查）

o

V —— View，视图，负责所有UI界面，即用户能看得到的界面

o

C —— Controller，控制器，负责监听用户事件，然后调用 M 和 V 更新数据和视图

o

总结:

o

MVC是比较直观的架构模式

，用户进行操作是，View接收用户的输入操作，传递给Controller进行业务逻辑处理，Model实现数据持久化，并将结果反馈给View，完成一次MVC模式。

o

o

MVVM和MVC的区别

o

1、MVC中Controller演变成MVVM中的ViewModel

o

2、MVVM通过数据来显示视图层而不是节点操作

o

3、MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验

是否了解虚拟dom

Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素

对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。

对于虚拟DOM，咱们来看一个简单的实例，就是下图所示的这个，详细的阐述了模板 → 渲染函数 → 虚拟DOM树 → 真实DOM的一个过程

Vue里v-model的实现

v-model 用于表单数据的双向绑定，其实它就是一个语法糖

，这个背后就做了两个操作：v-bind 绑定一个 value 属性；v-on 指令给当前元素绑定 input 事件。

diff算法的了解

步骤

o 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

o 当状态变更的时候，重新构造一棵新的对象树

。然后用新的树和旧的树进行比较，记录两棵树差异

o 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了

2.vue父组件

向子组件传递数据？

面试官想要你回答的问题?

思考:

组件的通讯? 子传父、兄弟传参

父组件肯定会涉及到props

, 就会想到props的单向数据流

回答：通过 props

可能会涉及到的其他问题

子组件

向父组件如何传递数据

1、通过$emit自定义事件的回调函数

传递给父组件获取数据

2、通过vuex

兄弟组件如何传递数据

1、可以用过一个vue实例eventBus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用eventBus事件触发emit和监听on来实现组件之间的通信和参数传递

2、通过vuex

谈谈prop单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

每次父组件更新时，子组件的所有 Prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

3.v-show

和 v-if指令的共同点和不同点？

面试官想要你回答的问题?

思考:

• v-show和v-if是干什么的?
• 他们最核心的区别?
• 可能还会问其他的指令?

回答：

共同点： 都能控制元素的显示和隐藏；

不同点： 实现本质方法不同，v-show 本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false ，就不会编译了。

而且 v-if 不停的销毁和创建比较消耗性能。

**总结：**如果要频繁切换某节点，使用 v-show (切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用 v-if（初始渲染开销较小，切换开销比较大）。

可能会涉及到的其他问题

是否用过其他的vue指令

v-html、v-for、v-bind、v-slot、v-on、v-model、v-once、v-text

4. 如何让CSS只在当前组件中起作用?

面试官想要你回答的问题?

思考:

• 如何实现、具体实现
• 起到什么作用

回答：

​ 在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的

可能会涉及到的其他问题

如何引入外部样式

在style里import "样式文件路径"

scoped的缺点

谨慎使用不是不用，而是持一种审视的目光去看待它。scoped肯定是解决了样式私有化的问题，但同时也引入了新的问题—样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的。所以我才说要谨慎使用

5. keep-alive的作用是什么?

面试官想要你回答的问题?

思考:

• 具体使用?
• 平时开发的使用场景?
• 组件有哪些参数?

回答:

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

使用场景:

(一)用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。

(二)订单列表跳转到订单详情，返回，等等场景

可能会涉及到的其他问题

inclue和exclude属性

include - 字符串或正则表达，只有匹配的组件会被缓存

exclude - 字符串或正则表达式

，任何匹配的组件都不会被缓存

使用的场景

比如:

1、保存我们路由切换时组件的状态 , 比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以 使用keep-alive保存列表页面的滚动位置。

2、填写资料切换不同页面的时候, 需要保留记录的时候可以结合keep-alive使用

6.如何获取dom?

面试官想要你回答的问题?

思考:

• 具体使用?
• 平时开发的使用场景?

回答：

使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式；

使用场景:

• 父组件调用子组件的方法，可以传递数据
• 简单的获取节点或组件实例的属性或者方法，但并不改变其数据。

缺陷：必须在模板渲染之后，不是响应式的，时不时配合$nextTick。

可能会涉及到的其他问题

$refs是否是响应式的

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

如何解决$refs不是响应式的问题?

使用this.$nextTick

当你修改了data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值， 你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。

7. vue-loader是什么？使用它的用途有哪些？

面试官想要你回答的问题?

思考:

• 具体有什么用?
• 平时开发的使用场景?

回答：

理解: vue 文件的一个加载器，将 template、js、style 转换成 js 模块。

用途：js 可以写 es6 、 style样式可以 scss 或 less 、 template 可以加 jade等

可能会涉及到的其他问题

·

了解过其他的loader吗

·

o raw-loader (opens new window)加载文件原始内容（utf-8）

o markdown-loader 将 Markdown 转译为 HTML

o url-loader (opens new window)像 file loader 一样工作，但如果文件小于限制，可以返回 data URL(opens new window)

o file-loader (opens new window)将文件发送到输出文件夹，并返回（相对）URL

o json-loader (opens new window)加载 JSON (opens new window)文件（默认包含）

o script-loader (opens new window)在全局上下文中执行一次 JavaScript 文件（如在 script 标签），不需要解析

o babel-loader (opens new window)加载 ES2015+ 代码，然后使用 Babel (opens new window)转译为 ES5

o html-loader (opens new window)导出 HTML 为字符串，需要引用静态资源

8. 开发是否使用过axios请求库?

面试官想要你回答的问题?

思考:

• 具体有什么用?
• 如何安装?

回答：

请求后台资源的模块。npm install axios —save 装好， js中使用 import 进来，然后 .get 或 .post 。返回在 .then 函数中如果成功，失败则是在 .catch 函数中。

可能会涉及到的其他问题

axios和fetch、XMLHttpRequest的区别

XMLHttpRequest 特点：

所有浏览器都支持 onreadystatechange 更多现代浏览器

，除了可以设置 on* 属性外，也可以用 addEventListener来监听XMLHttpRequest 事件。

可以终止

方法特征： open：第三个参数async ，表示是否异步。默认true。

axios 特点：

o 基于xhr

o 基于promise

o 支持node

o 请求拦截

o 防御xsrf(跨站域请求伪造)

fetch 特点：

o Fetch是浏览器原生的 api 返回promise

o 仅当网络故障时或请求被阻止时，才会标记为 reject。

o 不会接受跨域 cookies；

o 默认fetch 不会发送 cookies

o 浏览器可能不支持

·

aixos的二次封装

·

1. 为什么要二次封装

9.分别简述computed和watch的使用场景

面试官想要你回答的问题?

思考:

• 具体有什么用?
• 如何安装?

回答：

• computed : 当一个属性受多个属性影响的时候就需要用到 computed ，最典型的例子：购物车商品结算的时候
• watch : 当一条数据影响多条数据的时候就需要用 watch ，例子：搜索数据(搜索框)

可能会涉及到的其他问题

·

computed和watch的区别

·

**computed：**通过属性计算而得来的属性

·

**1、**computed内部的函数在调用时不加()。

·

**2、**computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。

·

**3、**computed中的函数必须用return返回。

·

**4、**在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。

·

**5、**当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。

·

**watch：**属性监听

·

**1、**watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。

·

**2、**watch中的函数有两个参数，前者是newVal，后者是oldVal。

·

**3、**watch中的函数是不需要调用的。

·

**4、**watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型

数据的变化，需要进行深度监听。"obj.name"(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。

·

**5、**特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者。修改中第项开始的个数据为，set(this.arr,0,100)-----修改arr第0项值为100。

·

**6、**immediate:true 页面首次加载的时候做一次监听。

·

总结:

·

**1、**功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

·

**2、**是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

·

**3、**是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用