2020前端开发面试题总结(最新)

2020年，注定是不平凡的一年，受疫情影响，好多想跳槽的伙伴，一直按耐者，这次面试题总结，就是我的朋友，最近再面试中总结出来的，整理一下希望可以帮助到你们。（ps:后期也会不定期更新总结新的面试题）

1.什么是闭包，闭包有什么作用？

• 闭包就是能够读取其他函数内部的变量的函数，本质上就是将函数内部和函数外部连接起来的一座桥梁
• 用途：1：可以读取函数内部的变量2：可以让这些变量始终保存在内存中
• 最简单的列子 for中添加延时器 打印下标：（会一直打印最后一个下标）
• 解决方案就是通过闭包把变量i给存起来 详情看这https://blog.csdn.net/qq_46124502/article/details/106353007

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）：（https://blog.csdn.net/qq_46124502/article/details/106518826）

7、js继承原理

• 如果继承父类的属性和方法用call和apply (详情：https://blog.csdn.net/qq_46124502/article/details/106670773)
• 如果继承父类原型直接将子类prototype指向父类prototype(详情：https://blog.csdn.net/qq_46124502/article/details/106708371)

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 需要有很高的并发，也就是说同时接待客户的能力。

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 （详细看这https://blog.csdn.net/qq_46124502/article/details/106438128）

23、vue插槽

• 插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。（没有插槽的情况下在组件标签内写一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了）具名插槽，就是给这个插槽起个名字

24、vue实现页面跳转的几种方式

• Router-link，this.$router.push（/页面名）、this.$router.go（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，减少作用域链查找（尽量把变量设为局部变量）。

暂时就那么多，后期会继续分享，如果哪有不对的地方，欢迎评论指导/