前端面试题汇总

545 阅读4分钟

说明:仅用于记录,供自己翻看,很多引用了别人的回答。想设置私密的,但是掘金没有私密选项,无所谓了......

当然,空着的题目要是有大佬帮小弟补上正式的回答就更好了,回答有偏差的也请指正,十分感谢~

一、面试遇到的题目

1、像素比

image.png

2、px em rem

image.png

3、类class  继承类extends  关键字super

super作为函数调用时,代表父类的构造函数,super()只能用在子类的构造函数之中,用在其他地方就会报错。

super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

使用super的时候,必须显式指定是作为方法还是作为对象使用,否则会报错。

相关地址:jsrun.net/t/SZKKp

4、服务端渲染怎么实现 有什么好处

5、v-for中key的作用

image.png

v2.cn.vuejs.org/v2/guide/li…

image.png

v2.cn.vuejs.org/v2/api/#key

6、媒体查询

@media mediaType and (mediaFeature ) and (mediaFeature ) {

   选择器 {

     属性名:属性值

   }

}

例如:@media screen and (min-width: 768px) and (max-width: 992px){} blog.csdn.net/qq_40146789…

7、position 定位

8、鼠标移入按钮发生的一连串事件hover focus active

image.png

9、接口请求响应拦错误处理

10、vue3与vue2的对比

image.png

11、vue2响应式原理 双向数据绑定

响应式原理: v2.cn.vuejs.org/v2/guide/re…

image.png

双向数据绑定:

image.png

相关地址: 不要再搞混Vue的响应式原理和双向数据绑定了 - 掘金 (juejin.cn)

12、怎么鉴权 后端返回的是什么

13、nuxt.js框架的选型原因

14、页面自适应 rem

15、uniapp 条件编译 视频播放预处理

16、前端性能优化

image.png

相关地址:baijiahao.baidu.com/s?id=176208…

17、webpack

image.png

18、js ==(隐式数据转换)

19、什么是浅拷贝和深拷贝

fa67f6684c22c8d5ed75185e417049d.jpg

20、原生实现深拷贝函数

21、WebSocket协议(及与http的区别)

image.png

image.png

image.png

image.png

image.png

image.png

22、怎么避免js中的内存泄漏

23、强缓存和协商缓存

image.png

image.png

image.png

相关地址:blog.csdn.net/weixin_4255…

24、uniapp页面生命周期

vue2页面及组件生命周期流程图:

image.png vue3页面及组件生命周期流程图:

image.png

25、v-if和v-show的区别

image.png

26、vue自定义指令

image.png cn.vuejs.org/guide/reusa… juejin.cn/post/736365…

27、css scoped的作用和原理

image.png

28、css选择器及优先级

image.png

29、计算属性和函数的区别

image.png

image.png

30、函数声明式和函数表达式的区别

image.png

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

image.png

32、apply、call、bind

image.png

33、防抖 节流

0d696143c2826ec504eb1bdb3ab703e.jpg

1478dd33bd7ad438522a1f456edfcc7.jpg

34、伪元素 伪类

image.png

35、跨域问题

由于浏览器的同源策略,当页面源和目标源异源的时候,会出现跨域问题。

解决方案:CORS、JSONP、代理

image.png

image.png

image.png

image.png

image.png

image.png

36、什么是正向代理和反向代理

37、Promise

image.png

1714382449769.png

38、async await

image.png

39、事件循环机制

image.png

image.png

40、闭包

image.png

41、浏览器缓存有哪些以及特点、应用场景

blog.csdn.net/m0_55333789…

42、常用的httpCode以及含义

image.png

image.png

image.png

image.png

http请求方法: da2ac032f84cf6908eb93bf65544e81.jpg

43、盒模型 box-sizing属性

标准盒模型:box-sizing: content-box;(默认) 怪异盒模型:box-sizing: border-box;

cb1a51124647497d3bc8b54f5f0f0af.jpg

44、computed和watch的区别 watch深度监听

当需要监听一个对象的变化时,普通的watch方法无法监听到对象内部属性的变化,可以设置深度监听 deep: trueimmediate设置为 true,页面进来就会立即执行监听。

image.png

45、页面监听路由变化

全局前置守卫 image.png 路由独享的守卫 image.png

image.png 组件内的守卫 image.png

image.png 完整的导航解析流程 image.png

46、router-link和a标签的区别

image.png

47、Vuex mutations actions 怎么修改数据

mutation里面修改state里面定义的状态,提交(commit)mutation;在actions里面提交(commit)mutation,分发(dispatch)action。

action 提交的是 mutation,而不是直接变更状态。 action 可以包含任意异步操作。

mutation 必须是同步函数。 image.png

48、组件通信 怎样刷新组件 调用子组件的方法

刷新组件:

1.通过控制组件的v-if来强制销毁和重新创建组件。

2.给组件绑定key值,通过改变key值强制重新渲染组件(利用vue虚拟DOM的diff算法,对比新旧节点时,发现key值改变会重新渲染组件)。

3.使用组件内置 $forceUpdate方法:强制重启组件的render函数,调用该方法后只会触发beforeUpdate、updated 这两个生命周期,而且只会影响当前组件以及其插槽内容。

调用子组件的方法

1.通过 $ref 获取子组件实例,调用子组件的方法

2.通过 $children 可以获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等

49、keep-alive

image.png 可以通过路由中的 meta 属性来控制,是否需要缓存。 image.png 生命周期函数 image.png

50、注册全局组件 注册全局过滤器

// @/components/index.js image.png // main.js image.png

注册全局过滤器也是类似操作,把Vue.component()换成Vue.filter()

51、页面布局

1、flex布局:www.runoob.com/w3cnote/fle…

flex容器的属性: image.png

flex项目的属性: image.png

2、grid布局:www.runoob.com/css3/css-gr… image.png

image.png

52、undefined和null的区别

613b6faeeab981d0d4242e73cfda466.jpg

53、为什么不建议同时使用v-if和v-for

45074e66a3f5ee24d493c17865bec4d.jpg

54、new的过程

1、创建一个空对象

2、设置原型链:设置新对象的 __proto__ 属性指向构造函数的 prototype属性

3、将构造函数的this绑定到新对象,并且执行构造函数

4、返回this

JavaScript:new关键字的执行过程_js中new 执行过程是什么?-CSDN博客 javascript - 深入一点 - 用 new 的时候到底发生了什么? - 技术菜鸟挣扎记 - SegmentFault 思否

55、首屏加载优化

56、普通对象和Map的区别

57、Map和WeakMap的区别

7c33883195c9947756954c7ec20e540.jpg

58、伪数组

e6cc9f21052daf94239bf0bfd43c05d.jpg

59、图片懒加载

blog.csdn.net/qq_42136832…

60、js操作dom节点

blog.csdn.net/qq_40146789…

61、MVVM

1304ba82c6c633b1a8b8744fb7081e8.jpg

62、js操作dom节点转成图片保存

image.png

63、组合式函数和mixins

image.png 1716461499164.jpg image.png cn.vuejs.org/guide/reusa…

64、路由的hash模式和history模式的区别

blog.csdn.net/sunyctf/art… m.php.cn/faq/490021.… blog.csdn.net/qq_20823145…

65、bfc

image.png

image.png

blog.csdn.net/weixin_4255…

66、xss攻击

反射型、存储型、dom型 www.bilibili.com/video/BV1rg…

67、数组扁平化

递归遍历数组、arr.flat(Infinity)、toString()搭配split(',') blog.csdn.net/qq_40968685…

68、for in 和 for of 的区别

image.png

image.png www.jb51.net/article/270…

69、forEach和map的区别

面试官问:forEach() 和 map() 的区别-CSDN博客

70、vue怎样添加一个响应式属性

image.png

v2.cn.vuejs.org/v2/api/#vm-…

71、怎么实现系统主题切换

72、this.$nextTick

image.png v2.cn.vuejs.org/v2/api/#vm-…

73、微信小程序登录流程

5b7158c3da4a89624e0d5476ead8c27.jpg

54cb6e2836b0ba0b618377857e50bc0.jpg

二、其他常见面试题

1、vue组件生命周期

image.png

image.png

image.png

2、组件通信

vue2:

image.png vue3:

image.png 相关地址:juejin.cn/post/699968…

3、网页加载过程

相关地址:2023我的前端面试准备 - 掘金 (juejin.cn)

4、diff算法

5、变量提升

6、事件代理(事件委托)

image.png

image.png

image.png

7、$route$router的区别

image.png

8、重绘和重排(回流)

juejin.cn/post/724470…

占位