2021前端面试题（更新中）

1. 状态码有哪些？都代表什么意思？
　　1XX 提示信息 - 表示请求已被成功接收，继续处理
　　2XX 成功 - 表示请求已被成功接收，理解，接受
　　3XX 重定向 - 要完成请求必须进行更进一步的处理
　　4XX 客户端错误 - 请求有语法错误或请求无法实现
　　5XX 服务器端错误 - 服务器未能实现合法的请求
　　
2.vue的优点 为什么使用VUE。相比原生他的优点有什么？
vue的两大优势：响应式编程、组件化。
vue的优势：轻量级框架、简单易学、双向数据绑定、虚拟DOM、组件化、数据与结构相分离。
vue缺点：不利于网页的seo优化。

3.闭包是什么？
闭包是指有权访问另一个作用域变量的函数，创建闭包的常用方式就是在一个函数下创建另一个函数。（注意:闭包容易造成内存泄漏，就是本应该被浏览器回收的变量没有被回收）

4.async的返回值是什么？
async返回值是promise对象，可以用then方法指定下一步操作
async可以看做把多个异步操作包装成一个promise对象await就是then的语法糖

5.vue如何和阻止事件冒泡？
在方法后面添加stop修饰符。

6.H5新增属性有哪些？
语义化标签，音频、视频，localStorage sessionStorage，画布，
拖拽释放。

7.CS3新增属性有哪些？
transform、translate,盒子模型，文字阴影，动画，渐变，圆角，
媒体查询。

8.ES6新增属性有哪些？
const、let两个关键字（不存在变量提升，有块级作用域），
this，promise，对象字面量，函数默认参，对象的结构赋值，
拓展运算符，async、await，map…。

9.箭头函数和普通函数的区别？
箭头函数的this指向调用者，普通函数的this指向window，
箭头函数没有原型，
箭头函数是匿名函数不能new。

10.localStorage、sessionStorage、cookie的区别？
他们都是用来存储浏览器数据的。
cookie可以设置数据的实效时间，默认是浏览器关闭后失效。
sessionstoraeg浏览器关闭或页面关闭后清除
localstorage数据是永久保存除非手动删除

11.vuex是什么？他的用法和原理是什么？
vuex是vue的状态管理工具。
他有state、mutations、getters、actions
state是存储数据对象的
mutations是操作数据对象的
getters是对数据做包装的（预处理
action是异步操作

12.前端跨域问题有哪些解决方案？
jsonp、利用浏览器对script加载完自动执行的机制。
Nginx、反向代理、一般利用cue-cli在vue.confige.js中设置接口在同一个后端域名和端口，正式服务则使用Nginx确保在同一域名

13.前端性能优化有哪些方法？
使用cdn加速
使用雪碧图、精灵图
图片懒加载
路由懒加载
压缩css、js文件
减少请求异步操作
接口尽可能做到复用
使用less、sass

14.哪些操作可能会造成游览器的内存泄漏？
内存泄漏是指本应该被浏览器内存回收的数据没有被回收
闭包、过多的全局变量、定时器…
vue实现双向数据绑定的原理。
数据劫持结合发布者、订阅者模式。
Object.defineproperty()的set方法和get方法

15.原型链和继承。
原型链：js对象独有的__proto__属性，当访问一个对象的属性时，如果该对象内不存在这个属性，会去它的__proto__属性所指向的那个对象（父对象）里找，直到null
proto：对象都有私有属性__proto__（），从对象指向实例原型
prototype：函数独有的属性，从一个函数指向一个对象，包含所有实例可共享的属性和方法，任何函数创建时，会默认创建该函数的prototype对象
constructor：实例的构造函数（constructor）属性，指向实例
所有函数和对象最终都是由Function构造函数得来，所以constructor属性的终点就是Function这个函数。
DOM事件流。
事件捕获，目标阶段，事件冒泡。

16.img标签是行内元素还是块级元素？
img标签没有独占一行所以是行内元素。

17.为什么行内元素img可以设置宽高？
img属于替换元素 具有内置宽高

18.flex兼容到IE几？
ie11部分兼容 ie12完全兼容
src和href的区别。
src和href都是外部资源引用
src用于替换这个元素href用于建立这个标签与外部资源的关系

19.改变this指向的方法有哪些。

// call 
function fn (a,b,c){
    console.log(this,a,b,c)
}
fn()
fn.call(document,1)

// apply
function fn (a,b,c){
    console.log(this,a,b,c)
}
fn.apply(docoment,[a,b,c])

// bind
function fn (a,b,c){
   console.log(this,a,b,c)
}
let ff = fn().bind('小明',1,2,3)

call、apply与bind区别：前两个可以自动执行，bind不会自动执行，需要手动调用
call、bind与apply区别：前两个都有无数个参数，apply只有两个参数，而且第二个参数为数组

20.HTTP请求过程、
DNS查找、TCP握手、浏览器发起HTTP请求、服务器接收请求、服务器处理请求并返回数据、浏览器接收响。

22.visibility 和 display 的差别（还有opacity)
opacity 用来设置透明度
display 定义建立布局时元素生成的显示框类型
visibility 用来设置元素是否可见。
opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。
1、display:none
（1）浏览器不会生成属性为display: none;的元素。
（2）display: none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。
（3）display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
（4）transition无效。
2、visibility:hidden
（1）元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。
（2）visibility: hidden会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏。
（3）visibility: hidden;不会触发该元素已经绑定的事件。
（4）visibility: hidden;动态修改此属性会引起重绘。
（5）transition无效。
3、opacity:0;filter：alpha(opacity=0-100;（考虑浏览器兼容性的问题，最好两个都写上）
（1）opacity:0;filter：alpha(opacity=0-100;只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式。
（2）opacity:0;filter：alpha(opacity=0-100;会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。
（3）opacity:0;filter：alpha(opacity=0-100;的元素依然能触发已经绑定的事件。
（4）transition有效。

23.隐式转换丶显示转换

1.undefined与null相等，但不恒等（=== ）
2.一个是number一个是string时，会尝试将string转换为number
3.隐式转换将boolean转换为number，0或1
4.隐式转换将Object转换成number或string，取决于另外一个对比量的类型
5.对于0、空字符串的判断，建议使用  “=== ” 。
6.“==”会对不同类型值进行类型转换再判断，“ ===”则不会。它会先判断两边的值类型，类型不匹配时直接为false。
显示转换一般指使用Number、String和Boolean三个构造函数，手动将各种类型的值，转换成数字、字符串或者布尔值。

24.vue中的key有什么作用

• key会用在虚拟DOM算法（diff算法）中，用来辨别新旧节点。
• 不带key的时候会最大限度减少元素的变动，尽可能用相同元素。（就地复用）
• 带key的时候，会基于相同的key来进行排列。（相同的复用）
• 带key还能触发过渡效果，以及触发组件的生命周期

25.计算属性和watch的区别

• watch适合一个属性改变多给属性computed适合多给属性改变一个数据
• computed有缓存同一数据不会再次执政watch没有缓存会再次执行
• watch提供更多的通用属性