2020前端开发⾯试题总结（最新）
2020年，注定是不平凡的⼀年，受疫情影响，好多想跳槽的伙伴，⼀直按耐者，这次⾯试题总结，就是我的朋友，最近再⾯试中总结出来的，整理⼀下希望可以帮助到你们。（ps：后期也会不定期更新总结新的⾯试题）
1.什么是闭包，闭包有什么作⽤？
闭包就是能够读取其他函数内部的变量的函数，本质上就是将函数内部和函数外部连接起来的⼀座桥梁
⽤途：1：可以读取函数内部的变量2：可以让这些变量始终保存在内存中
最简单的列⼦ for中添加延时器 打印下标：（会⼀直打印最后⼀个下标）
解决⽅案就是通过闭包把变量i给存起来 详情看这
2.es6新特性（es6语法糖）
Let和const，两者都是块级作⽤域，let声明的变量，const声明的常量
const ⽣明的不可被修改 let 不可以声明前置 var 可以
箭头函数，不需要function关键字来创建函数，继承上下⽂的this
函数的参数默认值
解构赋值，（这⾥具体的实现可以⾃⾏去了解下）从数组和对象中提取值，给变量赋值
For of遍历数组 for in遍历对象中的属性
3、Es6规范：
建议不使⽤var，使⽤let和const，优先使⽤const
Var定义的变量可以修改，如果不初始化会输出undefined
Let是块级作⽤域，在函数内部使⽤let定义，对函数外部没影响
Const定义的变量不可修改，⽽且必须初始化
优先使⽤解构赋值
使⽤import取代report
静态字符⼀律使⽤单引号或反引号，不建议使⽤双引号
3、h5新特性
语义化标签-footer
增强型表单-input多个type
新增表单元素out put
新增表单属性-placehoder min max
⾳频、视频
Canvas和svg
地理定位
Websocket
4、css3新特性
选择器
背景和边框
⽂本效果
动画和过渡
多列布局
5、w3c标准
是⼀系类标准的集合，结构标准html，表现标准css，动作标准javascrip，除此之外还有xml，dom标准。例如：所有标签都使⽤⼩写，同⼀页⾯同⼀id会冲突
6、响应式布局和⾃适应布局
响应式布局“meta viewport”核⼼是媒体查询来设置样式media queries
⾃适应布局：⾃动识别屏幕宽度，rem，百分⽐
弹性布局（flex）：（）
7、js继承原理
如果继承⽗类的属性和⽅法⽤call和apply (详情：)
如果继承⽗类原型直接将⼦类prototype指向⽗类prototype(详情：)
8、cookie，sessionstorage和localstorage的区别
Cookie存储⼤⼩4kb，请求时会先发送到服务器，然后回传给浏览器，可以在同源页⾯中共享
sessionStorage和localStorage不会⾃动把数据发送给服务器，仅在本地保存。
cookie：只在设置的cookie过期时间之前有效，即使窗⼝关闭或浏览器关闭
sessionStorage：仅在当前浏览器窗⼝关闭之前有效；（存储⼤⼩再5MB）
localStorage：始终有效，窗⼝或浏览器关闭也⼀直保存，本地存储，因此⽤作持久数据；（存储⼤⼩再5MB）
sessionStorage：不在不同的浏览器窗⼝中共享，即使是同⼀个页⾯
localstorage和Cookie：在所有同源窗⼝中都是共享的；也就是说只要浏览器不关闭，数据仍然存在
9、ajax请求原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，
然后⽤javascript来操作DOM⽽更新页⾯（XMLHttpRequest是ajax的核⼼机制）
简单的说，也就是JavaScript可以及时的向服务器提出请求并及时响应。⽽不阻塞⽤户。达到⽆刷新效果。由事件触发，创建⼀个
XMLHttpRequest对象，把HTTP⽅法 （POST/GET）和⽬标URL以及请求返回后的回调函数设置到XMLHttpRequest对象，通过
XMLHttpRequest向服务器发送请求，请求发送后继续响应⽤户的界⾯交互，只有等到请求真正从服务器返回的时候才调⽤callback()函数，对响应数据进⾏处理。
补充：Ajax的⼯作原理相当于在⽤户和服务器之间加了—个中间层(AJAX引擎)，使⽤户操作与服务器响应异步化。并不是所有的⽤户请求都提交给服务器
10、同源策略
由于浏览器同源策略的限制，同⼀域名，同⼀协议，同⼀端⼝号，有⼀个不满⾜请求就会发⽣跨域问题
Jsonp可以突破同源策略的限制实现跨域
Jsonp执⾏过程：先在客户端注册⼀个callback，然后把callback的名字传给服务器，然后服务器返回数据会将这个callback参数作为函数名来包裹json数据这样客户端就可以随意定制⾃⼰的函数来⾃动处理返回的数据了（当然最简单的跨域解决⽅案就是后台操作 ，允许你进⾏跨域请求）
11，如何实现下拉刷新上拉加载
下拉刷新：监听touchstart事件，记录初始值的值
监听touchmove事件，记录计算当前滑动的值和初始值的距离，⼤于0表⽰向下拉动，并借助CSS3的translateY属性使元素跟随⼿势向下滑动对应的差值，并设置⼀个最⼤距离
监听touchend事件，此时滑到最⼤值，触发callback，同时将距离设置为0，元素回到初始状态
当滑动距离⼤于0时，提⽰正在下拉刷新，当滑到最⼤距离并松⼿时，执⾏回调函数，提⽰正在更新操作DropDownRefresh.vue
上拉加载：获取当前滚动条的scrolltop值、当前可视范围的⾼度、⽂档的总⾼度，当滚动条和可视范围的⾼度⼤于⽂档总⾼度的时候，触发
callback（考虑函数节流）PullUpReload.vue
12、移动端组件库有哪些
Mint-UI
vant
13、什么是vuex，为什么要使⽤vuex，vuex的属性
Vuex是vue的状态管理管理系统
当我们遇到多个组件共享状态的时候，多层组件的传值⾮繁琐，不利于维护，因此我们把组件的共享状态抽取出来，以⼀个单例模式进⾏管理，在这种模式下，不管在哪个组件都可以获取状态或触发⾏为
属性：state==》基本数据；getters==》从基本数据派⽣的数据；mutations==》提交更改数据的⽅法actions==》像⼀个装饰器，包裹着mutations，使之可以异步；modules==》模块化vuex
14、vuex在页⾯刷新的时候会有什么问题？
Vuex在页⾯刷新后state数据会初始化（由于刷新后组件重新创建，⽣命周期重新执⾏）
Vuex中的数据保存在运⾏内存中，⼀旦刷新，运⾏内存的数据释放
解决⽅法：在页⾯刷新前将vuex的数据先保存⾄sessionStorage（以防请求数据量过⼤页⾯加载时拿不到返回的数据）
15、什么是websocket，在哪些地⽅使⽤？
Upgrade: websocket Connection: Upgrade是核⼼(Websocket是⼀个持久化的协议)
服务端就可以主动推送信息给客户端，因为ajax轮询的原理⾮常简单，让浏览器隔个⼏秒就发送⼀次请求，询问服务器是否有新信息。是⾮常消耗资源，ajax轮询 需要服务器有很快的处理速度和资源。long poll 需要有很⾼的并发，也就是说同时接待客户的能⼒。
svg和h5的关系16、vue双向数据绑定原理及实现
实现mvvm的双向绑定，采⽤数据劫持结合发布者-订阅者模式的⽅式，通过Object.defineProperty()来劫持各个属性的setter和getter(也就是说数据和视图同步，数据发⽣变化，视图跟着变化，视图变化，数据也随之发⽣改变；在数据变动时发布消息给订阅者，触发相应监听回调。)
18、es6新增的数据类型
Symbol保证每个属性的名字都是独⼀⽆⼆的
Set对象⾥⾯只要有重复的值就会只保留⼀个
Map可以允许任何类型作为对象的键，弥补了object只能使⽤字符串作为键的问题
19、块元素和⾏内元素有什么区别？
块元素可以设置宽⾼，并且设置的宽度独占⼀⾏
块元素：div，h1-6，img，hr，form
⾏内元素：a，br，input，em，span
display：block设为块级元素
20、盒模型有⼏种，以及区别
标准盒模型：设置的width或height是对实际内容（content）的width或height进⾏设置，内容周围的border和padding另外设置，即盒⼦模型的width（height）=设置的content的宽⾼+padding+border+margin
怪异盒模型: 设置的width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进⾏设置的，其盒模型的width（height）=设置的width（height）+外边距margin.
解决两者的兼容：可尝试对⽗元素使⽤内边距，对⼦元素使⽤外边距
21、定位
相对定位：相对于⾃⼰原来的位置定位
绝对定位的参照物是相对于该元素最近的已定位的祖先元素，如果没有⼀个祖先元素设置定位，那么 参照物是body。
固定定位：相对于整个⽂档
22、js的基础数据类型
js中有5种数据类型:Undefined、Null、Boolean、Number和String。
23、对数组遍历的⼏种⽅式
Foreach，map，for of （详细看这）
23、vue插槽
插槽就是Vue实现的⼀套内容分发的API，将元素作为承载分发内容的出⼝。（没有插槽的情况下在组件标签内写⼀些内容是不起任何作⽤的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这⾥了）具名插槽，就是给这个插槽起个名字
24、vue实现页⾯跳转的⼏种⽅式
router.push（/页⾯名）、this.
Router-link，（1）
25、⼩程序开发与vue开发有什么区别
⼩程序开发路由放在app.json⽂件中，能在⾥⾯定义每⼀个路由，定义之后，可以⾃动创建wxss，js，wxml三个⽂件
Vue需要先创建组建之后，再在router.js⾥⾯引⼊这个路由
⼩程序⽣命周期更多
（还有就是数据渲染类，条件判断。赋值啊。需要⾃⼰⼤致的去看⼀下）
26、CSS — flaot浮动的原因与副作⽤以及清除浮动
flaot浮动的原因：使⽤浮动之后，元素会脱离标准的⽂档流。（标准的⽂档流就是按照不同的元素种类，如块元素，⾏元素按照各⾃的特点去排列显⽰，虽然属性不同，但都是按照从上到下，从左到右的顺序进⾏排列）
副作⽤：⼀个块元素，⼀个⾏内元素。⾏内元素如⽂字会浮动在浮动元素的周围，为浮动元素留出空间。
副作⽤：两个块级元素浮动，出现⽗元素塌缩
清除浮动产⽣的副作⽤：1.通过clear属性进⾏浮动消除（clear他不允许⾃⼰的周围有浮动这个属性主要是为了解决元素异位的问题，不能解决⽗元素塌陷的问题；针对异位的问题，我们只需要给发⽣异位的元素设置⼀个clear属性就⾏，如果是左浮动，clear的值就取left，其他的相应的去取。
）
清除浮动产⽣的副作⽤：2.⼿动给⽗元素加⾼度
清除浮动产⽣的副作⽤：3.给⽗元素添加浮动
清除浮动产⽣的副作⽤：4，给⽗元素添加overflow结合zoom:1⼀起使⽤（⽗元素样式⾥⾯加上overflow:hidden；和zoom:1，overflow主要是处理溢出问题的，我们这⾥就是⼦元素相对于⽗元素出现了溢出现象，zoom:1；的作⽤是为了兼容，⼤家都知道IE浏览器⼀直都是⼀个让⼈很头疼的东西，这个语句就是为了兼容IE浏览器的问题。）主要⽤来清除⾼度塌陷的问题
27.web前端性能优化⽅法
html语义化
语义化的html是让标签做⾃⼰该做的事，便于其他开发者阅读以及使代码规范，优雅整洁。 也是为了⽹络爬⾍更好的解析。
减少重复代码，压缩css，js代码⼤⼩
你的背景图⽚保证不超过3个以上，你的css⽂件不超过2个，js⽂件不超过3个。⽽且良好的遵守web标准的⼀些规定，css放到head中，js⽂件放到之前或者之后。
背景图⽚⼤⼩及数量1. 图⽚的⼤⼩可以压缩，尽量选择⽐较⼩的图⽚。2. 可将多张图⽚⽤css精灵之城 css sprites
减少http请求，合理设置缓存1. 合并css，js⽂件，减少css，js重复代码，合并图⽚等都是为了减少http请求，应为每次http请求的代价都是⾮常昂过的，所以减少http请求能有效优化访问性能。　2. 缓存能缓存得更多，缓存得更久，也是可以⼤⼤减少http请求，就优化了访问性能。
图⽚懒加载（lazyout images）(vue中插件lazyload)
减少cookie传输
⼀⽅⾯，cookie包含在每次请求和响应中，太⼤的cookie会严重影响数据传输，因此哪些数据需要写⼊cookie需要慎重考虑，尽量减少cookie中传输的数据量。另⼀⽅⾯，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使⽤独⽴域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。
js中减少DOM操作，避免使⽤eval和 Function，减少作⽤域链查（尽量把变量设为局部变量）。
暂时就那么多，后期会继续分享，如果哪有不对的地⽅，欢迎评论指导/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。