面试问题总结

谁践踏了优雅 2022-02-05 07:05 229阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

> 1.前端性能优化的方法有哪些？

①减少http请求，减少请求的体积，比如用雪碧图，gulp或者webpack压缩文件  
②通过规范布局来减少DOM数量，减少DOM操作，比如事件委托。  
③把对应的文件放在对应的位置，css放在head里，js放在body底部。  
④图片懒加载，按需加载。  
⑤对于ajax请求可以使用get请求，一来get请求存在缓存机制，二来get请求只发请求头速度快。  
⑥利用cdn加速来减轻服务端的压力，把你的资源放在人家的服务器上，但是数据库还是在自己的服务器上。  
⑦使用多线程和异步请求

> 2.H5新增特性有哪些？

①语义化标签  
②canvas svg  
③视频 音频  
④本地存储  
⑤地理定位  
⑥离线存储：在离线状态上也可以访问之前的页面  
⑦webwork 多线程执行JavaScript  
⑧websocket 即时通信

> 3.简述对语义化标签的理解

标签语义化能让页面结构更加清晰，便于后期维护，便于浏览器和搜索引擎解析

> 4.简述ajax实现流程以及优缺点？

首先创建xmlHttpRequest实例对象，然后调用open方法指定请求的方式和请求路径，默认是异步请求，之后调用send方法发送请求，然后监听实例对象下的onreadystatechange方法，当状态满足的时候,拿到请求结果responseText,最后进行页面的渲染即可。

优缺点：  
优点：ajax能实现网页局部更新，不用更新整个网页，减少带宽使用，提高加载速度  
缺点：支持同源策略，存在跨域问题

> 5.Css清除浮动的方式？

①给父元素设置overflow:hidden  
②紧跟着设置浮动的元素的空标签设置clear:both;

> 6.Css动画和过渡的区别？

动画会自动开始执行，而且可以设置多个过渡状态，而过渡只有开始和结束两个状态

> 7.inline-block间距解决办法？

①给父元素设置font-size:0;同时给子元素设置相应的大小  
②设置浮动

> 8.Ajax中get和post请求方式的区别?

①post数据量大，get请求速度快  
②两者的请求方式不同，get请求参数拼接在路径后面，post请求放在请求体中，在这之前设置请求头  
③get请求存在缓存问题，可以拼接时间戳来解决数据得不到更新的问题

> 9.jsonp的实现流程？

动态的创建script标签，后端返回回调函数的执行，并将请求的数据作为实参传入

> 10.ajax和jsonp的区别？

①两者最大的区别就是ajax遵循同源策略，不能跨域，而jsonp可以  
②ajax有get和post两种请求，jsonp只有一种get请求  
③两者的实现方式也不一样，ajax是创建实例对象，jsonp是动态的创建script标签

> 11.json对象与字符串互转方法？

JSON.stringify()  
JSON.parse()

> 12.简述事件委托的优点？

①只需要绑定一次，减少DOM操作  
②对于新添加的元素，同样可以触发事件

> 13.写出处理事件冒泡和阻止浏览器默认行为的兼容处理？

> 14.写出获取页面滚动高度及设置页面滚动高度兼容写法?

//获取页面滚动高度
    var st = document.body.scrollTop || document.documentElement.scrollTop;
    //设置页面滚动高度
    window.scrollTo(x,y)  置顶的话0,0

> 15.简述原型链的概念

原型链主要用作继承，每个对象都有一个**proto**属性指向它的构造函数的原型对象，当访问这个对象的属性或方法时，会先在自身查找，如果找不到，会沿着它的**proto**属性一级一级的向上查找，直到为空为止。

> 16.简述一级DOM事件和二级DOM事件的区别？

一级DOM事件只能绑定一个同名事件，二级DOM事件添加事件监听，可以绑定多个同名事件

> 17.jQuery对象与DOM对象互转方式？

①DOM对象转化为jQuery对象的方法

直接用$包起来
     如：var  box = document.getElementById("box");
            $(box)

括号里面的box不加引号

②jQuery对象转为DOM对象的方法  
A.$("\#box")\[0\]

B.$("\#box").get(0)

> 18.解决get请求缓存机制?

拼时间戳

> 19.简述call,apply,bind的用法和区别？

三者都用来改变this指向，区别是，bind是在函数定义时改变this指向，call和apply都是函数调用时改变this指向，call和apply的区别是传参不同，call传参直接写参数，而apply所有的参数都放在一个数组中。

> 20.简述pc端布局常见问题？pc端常见的兼容问题？

①a标签中包一个img标签，在IE低版本中，点击时会出现边框，解决办法给图片去掉边框  
②行内块间距问题，解决办法设置父元素的font-size为0，或者设置浮动  
③display:inlink-block在IE9以下不起效，设置

{*display:inline;*zoom:1;display:inline-block;}

④外边距穿透问题，解决办法给父元素设置overflow:hidden;  
⑤在IE低版本中，定位层级问题，父元素设置相对定位，子元素设置绝对定位，父元素会盖在子元素上，解决办法给父元素设置z-index:1  
⑥li元素在低版本IE中存在间距，解决办法设置浮动，宽度和父元素的宽度一样  
⑦在IE5中父元素的高度小于子元素的高度时，父元素的高度会被子元素撑开，解决办法是设置定位，脱离文档流。

> 21.简述同源策略的概念？

同源指的是端口，域名，协议相同

> 22.简述数组splice方法的几种用法？

删除，替换和插入，第一个位置表示开始的索引值，第二位表示删除几位，第三位表示要插入的值是谁

> 23.简述js节点操作方法

创建节点 creatElement  
添加节点 appendChild  
删除节点 removeChild  
克隆节点 cloneNode  
在某个节点之前插入节点 insertBefore

> 24.简述cookie和webstorge的区别

①存储量的区别，cookie存储量小，只有4kB左右，webstorage有5M左右  
②cookie在没有设置path的前提下只能在当前文件夹和子文件夹下才能访问，webstorage只要在本地服务器就可以访问到。  
③cookie存在有效期，当没有设置有效期时，窗口关闭，存储的信息就不存在了，这一点和sessionstorage一样。localstorage是持久化保存，除非手动删除。  
④cookie会在浏览器和服务端之间往返，localstorage只能在客户端。

> 25.谈一下对websocket的理解？

websocket是即时通信，遵循TCP协议，客户端和服务端全双工通信，之前服务端是不能主动向客户端发送数据的，需要客户端轮询，多次向服务端发送请求，服务端有数据才会返回，而websocket允许服务端主动向客户端发送数据，客户端用message来接收数据。

> 26.简述对em,rem,vw/vh单位的理解。

em是相对长度单位，相对于父节点的字体尺寸长度，如当前文本没有设置，则相对于浏览器的默认字体大小  
rem是css3新增的单位，也是相对单位，相对的是html根元素。

vw,vh相对于视口大小的宽度和高度，1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

> 27.简述懒加载插件实现原理?

原理就是先用占位图占位，监听滚动事件，当图片的offsetTop值小于窗口的高度加屏幕的滚动高度时，赋给图片真正的路径，显示真正的图片。

> 28.简述gulp的用途

gulp是自动化构建工具，构建什么呢？就是通过写一个gulpfile.js脚本让gulp运行，让他自动化的合并，压缩文件等。

> 29.vue中v-if和v-show的区别？

v-if 是节点的插入和移除  
v-show是节点的显示和隐藏

> 30.vue中数据响应的原理？

在生成vue实例对象时，会给data里的属性添加set和get方法，这个方法依赖于es5的defineProperty

> 31.列出vue常用内置指令?

v-bind 绑定属性  
v-on 绑定事件  
v-model：表单元素双向绑定  
v-for:遍历  
v-if:判断 元素的添加和移除  
v-show:元素的显示和隐藏

> 32.Vue中computed和methods的区别？

methods里的方法只要模板更新，就会重新执行  
compted中，只有当依赖项发生变化时，才会触发

> 33.移动端开发常见问题?

①移动端屏幕适配  
②固定定位会和键盘冲突  
③点击300ms延迟问题，解决办法使用zeptode tap或者fastclick  
④点透问题  
⑤点击a标签会有灰块，解决办法-webkit-tap-highlight-color:rgba(0,0,0,0);  
⑥要以真机测试的为准

> 34.session是什么？

我们每次请求一个页面，都是使用http协议，而http协议无状态无关联，无法判断多次请求是否来自同一个用户，而session可以在服务端生成session\_Id来保存用户信息，进行用户的登录验证，session比cookie要安全。session的专业术语叫会话控制。  
[https://blog.csdn.net/h19910518/article/details/79348051][https_blog.csdn.net_h19910518_article_details_79348051]

> 35.什么是闭包？

闭包就是定义在函数内部的函数， 并被外部调用，可以return出来，也可以用一个全局变量去接收

> 36.闭包的作用？

闭包能够访问函数内部的变量，还可以使变量一直保存在内存中，不被销毁。但是滥用闭包，会造成内存泄漏。

> 37.谈谈你对promise的理解？

promise是一种解决回调函数异步编程的方案，它的出现是为了解决回调地狱的问题，它实际上就是提供一个容器，它将处理的结果resolve出去，然后用它的实例对象的then方法执行下面的操作，支持链式语法。

> 38.谈谈你对token机制的理解

[https://blog.csdn.net/daimengs/article/details/81088172][https_blog.csdn.net_daimengs_article_details_81088172]

token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。  
客户端使用用户名和密码进行登录，服务端收到请求，会进行验证，验证成功后会在服务端生成一个token，服务端会把这个token发送给客户端，客户端收到token后会把这个token保存起来，可以存在cookie中，也可以存在本地存储中，客户端每次向服务端发送请求的时候，都会携带者这个token，服务端收到请求，就会去验证这个token，如果验证成功，就向客户端发送请求的数据。

> 39.token和session有啥区别？

[https://www.jianshu.com/p/43c3003ac957][https_www.jianshu.com_p_43c3003ac957]

token比session安全性更高，更简单。token是一个依据，session和cookie都是文件，存的地方不一样而已。

> 40.如何解决vue跨域问题？

①在config里的index.js文件中设置代理

> 41.vuex是什么？

vuex用来处理复杂的组件通信，当多个组件依赖于同一个状态，或者多个组件需要更改同一个状态的时候,可以用vuex来解决，实际上可以理解为他就是一个存放公共资源的容器，谁需要谁来拿，组件之间不需要通信

> 42.说说vue的组件通信？

父传子用props,子传父用自定义事件，当侧重于赋值的时候，可以使用vue提供的语法糖，v-model或者是.sync修饰符。

> 43.vue组件和实例的区别？

①组件中的data是一个函数返回一个对象，而实例中的data是一个对象  
②组件中没有el这个挂载点  
除了这两点，实例和组件基本上一样的

> 44.在vue中如何操作dom节点？

在要操作的标签上写ref="box"某个变量名，在要用的地方this.$refs.box

> 45.vue组件中，插槽的使用场景？

①一个组件中有完整的功能，但是想要修改内容的时候  
②只是一个提供容器的组件，放什么由使用者决定的时候

> 46.为什么要使用组件？

因为高内聚，低耦合，提高开发效率

> 47.vue中的v-for种key的作用？

作为唯一标识，因为vue在渲染列表时，会就地复用dom元素，导致之前操作的dom元素依然存在，给他加个key作为唯一标识，就可以删掉此dom元素。不然删掉的之后内容，壳子还在。

> 48.vue双向绑定的原理?

双向绑定一般用在获取表单元素时，绑定表单元素的value值，监听它的input事件，将输入框的值赋值给在data 里面设置的属性

> 49.自定义指令的底层是什么？

自定义指令的底层是dom操作

> 50.自定义指令有哪些钩子函数？

①当元素插入页面时调用 inserted 已经插入父节点  
binding 还未插入父节点  
一般使用inserted  
②整个事例中，数据更新时 update:发生在子节点更新之前  
componentUpdated:全部更新后调用  
③unbind:解绑 减少内存，移除节点，清空事件  
这些钩子函数，第一个参数是el，标识绑定的元素，第二个参数是binding,binding.value指的是你绑定的那个属性的值，第三个参数是vnode,vnode.context指元素所在的vue实例

> 51.谈谈你对vue 的生命周期的理解?

每个实例对象在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期，一共有8个过程，beforeCreate()创建之前，created()创建，在这里才能访问到data里的数据，created()和beforeMount()之间会判断是否有挂在节点el，若没有，停止编译，若有，判断有无template，如果有，就只渲染template中的模板，否则渲染外部的模板，之后是mounted()，在这个阶段页面已经渲染，真实的数据已经插入，通常会在这个阶段进行dom操作，当数据发生变化的时候，会有数据的更新,beforeUpdate()和updated()，之后是beforeDestroy和destroyed()，销毁是要将生成实例对象的所绑定的东西全部清空。

> 52.watch和computed的区别？

①watch监听的属性需要在data里定义，computed不需要  
②watch监听的属性，需要在created中初始化，computed不需要  
③watch 里的方法不需要return ,computed需要

> 53.面向对象继承的5种办法？

①用call或者apply方法改变父构造函数的this指向，但是这种办法只能拿到父构造函数的私有属性。  
②将父构造函数的实例对象赋值给子构造函数的prototype属性，但是这种办法将父构造函数的私有和公有的属性都给了子构造函数的prototype属性  
③只将父构造函数的prototype属性赋值给子构造函数的prototype属性，这样拿到公有的，用第一种办法改变this指向拿到私有的，但是对象是引用类型，改变子的，父的也会跟着变，这样是不好的。  
④利用空方法作为中介，将父构造函数的prototype属性赋值给空方法的prototype属性，将空方法的实例对象赋值给子构造函数的prototype属性，这样就拿到了公有的，而且没有引用关系，之后再通过改变this指向来拿私有的属性，就可以了，这也是实际开发中推荐的用法。因为空方法几乎不占内存。修改子构造函数的prototype属性并不会影响到父构造函数的prototype属性  
⑤还有一种就是深拷贝啦，通过循环遍历，一个一个赋值，但是复杂情况下并不适用

> 54.什么是express?

基于nodejs的web开发框架

> 55.合并对象有哪些方法？

①es6语法中的扩展运算符...  
②es6语法中的Object.assign(\{\},obj1,obj2)  
③$.extend(\{\},obj1,obj2)  
②和③用法类似,第一个位置是合并后的对象

> 56.深拷贝有哪几种方法？

①递归  
②json转换  
③$.extend(true,\{\},obj) 返回的是拷贝或合并后的结果

> 57.let const var 的区别？

let和const存在块级作用域，不能变量提升，也不允许重复声明，而var和他们相反  
const是声明一个常量，一旦赋值，不可更改

> 58.箭头函数需要注意什么？

①this指向问题  
this指向函数定义的作用域  
②没有arguments  
③不能作为构造函数

> 59.判断数据类型的方法有哪些?

Object.prototype.toString.call()最全  
typeof 不能判断null ,object,arr  
constructor 不能判断null undefined

> 60.如何理解MVVM模式和MVC模式？

MVC是经典的开发模式，model数据库，提供数据，view，视图，controller业务逻辑，路由分配，这种开发模式controller负责的太多，难以维护，m层和v层直接打交道，高耦合，所以为了解决这些问题，出现了MVVM模式，目前开发中用的模式，model后端提供数据，view视图，vm框架核心，model后端负责，view和VM前端负责，前后端分离，实现高内聚，低耦合，前后端同时开工，没有先后顺序，提高开发效率。

61.如何判断this的指向？

总体来说是谁调用指向谁，在构造函数内部，指向实例对象  
在对象方法的内部，this指向当前对象  
在事件处理函数内部，this指向当前dom事件

> 62.面向对象编程有几种模式？

①工厂模式 返回一个对象，这个对象和函数无关  
②构造函数模式 this指向它的实例对象  
③原型对象模式 将私有的属性放在构造函数内部，公共的属性和方法放在他的原型对象上  
实际开发中是构造函数模式+原型对象模式

> 63.svg和canvas的异同？

svg和canvas都是用代码画图，但是svg用标签，canvas是要操作js,svg画的图是矢量图，无限放大不会失真，canvas画的图是位图，放大之后都是马赛克。

> 64.引用类型有哪些？值类型有哪些？

引用类型有：对象 数组 函数  
值类型：数值，字符串，布尔，undefined ，null

> 65.布尔值为假的值有哪些？

0,false,"",undefined,null,NaN

> 66.用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等，包括它自己。

> 67.在什么情况下会出现NaN值？

①在表达式计算时  
②Number,ParseInt,ParseFloat类型转换时

> [68.link][]引入css和@import引入css的区别？

①两者导入的语法不同 一个是link标签，href中写样式路径，一个是在css文件引入或者在style标签中引入@import url("sx.css")  
②语法结构不同 link 是标签，只能放在html中，后者看做css样式  
③加载顺序 link方式引入的,css文件和html文件一起加载，使用import方式，会先加载html文档，最后加载css文件  
④DOM的可操控性 @import DOM不可操控  
⑤兼容性 @import低版本浏览器不支持

> 69.IE盒子模型和标准的css模型的区别？

标准盒子模型的宽：指内容的宽  
IE盒子模型的宽：内容宽+填充宽+边框宽

> 70.面向对象编程的理解?

面向对象以对象为个体，不再操作底层，每个个体有多种行为，每个行为都是一个方法。  
面向对象编程的优势：更灵活，拓展性更强，维护成本低。

> 71.微信小程序如何减小体积？

①减少代码量，提取公共代码，复用  
②将图片资源放到服务器上，提供网络路径

> 72.为什么要使用分包？

因为微信小程序限制大小不能超过8M，主包大小不能超过2M，使用分包可以扩容

> 73.wxs是什么？

wxs是为了解决在模板中不能执行方法，对数据不能处理的问题，这是小程序的缺陷

> 74.微信小程序的转发怎么实现？

①在app.json里的window中开启，然后在生命周期函数onshareAppMessage中return 一个对象,设置你想要展示的标题，图片什么的  
②button按钮中设置属性open-type="share"

> 75.vue和微信小程序的数据响应有啥区别？

vue直接是this.data,微信小程序是this.setData(\{给data里的属性赋值\})

> 76.cookie和session的区别？

①存储位置,cookie存在客户端，session存在服务端  
②cookie存储的是字符串，session存储的是对象  
③session比cookie更安全  
④session依赖于cookie  
⑤session不区分路径，cookie在不设置path的前提下只能访问当前文件夹和子文件夹。

77.为什么使用异步组件？

因为初次加载页面，并不需要所有的组件，如果全部请求，会导致页面加载速度缓慢，所以使用异步组件，需要什么，加载什么。

> 78.什么是jsx？

jsx是html和js的混合写法，遇到 < 解析html标签，遇到\{\}解析js语法。

> 79.keep-alive是什么？

keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中。

> 80.在watch监听时，有时数据嵌套太深，监听不到他的变化，怎么办？

handler:function(){
      这里面写你要监听的属性的相关函数
    },
    deep:true

> 81.如何优化vue的首屏渲染速度？

①使用ui组件时，尽量按需加载，不要全部都引入；  
②使用异步加载

> 82.vue如何全局拦截？

导航守卫 router.beforeEach

> 83.如何进行兄弟组件通信？

①可以借助父组件  
②vuex  
③利用bus传值

作者：刘宏儿  
链接：https://www.jianshu.com/p/95111cdbe645

[Fundebug]: https://www.fundebug.com/
[https_blog.csdn.net_h19910518_article_details_79348051]: https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fh19910518%2Farticle%2Fdetails%2F79348051
[https_blog.csdn.net_daimengs_article_details_81088172]: https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fdaimengs%2Farticle%2Fdetails%2F81088172
[https_www.jianshu.com_p_43c3003ac957]: https://www.jianshu.com/p/43c3003ac957
[68.link]: https://links.jianshu.com/go?to=http%3A%2F%2F68.link