20212022最新Web前端经典⾯试试题及答案-史上最全前端⾯
试题（含答案）
推荐⽂章：
前端⾯试题汇总资料：
需要资料的同学可以给我留⾔
1、JavaScript数组的常⽤⽅法有哪些？
答：push、pop、shift、unshift、join、sort、concat、reverse、splice、slice、indexOf等
详细资料：
2、 js中null和undefined区别？
1. 相同点
  if 判断语句中，两者都会被转换为false
2. 不同点
Number转换的值不同，Number(null)输出为0, Number(undefined)输出为NaN
null表⽰⼀个值被定义了，但是这个值是空值
作为函数的参数，表⽰函数的参数不是对象sqlyog查看mysql版本
作为对象原型链的终点 （PrototypeOf(Object.prototype)）
定义⼀个值为null是合理的，但定义为undefined不合理（var name = null）     
undefined表⽰缺少值，即此处应该有值，但是还没有定义
变量被声明了还没有赋值，就为undefined
调⽤函数时应该提供的参数还没有提供，该参数就等于undefined
对象没有赋值的属性，该属性的值就等于undefined
函数没有返回值，默认返回undefined
描述new操作符具体⼲了什么？
题⽬解析
先看代码
var Func=function(){
};
var func=new Func ();
new共经过了4⼏个阶段
1、创建⼀个空对象
varobj=new Object();
2、设置原型链
obj.__proto__= Func.prototype;
3、让Func中的this指向obj，并执⾏Func的函数体。
var result =Func.call(obj);
4、判断Func的返回值类型：
如果是值类型，返回obj。如果是引⽤类型，就返回这个引⽤类型的对象。
if (typeof(result) == "object"){
func=result;
}
else{
func=obj;;
}
js中apply和call的作⽤和区别是什么？
1、call，apply都属于Function.prototype的⼀个⽅法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个⽅法)都有call，apply属性。既然作为⽅法的属性，那它们的使⽤就当然是针对⽅法的了，这两个⽅法是容易混淆的，因为它们的作⽤⼀样，只是使⽤⽅式不同。
2、语法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
3、相同点：两个⽅法产⽣的作⽤是完全⼀样的。
4、不同点：⽅法传递的参数不同。
列举js中的性能优化的⽅案
包括：
页⾯级优化和代码级优化。然后细分
页⾯级优化：⽐如：
1.减少 HTTP请求数
2.将外部脚本置底（将脚本内容在页⾯信息内容加载后再加载）
3.异步执⾏ inline脚本(其实原理和上⾯是⼀样，保证脚本在页⾯内容后⾯加载。)
4. Lazy Load Javascript（只有在需要加载的时候加载，在⼀般情况下并不加载信息内容。）
5. 将 CSS放在 HEAD中
6. 异步请求 Callback（就是将⼀些⾏为样式提取出来，慢慢的加载信息的内容）
7. 减少不必要的 HTTP跳转
8. 避免重复的资源请求
代码级优化：⽐如：
js写法
CSS选择符
HTML
Image压缩
参考：
参考：
7.js延迟加载的⽅式有哪些？
⼀般有以下⼏种⽅式：
defer 属性
async 属性
syntax score动态创建DOM⽅式
使⽤jQuery的getScript⽅法
使⽤setTimeout延迟⽅法
让JS最后加载
参考：
es6解构赋值是什么意思？let{a}=B出现的
url输⼊到页⾯显⽰全过程？
浏览器渲染的整个流程
浏览器的整个流程如上图所⽰。
1、  ⾸先当⽤户输⼊⼀个URL的时候，浏览器就会发送⼀个请求，请求URL对应的资源。
2、  然后浏览器的HTML解析器会将这个⽂件解析，并且构建成⼀棵DOM树。
3、  在构建DOM树的时候，遇到JS和CSS元素，HTML解析器就换将控制权转让给JS解析器或者是CSS解析器。
web前端基础面试题4、  JS解析器或者是CSS解析器解析完这个元素时候，HTML⼜继续解析下个元素，直到整棵DOM树构建完成。
5、  DOM树构建完之后，浏览器把DOM树中的⼀些不可视元素去掉，然后与CSSOM合成⼀棵render树。
6、  接着浏览器根据这棵render树，计算出各个节点(元素)在屏幕的位置。这个过程叫做layout，输出的是⼀棵layout树。
7、  最后浏览器根据这棵layout树，将页⾯渲染到屏幕上去。
资料：
前端⾯试题之ES6新特性
我们来看看ES6都做了哪些扩展。
Let和const关键字
变量的解构赋值
字符串，数值的扩展
数组，对象的扩展
函数的扩展
资料：
css垂直居中的问题：所有的⽅法都在这⾥了
资料：
说说vue的双向数据绑定实现原理（其实今年已经很少问到这个了，但是有些公司的⾯试官还是会问到）
菜鸟教程排序
日英意宣布开发新一代战机通过Object.definerProperty来劫持各个数据的属性的setter和getter，在数据变化时，发布消息给依赖收集器，通知观察者去执⾏回调函数，达到视图更新的效果。（但是使⽤Object.definerProperty实现监听时是有⼀些痛点的，⽐如，①⽆法监测数组下标变化，导致数组删除或者插⼊元素时，数组的变化⽆法实时响应；②只能对对象的属性进⾏监测，当对象深度⽐较深时，只能遍历每个属性来实现监听。vue3.0采⽤的Proxy，就完全避开了Object.definerProperty⽅法的这些痛点）
vue如何在组件之间进⾏传值
java在线答题props、emit、vuex、路由传参、通过本地存储传参、vue-bus(事件巴⼠)、 $refs、 $children、$parent
vuex和vue的双向数据绑定有什么冲突
在严格模式下vuex中的state对象中的属性是不能随意更改的，但是在表单处理时使⽤v-model时⽤户可以随意更改数据，如果vuex 中的state中的属性直接绑在v-model中时会抛出⼀个错误。
vue-router中的history模式和hash模式的区别
说⼀下vue的⽣命周期（回答的时候，顺便说⼀下哪个钩⼦函数实现了什么功能）beforeCreate：初始化事件，进⾏数据观测。
created:data数据进⾏绑定。
beforeMount：虚拟DOM替换真实DOM。
mounted：将DOM元素挂载到页⾯。
beforeUpdate: data数据更新之前。

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