前端程序员心心念念的面试题精选（全都有答案）助你拿心仪offer

小编在之前的文章中分享了PHP、Java等面试题以及答案，许多人就给小编留言，希望分享前端、大数据、软件测试等面试题，小编已经拿小本本记下来了，在接来的文章中会相继分享给大家，而今天我们就一起来看看前端的一些面试题吧~

谈谈对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

• Model：代表数据模型，数据和业务逻辑都在Model层中定义；
• View：代表UI视图，负责数据的展示；
• ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

Vue 有哪些指令？(2018年Vue.js深入浅出教程)

v-html、v-show、v-if、v-for等等。

v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

简述Vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

Vue中如何在组件内部实现一个双向数据绑定？

假设有一个输入框组件，用户输入时，同步父组件页面中的数据。

具体思路：父组件通过props传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值，具体实现如下：

import
 
Vue
 from 
'vue'
const
 component = {
 props: [
'value'
],
 template: `
 <div>
 <input type=
"text"
 
@input
=
"handleInput"
 :value=
"value"
>
 </div>
 `,
 data () {
 
return
 {
 }
 },
 methods: {
 handleInput (e) {
 
this
.$emit(
'input'
, e.target.value)
 }
 }
}
new
 
Vue
({
 components: {
 
CompOne
: component
 },
 el: 
'#root'
,
 template: `
 <div>
 <comp-one :value1=
"value"
 
@input
=
"value = arguments[0]"
></comp-one>
 </div>
 `,
 data () {
 
return
 {
 value: 
'123'
 }
 }
})

可以看到，当输入数据时，父子组件中的数据是同步改变的：

我们在父组件中做了两件事，一是给子组件传入props，二是监听input事件并同步自己的value属性。那么这两步操作能否再精简一下呢？答案是可以的，你只需要修改父组件：

template: `
 <div>
 <!--<comp-one :value1=
"value"
 
@input
=
"value = arguments[0]"
></comp-one>-->
 <comp-one v-model=
"value"
></comp-one>
 </div>
 `

v-model 实际上会帮我们完成上面的两步操作。

Vue中如何监控某个属性值的变化？

比如现在需要监控data中， obj.a 的变化。Vue中监控对象属性的变化你可以这样：

watch: {
 obj: {
 handler (newValue, oldValue) {
 console.log(
'obj changed'
)
 },
 deep: 
true
 }
 }

deep属性表示深层遍历，但是这么写会监控obj的所有属性变化，并不是我们想要的效果，所以做点修改：

watch: {
 
'obj.a'
: {
 handler (newName, oldName) {
 console.log(
'obj.a changed'
)
 }
 }
 }

还有一种方法，可以通过computed 来实现，只需要：

computed: {
 a1 () {
 
return
 
this
.obj.a
 }
}

利用计算属性的特性来实现，当依赖改变时，便会重新计算一个新值。

Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？

示例：

<template>
 
<div>
 
<ul>
 
<li
 
v-for
=
"value in obj"
 :
key
=
"value"
>
 {{value}}
 
</li>
 
</ul>
 
<button
 @
click
=
"addObjB"
>
添加obj.b
</button>
 
</div>
</template>
<script>
export
 
default
 {
 data () {
 
return
 {
 obj: {
 a: 
'obj.a'
 }
 }
 },
 methods: {
 addObjB () {
 
this
.obj.b = 
'obj.b'
 console.log(
this
.obj)
 }
 }
}
</script>
<style></style>

点击button会发现， obj.b 已经成功添加，但是视图并未刷新：

原因在于在Vue实例创建时， obj.b 并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api—— $set()：

addObjB () {
 
// this.obj.b = 'obj.b'
 
this
.$set(
this
.obj, 
'b'
, 
'obj.b'
)
 console.log(
this
.obj)
 }

$set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性，此时视图也会跟着改变了：

delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。

Vue.delete 直接删除了数组 改变了数组的键值。

 
var
 a=[
1
,
2
,
3
,
4
]
 
var
 b=[
1
,
2
,
3
,
4
]
 
delete
 a[
1
]
 console.log(a)
 
this
.$delete(b,
1
)
 console.log(b)

如何优化SPA应用的首屏加载速度慢的问题？

• 将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
• 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
• 加一个首屏loading图，提升用户体验；

前端如何优化网站性能？

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

CSS Sprites

国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用 lazyLoad

俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

2、控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

一般情况下都是CSS在头部，JS在底部。

3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

4、减少重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。

减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

5、减少 DOM 操作

6、图标使用 IconFont 替换

网页从输入网址到渲染完成经历了哪些过程？

大致可以分为如下7步：

1. 输入网址；
2. 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
3. 与web服务器建立TCP连接；
4. 浏览器向web服务器发送http请求；
5. web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
6. 浏览器下载web服务器返回的数据及解析html源文件；
7. 生成DOM树，解析css和js，渲染页面，直至显示完成；

jQuery获取的dom对象和原生的dom对象有何区别？

js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。

原生DOM对象转jQuery对象：

var
 box = document.getElementById(
'box'
);
var
 $box = $(box);

jQuery对象转原生DOM对象：

var
 $box = $(
'#box'
);
var
 box = $box[
0
];

jQuery如何扩展自定义方法

(jQuery.fn.myMethod=
function
 () {
 alert(
'myMethod'
);
})
// 或者：
(
function
 ($) {
 $.fn.extend({
 myMethod : 
function
 () {
 alert(
'myMethod'
);
 }
 })
})(jQuery)

使用：

$(

“#div”

).myMethod();

CSS，JS代码压缩，以及代码CDN托管，图片整合。

(1)CSS,JS 代码压缩：

可以应用gulp的gulp-uglify，gulp-minify-css模块完成;可以应用Webpack的 UglifyJsPlugin压缩插件完成。

(2)CDN：

内容分发网络(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。主要特点有：本地Cache加速，镜像服务，远程加速，带宽优化。关键技术有：内容发布，内容路由，内容交换，性能管理。CDN网站加速适合以咨询为主的网站。CDN是对域名加速不是对网站服务器加速。CDN和镜像站比较不需要访客手动选择要访问的镜像站。CDN使用后网站无需任何修改即可使用CDN获得加速效果。如果通过CDN后看到的网页还是旧网页，可以通过URL推送服务解决，新增的网页和图片不需要URL推送。使用动态网页可以不缓存即时性要求很高的网页和图片。CDN可以通过git或SVN来管理。

(3)图片整合

减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。缺点是可维护性差。可以使用百度的fis/Webpack来自动化管理sprite。

如何利用Webpack把代码上传服务器以及转码测试?

(1)代码上传：

可以使用sftp-Webpack-plugin，但是会把子文件夹给提取出来，不优雅。可以使用gulp+Webpack来实现。

(2)转码测试

Webpack应用babel来对ES6转码，开启devtool: “source-map” 来进行浏览器测试。应用karma或mocha来做单元测试。

项目上线流程是怎样的?

(1)流程建议

– 模拟线上的开发环境

本地反向代理线上真实环境开发即可。(apache，nginx，nodejs均可实现)

– 模拟线上的测试环境

模拟线上的测试环境，其实是需要一台有真实数据的测试机，建议没条件搭daily的，就直接用线上数据测好了，只不过程序部分走你们的测试环境而已，有条件搭daily最好。

– 可连调的测试环境

可连调的测试环境，分为2种。一种是开发测试都在一个局域网段，直接绑hosts即可，不在一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往上布即可。

– 自动化的上线系统

自动化的上线系统，可以采用Jenkins。如果没有，可以自行搭建一个简易的上线系统，原理是每次上线时都抽取最新的trunk或master，做一个tag，再打一个时间戳的标记，然后分发到cdn就行了。界面里就2个功能，打tag，回滚到某tag，部署。

– 适合前后端的开发流程

开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调时有hosts可绑即可。

(2)简单的可操作流程

– 代码通过git管理，新需求创建新分支，分支开发，主干发布

– 上线走简易上线系统，参见上一节

– 通过gulp+Webpack连到发布系统，一键集成，本地只关心原码开发

– 本地环境通过Webpack反向代理的server

– 搭建基于linux的本地测试机，自动完成build+push功能

工程化怎么管理的?

gulp和Webpack

git常用命令

Workspace：工作区

Index / Stage：暂存区

Repository：仓库区(或本地仓库)

Remote：远程仓库

Webpack 和 gulp对比

Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。” 另外，Gulp是通过task对整个开发过程进行构建。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

Gulp和Webpack功能实现对比：从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。

Webpack打包文件太大怎么办?

Webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。

不想让别人盗用你的图片，访问你的服务器资源该怎么处理?

目前常用的防盗链方法主要有两种：

(1)设置Referer：适合不想写代码的用户，也适合喜欢开发的用户

(2)签名URL：适合喜欢开发的用户

精灵图和base64如何选择?

css精灵，用于一些小的图标不是特别多，一个的体积也稍大，比如大于10K(这个没有严格的界定)。

base64，用于小图标体积较小(相对于css精灵)，多少都无所谓。字体图标，用于一些别人做好的图标库(也有少数自己去做的)用起来比较方便，他的图标只能用于单色，图标用只能于一种颜色。

Webpack怎么引入第三方的库?

拿jQuery为例：

entry: {

page: ‘path/to/page.js’,

jquery: ‘node_modules/jquery/dist/jquery.min.js’

}

new HtmlWebpackPlugin({

filename: ‘index.html’,

template: ‘index.html’,

inject: true,

chunks: [‘jquery’, ‘page’] // 按照先后顺序插入script标签

})

希望大家不仅要追求学习的广度，更要追求深度。愿你能早日拿到心仪的offer。