前端程序猿的面试题之（下）（15题）

程序猿找工做面试须要准备的，这是我面试的总结：

一.CSS盒模型：

1.box-sizing：content-box -- 默认的标准盒模型，元素的宽高不包括内边距和边框的尺寸。

其盒模型分为两类：标准盒子模型和IE盒子模型

标准盒模型包括：margin，border，padding，content，而且content部分不包括其它部分。

IE盒模型包括：margin，border，padding，content,和标准盒子模型不一样的是，content部分包含了border和padding。

二. 什么是闭包？

闭包就是有权访问另外一个函数做用域内变量的函数都是闭包。

这里 inc 函数访问了构造函数 a 里面的变量 n，因此造成了一个闭包。再来看一段代码:

function a(){
        var n = 0;  //声明了一个变量n，赋值为0（初始值）
       function inc(){  //声明了一个变量inc，指向一个函数做用域（保存了此函数对象的地址）
           n++;     //执行n++
           console.log(n);  //输出n的值
        }
        return inc;  //外层函数返回变量inc（内层函数做用域的地址）
     }
     var c = a();   //调用了外层函数=>获得返回的内层函数的地址，即inc指向的内层函数的地址=>赋值给了变量c（其实c就是保存内层函数做用域的地址）
     c();    //控制台输出1   
     c();    //控制台输出2
复制代码

总结：

闭包就是一个函数引用另一个函数的变量，由于变量被引用着因此不会被回收，所以能够用来封装一个私有变量。这是优势也是缺点，没必要要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，由于他就像一个静态私有变量同样。闭包一般会跟不少东西混搭起来，接触多了才能加深理解。

三.你是如何作到性能优化的？

1.减小http请求，合理设置缓存：

就是把css，javascript，图片合并，把浏览器要访问的js和css合并成一个文件，这样浏览器只须要一次请求，图片就是多张合成一张。

2.使用浏览器缓存

若是将css，js，logo和图标缓存在浏览器的话，这样能够提升性能，能够经过http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间能够是数天，甚至几个月。

3.启动压缩

在浏览器对文件进行压缩，可有效减小通讯传输的数据量。

4.Css sprites

合并css图片，减小请求的次数

5.Css放在页面最上部，js放在页面最下面

就是浏览器会在下载完成所有css以后才对整个页面进行渲染，而js相反，浏览器在加载js后当即执行，有可能会阻塞整个页面，形成页面显示缓慢，所以js最好放在页面最下面。

6.减小cookie传输

Cookie包含在每次请求和相应中，太大的cookie会严重影响数据传输，所以哪些数据须要写入cookie须要慎重考虑，尽可能减小cookie中传输的数据量。

四.什么状况会引发内存泄漏？

1.意外的全局变量引发的内存泄漏

缘由：全局变量，不会被回收

解决：使用严格模式避免

2.闭包引发的内存泄漏

缘由：闭包能够维持函数内部局部变量，使其得不到释放

解决：将事件处理函数内局部变量解除闭包，或在定义事件处理函数的外部函数中删除dom的引用。

3.没有清理的Dom元素

缘由：虽然别的地方删除了，可是对象中还存在对DOM引用

解决：手动删除

4.被遗忘的定时器或者回调

缘由：定时器中有dom的引用，即便dom删除了，可是定时器还在，因此内存中仍是有这个dom

解决：手动删除定时器和dom

五.什么是vue及特色？

Vue是一个基于MVVM的，渐进式，纯前端的js框架。

特色：组件化开发，可复用，先后端解耦。

六.vue生命周期钩子函数有哪些？分别表明什么？？

总共分为8个阶段：

1.建立前(beforeCreate) 组件还未开始初始化

2.建立后（created）data的数据初始化，还未挂载，el还未生成

3.载入前(beforeMount) 虚拟Dom已生成，还未挂载到DOM树

4.载入后(mounted) 组件已经初始化完成,已经成功挂载到DOM树，此时能够有关DOM的操做

5.更新前（beforeUpdate）date的数据变化会触发更新前和更新后的方法

6.更新后（updated）

7.销毁前（beforeDestroy）

8.销毁后（destried）vue实例已经解除了对DOM的事件监听和绑定，但DOM结构依然存在

七.什么是MVVM？

MVVM是Model View ViewModel的缩写。

1.Model：表明数据模型，能够在model中定义数据修改和操做的业务逻辑

2.View表明是视图，负责将数据模型转化为UI展示出来

3.ViewModel：是一个自动同步View和Model对象，是一个控制器

4.在MVVM架构下，Model和ViewModel之间交互是双向的，所以View的数据变化会同步到Model中。Model的数据变化也会当即反应到View上。

八.Vue是如何渲染页面的及特色？

new Vue()内包含两大子系统:

1.响应系统:

将data中每一个变量，都从新封装为new Vue()对象的访问器属性。 只要修改new Vue()的属性，就会触发set() set()除了修改模型数据外，还通知Vue，该模型变量发生了变化，须要修改DOM树。

2.虚拟DOM树:

new Vue()对受监视的页面元素，从新扫描后构建的简化版DOM树。 模型数据发生变化，会通知虚拟DOM树 虚拟DOM树会经过遍历本身的方式查找到受影响的元素 用本身封装好的DOM API仅更新受影响的元素。

特色：

1. 遍历快：仅保存了受影响的元素和属性
2. 仅更新受影响的DOM元素，效率比总体替换高！

九. vuex特性是什么？有什么优势？vuex有哪几种属性？

Vuex就是一个仓库，仓库里放了不少对象，其中state就是数据存放地，相似于vue中的data。 State里面存放的数据是响应式的，只要其中的数据发生变化，就会通知其余依赖这些数据组件更新数据。

优势： 当你打算开发大型单页应用，会出现多个视图组件依赖同一个状态，来自不一样视图的行为须要变动同一个状态。遇到以上状况时候，你就应该考虑使用Vuex了，它能把组件的共享状态抽取出来，当作一个全局单例模式进行管理。这样无论你在何处改变状态，都会通知使用该状态的组件作出相应修改

属性：

有5种：分别是

state //存放要保存的数据

getter //定义取出保存数据的方法

mutation //定义修改保存的数据的方法

action //异步修改数据的方法

module //把数据模块化

十.axios是什么？

Axios是请求后台资源的模块。

1.axios是一个基于promise的HTTP库，支持promise的全部AP。；

2.它能够拦截请求和响应。

3.它能够转换请求数据和响应数据,并对响应回来的内容自动转换为json类型的数据。

4.它安全性更高，客户端支持防护XSRF。

5.支持多种请求的方式：put post get delete patch。

6.axios能够配。

十一.vue组件之间的传参？

1.父组件传给子组件

父组件经过给子组件的标签上面定义属性，在子组件内经过props接受父组件传过来的属性值。

2.子组件传给父组件

父组件经过给子组件标签订义一个方法，在子组件经过$emit（定义方法的触发名，要传的参数），触发父组件定义的方法，并把参数传给父组件

3.兄弟组件间的传参

在main.js里面给vue的原型定义实例方法，经过$on给要接收参数的组件绑定方法，要传递参数

十二.vue路由传参的是哪三种方式？

1.this.$router.push()

2.经过路由属性的name，用params来传递参数

3.用path来匹配路由，经过query传递参数

十三.什么是HTTP协议及HTTP协议的工做过程？

HTTP是比TCP更高层次的应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。是一个无状态的协议（同一个客户端的此次请求和上次请求是没有对应关系）。

1.地址解析

浏览器把地址栏的URL解析成协议名、主机名、端口、对象路径等，而后须要请求DNS服务器，把获得的域名解析成对应的IP地址。

2.封装HTTP请求数据包

把以上部分结合本机本身的信息，封装成一个HTTP请求数据包

3.封装成TCP包，创建TCP链接（TCP的三次握手

由于HTTP比TCP更高层的应用层协议，因此根据规则，只有低层协议创建链接以后，才能进行更高层的协议链接。 所以，首先要创建TCP链接，而后才能HTTP的链接。通常TCP链接的端口号是80。这里是8080端口

4.客户机发送请求命令

创建链接以后，客户机发送一个请求给服务器

5.服务器响应

服务器接到请求后，给予相应的响应信息，其格式为一个状态行

6.服务器关闭TCP链接

十四.Vue双向绑定原理？

是使用了访问器属性，object.defineProperty()来劫持各个属性的setter和getter，在数据变更发布消息给订阅者，触发相应的监听回调。

十五.Conputed和methods有什么区别？

Conputed：计算属性是基于他们的依赖进行缓存的，只有在他的相关依赖发生改变时才会从新求值。

Methods：只要发生从新渲染，method调用总会执行该函数。