10道前端面试题（带答案）

一，Html5 新增那些标签?

1，布局标签:header,section,footer,article,aside

2，表单标签: datalist,

3，多媒体标签: audio(音频), video(视频)

补充：

hidden( 隐 藏 元 素 ),required( 必 填 ),minlength( 最 小 长

度),maxlength(最大长度),pattern(正则表达式),placeholder(提

示文本),autocomplete(自动填充),autofocus(自动获取焦点）

二，css3 新增了那些新特性?

媒体查询(@media);

1，transfrom 系列:translate 平移, scale 缩放,rotate 旋转

2，动画(animate);

3，过渡效果(transition);

4，flex 弹性(伸缩)布局;

5，盒模型计算方式 box-sizing:border-box;

6，线性渐变(linear-gradient),径向渐变;

7，伪元素, 文字阴影(text-shadow), 边框阴影(box-shadow), 圆角

(border-radius)

三，什么是原型链?

每个构造函数都有一个 prototype 属性, 即原型对象, 通过实例对

象的 proto 属性也可访问原型对象;而原型对象本质也是一个对

象, 是对象就有自己的原型对象, 最终形成的链状的结构称为原型

链.

四，对 this 关键字的理解

this 在不同的场景下指向不太一样, 主要分为一下几种情况:

普通函数中指向全局 window;

对象的成员方法中指向该方法的宿主对象;

构造函数中指向 new 出来的实例对象;

事件处理函数中指向事件源;

回调函数中指向全局 window

五，常见 HTTP 状态码都有哪些？

100 => 正在初始化（一般是看不到的）

101 => 正在切换协议（websocket 浏览器提供的）

200 或者以 2 开头的两位数 => 都是代表响应主体的内容已经成功返

回了

202 => 表示接受

301 => 永久重定向/永久转移

302 => 临时重定向/临时转移（一般用来做服务器负载均衡）

304 => 本次获取的内容是读取缓存中的数据，会每次去服务器校验

400 => 参数出现错误（客户端传递给服务器端的参数出现错误）

401 => 未认证，没有登录网站

403 => 禁止访问，没有权限

404 => 客户端访问的地址不存在

500 => 未知的服务器错误

503 => 服务器超负荷（假设一台服务器只能承受 10000 人，当第

10001 人访问的时候，如果服务器没有做负载均衡，那么这个人的网

络状态码就是 503）

六，针对页面性能优化,你有哪些优化方案?

1，资源加载方面:

减少 http 请求次数, 具体方案, 代码合并(合并 css,js), 使用精灵图;

减少 http 请求数据量, 代码压缩(css,js,html), 合理设置缓存;46

启用 CDN 加速服务;

2，代码层面:

避免滥用全局变量, 减少作用域查找(能用局部变量就不要声明全局

变量), 不要滥用闭包;

减少 DOM 操作, 操作 DOM 的时候对已经查找到的 DOM 对象进行缓

存, 避免重复查找;

3，使用图片懒加载, 避免单次加载图片数量过多导致页面卡顿; 将

script 标签写在页面底部, 因为 js 的加载会阻塞页面的渲染;

不要在本地书写大量 cookie, 因为 cookie 会伴随每一次 http 请求;

七，分别介绍下 MVC, MVVM, MVP 这三种设计模式

1，MVC 是后端语言的一种设计模式, 主要是实现对代码分层, M(model)

数据模型层, 主要负责操作数据库; V(view)视图层, 主要负责进行界面

展示, 可以认为前端的 html,css,js 充当的就是视图层; C(controller) 业

务控制层, 主要负责控制具体的业务逻辑, 负责将 model 数据层的数

据交给 view 视图层进行展示. ,

2，MVVM 是前端的一种设计模式, vue 就是基于这种模式来设计的, 是从

3，MVC 演变过来的. M(model)数据层, 主要负责数据和方法的初始化;

V(view)视图层, 可以认为 html,css 充当的就是视图层的角色; VM(view

model)视图模型层, 负责连接数据层和视图层, 将数据层的数据交给

视图层展示, 将视图层的行为传递给数据层.

MVP 也是从后端的 MVC 设置模式中演化过来的, 主要应用于安卓开

发中. M(model) 数据层, V(view) UI 逻辑; P(Presenter)业务逻辑

八，Vue 有哪些常用的事件修饰符?

.prevent: 阻止默认事件;

.stop: 阻止冒泡;

.once: 事件执行一次;

.self: 只当在 event.target 是当前元素自身时触发处理函数

九，如何中断ajax请求？

一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()

十，说一下宏任务和微任务？

1，宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。

2，微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。

3，宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。