2022最新前面面试总结

2022前端面试-技术型

1.get和post的区别             

GET用于获取信息，是无副作用的，是幂

等的，且可缓存，POST用于修改服务器上的

数据，有副作用，非幂等，不可缓存

2.如何让自己网页内显示其他网页内容

使用iframe标签

3.vue的优势

轻量级框架、双向数据绑定、组件化、数据和结构

的分离、虛拟DOM、运行速度快。

4.webpack打包原理

根据文件间的依赖关系对其进行静态分

析，然后将这些模块按指定规则生成静态资源，当 webpack

处理程序时，它会递归地构建一个依赖关系图(dependency

graph)，其中包含应用程序需要的每个模块，然后将所有这些

模块打包成一个或多个bundle。

5.flex布局有哪些属性

1、flex-direction，属于设置主轴

的方向，即子元素的排列方向;

2、justify-content,属于设置主轴上的子元素排列方式；flex-wrap，属性可以将容器设置为是否是换行的；

3、align-content， 属性能够设置自由盒内部各个项目在垂直方向排列方式;

4、align-items，属性能够设置自由盒内部各个项目在垂直方向排列方式；

5、flex-wrap; 是否换行

6、flex-flow，厜性相当于同时设置了flex-direction 和fex-wrap。

6.flex如何排序

使用order进行排序，默认值为0，数值越小越靠前

7.vue生命周期

beforeCreate,created,  创建阶段

eforeMount,mounted,  挂载阶段

beforeUpdate,updated,  更新阶段

beforeDestory,destoryed  销毁阶段

8.vuex五个核心属性

1.state：用于保存需要全局共享的数据.在组件中访问state里面的数据用this.Sstore.state.数据名或者用辅助函数

2.mutation：用于修改state 里面的数据

3.action:action 可以提交 mutation， 在action 中可以执行 store.commit， 而且action 中可以有任何的异步操作。

4.getter：从基本数据(state)派生的数据，相当于state的

计算属性,具有返回值的方法

1. module：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理

9.原型链

每个对象都有一个_proto_ 属性，并且指向它的prototype 原型对象

每个构造函数都有一个prototype 原型对象。prototype 原型对象里的constructor指

向构造函数本身

10.什么是虚拟DOM

虛拟 DOM(Virtual DOM)是由普通的 JavaScript对象来描述 DOM对象

状态的变化首先作用于虛拟 DOM，最终映射到真实的DOM中

 vue.jis2.x内部使用的虛拟 DOM是改造的Snabbdom

11.虚拟DOM实现原理

用JavaScript 对象模拟真实 DOM树，对真实DOM 进行抽象；

diff 算法 一比较两棵虚拟 DOM树的差昇；

pach 算法 一将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

12.created和mounted的区别

created： 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成识图。

mounted：在模板渲染成html后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。

13.事件冒泡、时间捕捉、事件委托

事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发，当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window。

事件捕获: 事件从最不精确的对象(document 对象）开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定）。

事件委托：把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的植物

14.MVVM

M：数据层

V：试图层

VM：逻辑层

15.如何解决跨域

使用proxy反向代理或者jsonp

16.css选择器优先级

内嵌样式：值为1000

Id选择器：值为100

Class选择器：值为10

标签选择器：值为1

通配符：值为0

17.promise和async await的区别

1、Async/Await代码看起来简洁一些，使得异步代码看起来像同步代码

2、async await与Promise-样，是非阻塞的。

3、async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。

18.ajax的原理

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用iavascript来操作DOM而更新页面

19、vuex存储和本地存储(localstorage、sessionstorage)的区别

localStorage 存储的数据没有时间限制

sessionStorage 当用户关闭浏览器窗口后，数据会被删除。

Vuex 当刷新页面时vuex存储的值会丢失

20、vue按需引入

import { Button, Select } from 'element-ui';

21、双向数据绑定原理

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

22、Vue组件间通信方式

1.常用的父子组件通讯方式：props,emit

2.$parent,$children

3.$ref

4.provide/inject

5.$attrs、$listener

如果我们按常规的props传值，就要一层一层传，层级多了就很恶心，使用$attrs就很轻松的做到了。当组件传了和$attrs内属性同名的值时，值会被覆盖(使用传入的值)

$listeners: 接收除了带有.native事件修饰符的所有事件监听器
作用和上述类同。
有一点不同的是：当出现同名的事件时，不会被覆盖，而是都会执行，执行顺序就是事件冒泡的执行顺序，先触发child 再触发parent

使用$listeners 属性可以很方便的在层级很深的组件内，立马就修改最外层的父组件内的属性值。

注意：在vue3.0 中$listeners被移除了，将所有属性都集合到attrs里面了

23.Vuex 状态管理器

1. 如果应用的性能不太好，怎么去排查和改进

1、请减少HTTP请求基本原理：

2、请正确理解 Repaint(重绘) 和 Reflow(回流/重排)

3、请减少对DOM的操作

4、使用JSON格式来进行数据交换

5、使用CDN加速（内容分发网络）

6、精简CSS和JS文件

7、压缩图片和使用图片Sprite技术

8、注意控制Cookie大小和污染

24.有没有遇到过不同浏览器兼容方面的问题，随便谈一个，以及如何解决

css3新属性，加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */

25.z-index在哪些场景下有效，在哪些场景下会失效

z-index属性在下列情况下会失效：

父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；

元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；

元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

26.width:120% 和 transform:scale(1.2) 有什么区别

scale是CSS3中新增的缩放的方法，使用这个的话能很方便的对元素进行缩放，而不用去计算详细的像素值，width和height当然也可以，不过在脚本中计算的话会比较方便，如果仅用css写的话，相比而言还是scale方便。不过和width、height不冲突，使用哪个都可以，只要能实现你要的效果。

27.vuex是什么？怎么使用？哪种功能场最使用

是什么：vue框架中的数据共享；状态管理:有五种，分别是 State、 Getter、Mutation 、Action、 Module
使用：新建一个目录store，安装导入store模块
场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

28.浅拷贝和深拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

29.Vue中key 是用来做什么的？为什么不推荐使用Index 作为key

30.介绍下三种事件对象的属性列表

1.鼠标事件对象 MouseEvent

e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标

e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标

e.pagex 返回鼠标相对于文档页面的×坐标IE9+支持

e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持

e.screenX 返回鼠标相对于电脑屏幕的×坐标

e.screenY 返回鼠标相对于电脑屏幕的Y坐标

2.键盘事件和对象

keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。

keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。

keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

3.触摸事件对象：

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等...

touchstart	手指触摸到一个DOM元素时触发 类似于pc端的mouseover
touchmove	手指在一个DOM元素上滑动时触发 类似于pc端的mousemove
touchend	手指从一个DOM元素上移开时触发 类似于pc端的mouseout