2021Web前端常见面试题总结

1.src和href的区别 ？

Src用于替换当前元素，href用于在当前文档和引用资源之间确立联系.

Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片混入frame等元素。

Href是hypertext reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href=”common.css” rel=”stylesheet”/>那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

2.页面元素隐藏方式 和各自特点？

 display:none   元素在页面上将消失，不占据页面空间，会导致浏览器的回流与重绘,不能响应交互类事件；

visibility:hidden   元素在页面占据的空间不变，所以它只会导致浏览器重绘而不会回流，也不能响应交互类事件；

opacity:0    元素在页面占据的空间不变，不会导致浏览器回流或重绘（因为浏览器对于transform和opacity这两 种变化处理的方法为合成渲染），可以响应交互类事件。

3.用过哪些盒模型？

W3C的标准盒模型 在标准的盒子模型中， width指content部分的宽度

IE的盒模型 在IE盒子模型中，width表示content+padding+border这三个部分的宽度

4.使用sass目的是什么？

sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护 

5.js基本数据类型是什么？如何判断该类型数据？ 数据类型强制转化和隐式转化的区别？

js中有5种数据类型：Undefined、Null、Boolean、Number和String。还有一种复杂的数据类型Object，Object本质是一组无序的名值对组成的。

typeof 返回一个表示数据类型的字符串

强制转换：通过String（），Number（），Boolean（）函数强制转换00

隐式转换：隐式转换通常发生在运算符加减乘除，等于，还有小于，大于等

列：console.log(typeof '11')//输出string

console.log(typeog 11) //输出number

console.log('11' < 4 ) //输出fals

console.log(10-'101a') //NaN

console.log(10*'20') //200 number

console.log('10'*'20') //200 number

console.log('0'==false) //2个都转成数字

console.log(null==false) //false

6.如何判断一个对象是否具备某个属性 ？ 如何判断对象为空对象 ？

1.点( . )或者方括号( [ ] )

通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined

2.in 运算符

MDN 上对in运算符的介绍：如果指定的属性在指定的对象或其原型链中，则in 运算符返回true

3.hasOwnProperty()

7.let const 和 var 的区别 ？

Let声明变量 const声明常量不能修改的量

Var let const的区别：

Let const不存在变量提升，如果要使用变量，需要在变量定义之后使用

Let const不能重复声明变量，否则会报错

Let const在全局声明变量不会给window增加属性

Let const出现在代码块中，会把代码块变成块级作用域

8.箭头函数和普通函数的区别 ？

箭头函数是匿名函数，不能作为构造函数，不能使用new

箭头函数没有原型属性

This指向不同，箭头函数的this是定义时所在的对象，普通函数看前面有没有.，点前面是谁，this就是谁，没有.就是window

不可以使用arguments对象，该对象在函数体内不存在

9.解释什么叫回调地狱？

一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套

10.说明原生ajax的实现步骤？

1.创建对象
Var xmlhttp = new XMLHttpRequest()
2.设置回调函数
Htmlhttp.onreadystatechange = function(){	//设置回调函数
If(xmlhttp.readyState == 4){	//这里的4是请求的状态码，代表请求已经完成
If(xmlhttp.status == 200 || xmlhttp.status == 304){//响应的状态码，200成功
Var result = xmlhttp.responseText;	//获取的是响应文本
Alert(“获取了响应文本”+result)
}
}
}
3.设置请求地址
Var url = “userServlet.do?action=showUser”//post请求
Var data = “id=”+id;//为post请求绑定请求参数，需要以键值对形式绑定
4.设置open()方法
Xmlhttp.open(“POST”,url)
5.设置请求头(get请求可以忽略这一步)
Xmlhttp.setRequestHeader(“content-Type”,”application/x-www-form-urlencoded”)
6.发送请求
Xmlhttp.send(data)//post请求
Xmlhttp.send()//get请求

11.什么情况下会导致跨域？

1.因为同源策略限制，不同源会造成跨域

2.以下任意一种情况不同都是不同源：

协议不同：http://

子域名不同：www

主域名不同：baidu.com

端口号不同：8080

Ip地址和网址不同：www.baidu.com

1. 跨域解决方法：

1.jsonp 只能解决get跨域

12.vue 有几个生命周期 以及各个生命周期的调用时机 ？

8个

创建前/后beforeCreate/created： 

　　在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有

载入前/后beforeMount/mounted：

　　在beforeMount阶段，vue实例的el和data都初始化了，但还是挂载之前为虚拟的dom节点，data尚未替换。在mounted阶段，vue实例挂载完成，data成功渲染。

更新前/后beforeUpdate/updated：

　　当data变化时，会触发beforeUpdate和updated方法。不常用

销毁前/后beforeDestory/destoryed：

beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件

　　执行destroy方法后，vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在

13.vuex 是什么？ 怎么使用？那些场景用过 ？

Vuex是为vue.js应用程序开发的状态管理模式。只要来读取的状态集中放在store中；改变状态的方 式就是提交mutations。这是个同步的实物；异步逻辑应该封装中action中。

怎么使用：在main.js引入store，注入。新建一个目录store，...export。

应用场景：单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车

14.v-show 和 v-if 的作用和区别 ？

v-if和v-show都可以用来动态显示dom状态。

不同的是：v-if是真正的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show的元素始终会被渲染并保留在dom中，v-show只是简单地切换元素的css属性display：none；v-if是惰性的，如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换。v-if有更高的切换消耗。v-show有更高的初始渲染消耗。v-if适合运行时条件很少改变时使用。v-show适合频繁的切换。

15.vue 组件通信如何实现？

1.父子通信：父组件使用props组件传递数据，子组件通过事件向父组件发送消息使用v-on绑定自定义事件

2.子组件给父组件传递值：通过子组件内$emit触发自定义事件，子组件使用时v-on绑定自定义事件

3.任意组件之间通信$emit.$on:eventBus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时合适

4.vuex

16.组件中 data computed 和 watch的区别？

Computed是计算属性，依赖其他属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下 一次获取computed的值是才会重新计算computed的值。

Watch更多的是观察的作用，类似于某些数据的监听回调，每当监听的数据发生变化时都会执行回调进行后续操作

17.keep-alive的作用是什么？ 使用它的目的是什么？

Keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或者避免重新渲染

18.解释webpack四个核心概念？

Webpack是当下最流行的前端资源模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关 系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的bundle通常只有一个，有浏览器 加载.

它的高度可配置的，我们先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)

入口：webpack 创建应用程序所有依赖的关系图。图的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并根据依赖关系图确定需要打包的内容。可以将应用程序的入口起点认为是根上下文或 APP第一个启动文件。

输出(output)：将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。output选项可以控制webpack如何向硬盘写入编译文件。注意，即使可以存在多个entry起点，但只指定一个output配置。

Loader:loader可以使你在import或"加载"模块时预处理文件。因此，loader类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。

在更高层面，在webpack的配置中loader有两个目标：

1. 识别出应该被对应的loader进行转换的那些文件。(test属性)
2. 转换这些文件，从而使其能够被添加到依赖图中(并且最终添加到bundle中)。(use属性)

插件(plugins):插件是 wepback 的支柱功能。webpack 自身也是构建于-你在 webpack 配置中用到的相同的插件系统之上！

 19.浏览器输入url到页面加载全过程

 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP，向服务器发起请求； 
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）； 
浏览器对加载到的资源（HTML、JS、CSS 等）进行语法解析，建立相应的内部数据结构（如 
HTML 的 DOM Tree）； 
载入解析到的资源文件，渲染页面，完成。 

20.列举常见的loader 和plugin ？

Loader:

babel-loader:把es6转换为es5

Css-loader:加载css，支持模块化、压缩、文件导入等特性

style-loader：把css代码注入到JavaScript中，通过dom操作去加载css

Plugin:

Define-plugin:定义环境变量

commons-chunk-plugin：提取公共代码

Uglifyjs-webpack-plugin：通过uglifyEs压缩es6代码