前端面试题整理

1工作中用到的前端优化：

• 用js的图片懒加载解决网站图片过多，一次性加载慢的问题
• CSS、JavaScript代码压缩合并
•            使用CSS Sprint，雪碧图 精灵图
•            使用CND
• 使用打包工具,例如webpack

2原型链和继承：原型 构造函数 实例 prototype constructor _proto_

3怎么样实现继承：

call()apply()方法方式

原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承

混合方式 混合了call方式、原型链方式

快速继承：var obj1 =Object.create(obj)

4一行代码[1,2,3,4]变成2345:const str =arr.map(v=>{return v+1}).join('')')‘’

5深拷贝：function fn(obj){var newObj ={}; for(var k in obj){newObj[k]=typeof obj[k] ===“object”?fn(obj[k]): obj[k]}return newObj}

6什么是闭包？

在函数内部，定义一个子函数，可以用子函数访问父函数的私有变量。执行完操作以后，将子函数通过return返回。

闭包应用场景？

封装相关的功能集。

循环dom中的节点，打印对应的下标：

1

for (var i = 0; i < buts.length; i++) {

(function (i) {

buts[i].onclick = function () {

console.log(i);}

})(i)}

2

for (var i = 0; i < buts.length; i++) {

buts[i].onclick = (function (i) {

return function () { console.log(i);

}

})(i)

}

3存下标方法

for (var i = 0; i < buts.length; i++) {

buts[i].index=i

buts[i].onclick=function(){

console.log(this.index);

}

}

闭包产生什么影响？

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

jQuery和vue的区别：框架与库之间最本质区别在于控制权

库：库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；

框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。

Vue中怎么刷新页面：location.reload()  this.$router.go()  provide / inject 组合

Vue中实现页面跳转：<router-link to=’url’ >

this.$router.push({path: ''/order/index''});

this.$router.push({path: '/order/page1',query:{ id:'2'}});

this.$router.push({name: '/order/page2',params:{ id:'6'}});

//  path:'路由里配置的index.vue的路径'//  params:{id:'1',name:'eva'} /query:{id:'5'}  需要传递的参数和值

路由传参params 和query两种方式的区别：

1、用法上的

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router了

{{this.$route.params.参数名}}

2、展示上的

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

Vue中的动态路由：router-link ：to=’url’

es6语法：

Vue中怎么优化：

vue数据双向绑定原理：vue是通过Object.defineProperty()来实现数据劫持的。Get  set

Vue中怎么传递参数：

父子组件之间的数据传递，路由传参this.$router.push（query //params） 

通过localStorage或者sessionStorage来存储数据

  在应用复杂时，推荐使用vue官网推荐的vuex。

1.管理源码的工具：svn

2.产品线各个节点共享资料的工具：公司内部的网盘（类似百度网盘的功能）

3.产品研发流程的管理工具：teambition

Vue怎么解决跨域问题？

方法1.后台更改header

方法2.使用JQuery提供的jsonp

方法3.使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

例如请求的url:“http://f.apiplus.cn/bj11x5.json”

打开config/index.js,在proxyTable

只要是通过 webpack 构建工具搭建的项目，都可以通过 webpack-dev-server 中的代理来解决跨域的问题

vue-cli 中如何配置代理？？？

  在 config/index.js 中配置 proxyTable，来实现代理的功能

  vuex是vue的状态管理工具和数据管理工具，核心仓库是 store

var store =new vuex.store({state:{‘’}})

Vuex的核心概念：state  mutations getters actions

module模块化

HTTP和HTTPS的区别：

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

MVC和MVVM模式：MVVM数据的双向绑定 实现原理：vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

浏览器兼容问题：不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异  

 简单粗暴法 * { margin: 0; padding: 0; }

解决 ie9 以下浏览器对 html5 新增标签不识别的问题。<!--[if lt IE 9]> <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->

解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

解决 IE 9 10 11 等浏览器不支持 <picture> 标签的问题<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>

浏览器 CSS 兼容前缀

-o-transform:rotate(7deg); // Opera -ms-transform:rotate(7deg); // IE -moz-transform:rotate(7deg); // Firefox -webkit-transform:rotate(7deg); // Chrome transform:rotate(7deg); // 统一标识语句