欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端面试题整理

程序员文章站 2022-03-04 12:06:57
...

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.pushquery //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); // 统一标识语句