总结最近前端面试题

Posted 2021-05-29 十九万里

1、什么是事件委托

事件委托（eventdelegation）事件委托又叫事件代理，是javascript中事件常用的技巧
事件委托就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听，事件代理的原理是DOM元素的事件冒泡，使用事件代理的好处是提高性能
优点：减少事件数量，提高性能，避免内存外泄，在低版本的ie中防止删除元素而没有设置移除事件容易造成内存溢出
javascript事件（零基础详解）

2、如何阻止事件冒泡

event.stoppropagetion() retuen false;

3、promise

promise是异步编程的一种解决方案，比传统的回调函数和事件更强大和合理，所谓promise，简单来说就会一个容器，里面保存着某个未来才会结束的事情。通常是一个异步操作，从语法上来说，promise是一个对象，从它可以获取异步操作的信息

promise 对象代表一个异步操作
有三种状态：
pending（进行中）
fulfiled（已成功）
rejected（已失败）
只有异步操作的结果可以决定当前是哪一种状态任何其他操作都无法改变这个状态，这也是promise这个名字的由来
缺点：
无法取消promise 一但新建就会立即执行，无法中途取消，其次，如果不设置回调函数，promise内部抛出的错误，无法反应到外部，当pending的时候，无法知道进展到哪一步

4、window的onload和document loded执行顺序

先执行document事件 在执行window.onload事件。window.onload要在页面所有dom和静态资源加载完成之后才执行
当dom树构建完成之后，就会执行domContentLoaded事件

5.解决跨域的方法

1、服务器配置cors（跨域资源共享），它支持同源通信，也支持跨域通信
2、node.js或nginx。反向代理，把跨域改成同域
3、将json升级jsonp 在json的基础上。利用script标签跨域特性，加上头设置，
对于非让么跨域来说，h5提供了psotMasssge（）方法。可以在父子之间传值

7、什么是深拷贝，浅拷贝

浅拷贝：内存地址的复制，让目标对象指针和源对象指向同一片内存空间，注意的是当内存销毁的时候，指向对象的指针必须重新定义，才能够使用
深拷贝：拷贝对象的具体内容，内存地址是自主分配的，拷贝结束后两个对象虽然值应用，但是内存地址不一样，两个对象互不干涉

8、http和tcp/ip

网络从上到下分为应用层，表示层，会话层，传输层，网络层，数据链路层，物理层
TQ/IP协议是传输层协议，主要解决数据如何在网络中传输的
HTTP是应用层协议，主要解决如何包装数据
所以说HTTP是基于TCP/IP，与http类似的也是基于TCP/IP的还有FIP应用层协议

TCP/IP三次握手协议
1、客户端先发起第一次握手，向服务器示好，询问是否可以传数据
2、服务器收到后表示可以接受数据，则向客户端发起第二次数据，由于TCP//IP是全双工的，服务端的这次握手也是可以询问客户端是否能够接受返回的数据
3、客户端接受到后，发起第三次握手告诉服务器，可以接受返回的数据（链接ok了）

TCP/IP四次挥手协议
tcp/ip是全双工的，每个方向都必须得到进行关闭，有一方完成他的数据发送任务就能发送一个FIN来中止这个方向的链接
比如客户端就能发送一个FIN来告诉服务器，没有数据传输了，这是第一次挥手，服务器收到后返回一个ACK告诉客户端，好的，我知道了这是第二次挥手，客户端收到确认后就可以关闭往服务器端的数据通道了，这个时候服务器端仍然可以往客户端继续发送数据，带服务器端没有数据需要发送给客户端时，也发送一个FIN到客户端，告诉他我也没有数据发送给你了，这是第三次挥手，客户端得知了之后返回一个ACK告诉服务端，好的，收到了，服务端也及可以安心关闭客户端的数据通道了，这是第四次挥手，自此双向的传输通道就关闭了，

9、￥route 和$router 的区别：

两个$都是小写，打不出来
$route是路由信息对象，包括path，params hash query fullPath meta name等路由参数，可以通过
$router可以获取当前路由的各种参数

$router是路由实例对象，包含vueRouter上的实例方法，可以配置属性常用语编程式导航

10、前端优化方法

前端性能优化七大手段

11、从输入url到页面展示发生了什么

浏览器输入URL到页面呈现详细过程（前端面试必问）

12、讲一下http

HTTP是超文本传输协议，是互联网应用最广泛的一种网络协议，所有的www文件都必须遵守这个标准
http特性，HTTP是无连接无状态的，HTTP一般构建于TCP/IP协议之上，默认端口是80，HTTP可以分为请求和响应，HTTP定义了在服务器上交互的不同方式，最常用的方式有四种 GET PUT POST DELECT
http响应包含一个状态码，用来表示服务器对客户端响应的结果

13、http常见状态码

14、js操作数据的API

push：将一个或多个元素添加到末尾，并返回数组新长度
unshift（）将一个或多个元素添加到开头
pop（）末尾删除
shift（）开头删除
concat（）合并数组
splice（）分隔数组 替换元素，删除元素，最终返回一个新数组。

15、webPcak原理，plugin和loader区别

webpack是把项目当做一个整体，通过一个特定的主文件，开始找到项目的所有依赖文件，使用loaders处理他们，最后阿宝后才能一个或多个浏览器可识别的文件
plugin和loader区别：

两者都是为了扩展webpack的功能，loader他专注转化文件（tranform）这一领域，完成打包，语言翻译，二plugin不仅局限于打包资源的加载上，还可以打包优化和压缩，重新定义环境变量等等

loader运行在打包文件之前（loader为在模块架子啊时的预处理文件），plugins在整个编译周期都起作用

一个loader的职责是单一的，只需要完成一种装换，一个loader其实就是一个node.js模块，当需要调用多个loader去转化一个文件时，每个loader会链式的顺序执行在webpack运行的生命周期中会广播出许多事件，plugin会监听这些事件，在适合的时间通过webpack提供的API改变输出结果

16、vue路由

vue-router是专为vue打造的路由管理器，
1.hash模式：默认模式，通过路径中hash值来控制跳转，不存在兼容问题
2、history模式：H5新增historyAPI，相对hash而言，不会显示#号，但需要服务器配置
3.abstract模式：支持jabascript的所有运行环境，常只node.js服务器环境
SPA路由由history模式上线后刷新404
在服务器端增加一个覆盖所有情况的候选资源，如果url匹配不到如何静态资源则应该返回同一个index。html页面，这个页面就是自己APP依赖的页面，以后服务器就不会在返回404错误页

17、箭头函数和普通函数的区别

箭头函数的this指向是负极作用域的this指向，是通过查找作用域链来确定this值，看的是上下文的this，指向的是定义他的对象而不是使用式所在的对象，普通函数指向他的直接调用者

箭头函数不能动作构造函数来使用new命令事务作为构造函数报错
不可以使用arguments对象，该对象在函数体内不存在，如果要用就用rest参数代替，不可以使用yield命令，因此箭头函数不能作用generator函数

18、cookie localStorage sessionStorage的区别

cookie：太小了。只有4k左右，需要自己封装，原生的cookie接口不友好。可以设置失效时间，默认关闭浏览器时失效 每次都会携带在http头中

localStorage：除非被清除，否则永久保存，一般为5mb，也有原生的，也可以在此封装对object和array有更好的支持

sessionStorage：仅在当前会话下有效，关闭页面会被清除

18、什么是闭包

函数的定义：函数a内部有一个函数b，函数b可以访问函数a中的变量，那么函数b就是闭包

闭包就是能够读取其他函数内部变量的函数
将函数内部和函数外部链接起来的桥梁
缺点就是会导致内存泄漏所以要释放闭包
实质上闭包是因为函数嵌套而幸存的作用域链
javascript闭包（一看就懂）
浅析js闭包

19、es6中新特性（常见）es7 es8

简单版本：
ES6 7 8 9 10新特性总结
详细版本：
ES7、ES8、ES9、ES10新特性总结大全

20、什么是强缓存和协商缓存

强缓存：不会向服务器发送请求，直接从缓存中提取资源

协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码，带上responheader通知浏览器从缓存中提取资源

两者的共同点：都是从客户端缓存中提取资源，区别是强缓存不会发送请求，协商缓存会发送请求

21 get和post区别。为什么post更安全

get产生一个tcp数据包，post产生两个数据包

get方式请求浏览器会把http header和data一并发送出去，服务器响应200 ok

post方式请求浏览器先发送header，服务器响应100 continue浏览器在发送date 服务器响应200（返回数据），火狐只发送一次

22 js异步加载的几种方式

script标签的async属性 h5新特性
onload时异步加载：把插入script的方法放在一个函数里，把函数放在window的onload的方法执行，这样就解决了阻塞obload事件触发的问题

22、this指向，及改变的三种方式

javascript中this用法

23、http2新特性

**多路复用：**一个域只需要一个TCP链接，同一个链接并发处理多个请求，而且并发请求数量比http1.0大了几个量级

二进制分帧：在应用层和传输层之间增加二进制分帧层自动将header和body部分区分开，在不改变http1.x的语义，语法，状态码的情况下改进传输性能

头部压缩 ：http2考虑头部信息变化并不频繁，所以在server端做了一个缓存，

服务端推送 ：服务器对客户端的一个请求发送多个响应，服务器中推送可以缓存，并且在遵循同源情况下不同页面可以共享缓存

24 、如何使用低版本浏览器支持新的语言结构

node安装babel与webpack

25、讲一下构造函数

构造函数的本质是一个普通函数，他的特点是需要通过new关键字来调用，用来创建对象的实例

26、什么是原型。什么是原型链

原型模式是js实现继承的一种形式 所有的函数都有一个prototype属性，通过new生成一个对象时，prototype会被实例化为对象的属性
所有的引用类型都有一个-prototype-指向其构造函数的prototype，
原型链指的是当访问一个引用类型时，如果本身没有这个属性，或方法，就会通过-prototype-属性在父级原型中找，一直找到最顶层为止。原型链的最顶层是object object的-protot属性指向null

27、描述new操作符的执行过程

1、创建一个对象
2、将这个空对象-proto——指向构造函数的prototype
3.将构造函数的后天指向这个对象
4.执行构造函数中的代码

28、什么是vue生命周期 还有常见的钩子函数有哪些

vue生命周期一共四个阶段：
1、实例创建
2、DOM渲染
3.数据更新
4、销毁实例
主要有8个钩子函数：
1：beforeCreat—创建前
触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件
2:created——创建后
触发的行为：vue实例的数据对象data有了，el还没有
在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备
3：beforeMount 渲染前
触发的行为：vue实例的el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
4：mounted 渲染后
触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用
5：beforeUpdate 更新前
触发的行为：data更新时触发
6： updated 更新后
触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
7：beforeDestroy 销毁前
触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁
8：destroy 销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示

29、vue实现双向数据绑定的原理

采用数据劫持结合发布者—订阅模式的方法，通过object.defineProperty()来劫持各个属性的seter.getter。在数据变动时发布消息给订阅者，触发相应的监听回调

30、vuex有几种属性

有五种，分别是State Getter Mutation Action Module

面试官：请你说一说vuex的五个属性，分别是什么，区别和用途说一下

31 、不用vuex会带来什么问题

1、可维护性下降，想修改数据得维护三个d地方
2、可读性下降，因为一个组件里的数据，根本看不出从哪里来的
3.增加耦合，大量的上传派发，会让耦合性大大的增加本来vuex用component就是为了减少耦合

32、vuex的state特性是什么

1、vuex就是一个仓库，仓库里面放了很多东西，其中state就是数据源存放地，对应于一般vue对象里的data
2.state里存放的数据是响应式的，vue组件从store中读取数据，若store中的数据发生改变，则这个数据的组件也会更新

33、computed和watch区别知道吗

computed名称不能与date里对象重复，只能用同步，必须有return 是多个值变化引起一个值变化，是多对一

watch：名称必须和data中的对象引用，可以用于异步，没有return，是一对多，监听一个值，一个值引起多个值的变化

34 v-show和v-if的区别

v-if和v-show都能实现元素的显示与隐藏

1、v-show只是简单的控制元素的display属性，v-if是条件渲染（条件为真，则元素被渲染，条件为假，则元素被销毁）
2、v-show有更高的首次渲染开销，v-if的首次渲染开销则小很多
3、v-if有更高的切换开销，v-show则小
4.v-if可以配套v-else v-else-if使用，v-show则没有
5、v-if可以搭配template使用 v-show不行
总结：如果是要多次使用，则使用v-show 如果使用次数交少，推荐使用v-if
减少dom的操作

35 动态绑定class的方法

1、单个class ：class方法

 <div :class="{'active':isActive}"></div>

2、对象绑定：

	
:class="{ 'active': isActive }"

3、绑定多个（用逗号隔开）

:class="{ 'active': isActive, 'sort': isSort }"

4、绑定数组

:class="[isActive,isSort]"

36 计算属性 computed和watch的区别

1、methods 不存在缓存，执行一次运行一次，执行n次，运行n次
2、页面数据依赖其他数据变动的时候，可以使用计算属性computed 是基于data中数据进行处理的，data数据变化，他也跟着变化，data中数据没有发生变化是，调用computed中函数n次，只会进行缓存（执行一次），每个计算属性都包含两个set，get属性。
3、watch 使用场景是在数据变化时执行异步或开销较大的操作，可以随时修改状态的变化
watch：类似于监听机制+事件机制。
在大部分情况下会选择computed 如果要在数据变化的同时进行异步操作或者是比较大的开销。watch是最佳选择，
详细用法

37 怎样理解单向数据流prop

数据从父级组件传递给子组件，只能单向绑定
子组件内部不能直接修改从父级传递过来的数据
所有的prop都使得其父子prop之间形成一个单向下行绑定：父级prop的更新会向下流动到子组件中，但反过来则不行

38 keep-alive

keep-alive是一个抽象组件（内置组件）：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件是，会缓存不活动的组件实例，而不是销毁他们
作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载事件及性能消耗，提高用户体验性。
keep-alive实现原理

39 自定义组件的语法糖 v-model是怎样实现的

<input
:value = "something"
@:input= "something = $ event.target.value">

vue 之 v-model自定义组件绑定语法糖

40 生命周期

41 通信组件

通信组件常用的方式：
props
eventbus
vuex
自定义事件
list item
边界情况
$parent
$children
$root
$refs
provide/inject

非prop特性
$attrs
$listeners

组件通信详解

42 路由跳转

1、router-link （声明式路由）
2、router.push(编程式路由)
3、this.$router.push()(函数里面调用)4.this.$router.replace() (用法同上,push)
5. 5. this.$router.go(n) ()
vue路由跳转的几种方式

43 vue-router有哪几种导航钩子

导航钩子，主要作用是用来拦截导航，让他完成跳转或取消

有三种方式可以植入路由导航过程中：
1、全局的

前置守卫，后置钩子

2、单个路由独享的

在路由上直接定义使用

3、组价级别的

组件内的导航钩子主要有三种
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
34、vue-router 中的导航钩子

先总结到这里。码字不易，看到这里点个赞在走吧，文章有些地方可能理解的不是很透，欢迎大佬点评。

最近写博客认识了很多朋友，这里建了个群，好多都是正在找工作的学生，如果有想进群的就私聊我吧，不发广告，只是大家交流，
不知道发在文章最后有没有人看得见，加油。明天继续面试