2024应届生找工作面试心得-CSDN博客

本人感受：

今天，两场面试，说一下我的体会吧。

整体体会：感觉不是在面试！！！！

两个面试官都很平易近人，面试过程是一边在唠家常，一边在问一些问题，给人一种安心的感觉。

当然，这也就导致真正能够问到我的技术点，知识点是比一般面试要少的，所以，今天的面试并不能留下什么面经，就当是跟人唠嗑吧。

不管最终结果咋样，反正过程感觉 very Nice ！

问题：

一.屏幕适配：如何让一个图片web端正常显示大小，到移动端后不显示，或是进行一定比例的缩小

1.方案一

HTML结构： 确保你的HTML中有要适配的图片元素，例如：
<img src="your-image.jpg" class="responsive-image" alt="Responsive Image">
CSS样式： 使用CSS来设置图片的最大宽度为100%，这样图片将根据父容器的大小自动进行缩放。

这样设置之后，当在移动设备上访问网页时，图片将根据屏幕宽度进行自适应缩放，而不会超出屏幕范围。
.responsive-image {
    max-width: 100%;
    height: auto; /* 保持高度与宽度的比例 */
}
视口设置（可选）： 在移动端开发中，还可以通过设置viewport元标签来优化网页在移动设备上的显示效果。示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.方案二：媒体查询
/* 默认样式 */
.responsive-image {
    width: 300px; /* 默认宽度 */
    height: auto; /* 保持高度与宽度的比例 */
}

/* 在屏幕宽度小于等于 768px 时的样式 */
@media screen and (max-width: 768px) {
    .responsive-image {
        width: 100%; /* 图片宽度设为100% */
    }
}
二.需求实现：实现微信首页的好友列表(大致思路)

页面布局和样式设计： 使用HTML和CSS设计好友列表的页面布局和样式，确保界面清晰、美观，并符合微信的设计风格。

数据获取和展示： 使用JavaScript获取好友列表的数据，可以通过API请求后端服务器获取数据，也可以模拟静态数据。然后使用JavaScript动态生成好友列表，并将数据展示在页面上。

好友列表的交互功能： 实现好友列表的交互功能，比如点击好友头像可以查看好友详情、发送消息等。可以使用JavaScript监听用户的点击事件，并根据用户的操作执行相应的功能。

实时更新： 如果需要实现实时更新好友列表，可以使用WebSocket等技术，实现实时通信功能，当有新的好友加入或者好友状态发生变化时，及时更新好友列表。

性能优化： 如果好友列表中的好友数量较多，可能会影响页面加载和渲染性能，可以考虑使用虚拟滚动等技术进行优化，只渲染可见区域的好友列表项，减少页面的渲染负担。

响应式设计： 确保好友列表能够在不同大小的屏幕上正常显示和使用，可以使用CSS媒体查询等技术，根据设备的屏幕尺寸调整页面布局和样式。

浏览器兼容性： 确保好友列表能够在主流的浏览器上正常运行和显示，可以使用浏览器兼容性测试工具进行测试和调试。

三.vue的Object.defineProperty()相关（略）

四.说说 call 和 apply 的区别（略）

五.vue2和vue3的使用感受（略）

六.双向数据绑定（略）

七.treeShaking机制原理（略）

八.webpack的 Loader，写过吗（略）

一些需要自我思考的问题：

1.你的优势在哪里

2.你这个项目的难点问题在哪里。或者项目中遇到的问题如何解决的

3.你是如何学习前端的，期间有阅读过什么书籍吗

4.为什么选择前端

24.3.6 一家规模10000人+（一面）（共3面+HR面）

本人感受：

面试官很会引导，而且问问题是循循渐进，不是那种很跳跃地问法，而且问的问题是哪种比较大的范围，我们可以尽可能的把自己所了解到的内容讲解，而且对于我的回答会进行一定的评价，弥补我回答的一些不足之处，面试感觉良好。

问题：

1.选一个项目介绍，你参与的完成度高的

2.角色验证，根据角色展示页面的解决（路由模块，路由守卫）

3.登录功能实现的过程（加密，token储存）

4.flex布局的一些了解

5.css动画的了解

6.语义化标签的了解，讲自己知道的语义化标签有哪些

7.es6的一些新增内容

8.var let const区别（const引用类型的数据能否更改）

9.数组的方法了解

10.普通函数，箭头函数区别

11.原型，原型链了解

12.闭包的了解

13.vue2和vue3 的区别

14.响应式区别

15.计算属性和watch的区别

16.vuex了解（mutation里面能否异步）

24.3.7 一家规模10000+人（一面）（具体几面还没问）

本人感受：

相对于前几家，这家的面试节奏很紧凑，一个问题接着一个问题，当然，也是分块的，先是CSS的问题，然后问了一些JS的，然后就是框架的。

可能投的时候是海投，这家的主要技术栈是react，我用的是vue，所以整体的感觉就很紧张，最后的结果感觉也许不会太好。

问题：

1.CSS的position属性

2.absolute相对于什么进行定位的

3.HTML的标签有哪些

4.JS的原型链

5.一般什么样的属性定义成原型属性，什么样的定义成实例属性

6.vue2和vue3 的响应式

7.vue2中，watch如何在监听一次后，就销毁

8.vue中阻止事件冒泡

9.vite和webpack

10.发送ajax请求

11.如何将ES6转成ES5

12.强缓存，协商缓存

13.前端设置cookie时有哪些参数

14.说一说call apply bind的作用和区别

15.重绘/重排（回流）

24.3.11 一家（二面）（共三面+HR面）

本人感受：

二面的确比一面问的问题更加深入一些了，光靠去背八股文可能有些地方就会说的不是很清楚，所以面试官会进行一定的讲解，总共面了40min，感觉不太好，很多问题答的不是很好，只能祈祷后续了。

问题：

1.JS继承的方法与优缺点

2.说原型链的继承，原型继承

3.JS原生的Object.definePrototype()的一些属性方法

4.new的时候干了什么

5.数组去重的方法

6.this指向问题

7.立即执行函数的this指向，定时器的this指向

8.call.apply,bind的区别

9.数组使用Math.max()取最大值时，使用call还是apply

10.多个数组拼接方法

11.为什么那个项目使用uniapp和vue结合，不单独使用uniapp

12.v-model的实现原理

13.vue2组件间的通信

14.vuex和pinia的区别

15.说一说promise

16.promise.all的参数，失败时返回值，与它相反的哪个方法（any）

17.promise的弊端

18.浏览器的事件轮询

19.使用TS声明数组类型

20.登录时的状态储存，cookie？

21.使用cookie涉及到哪些安全问题

22.你在项目中有经历过优化操作吗

23.CSS3的transition 和 animation

24.3.15 一家（一面）

直接上问题：

1.盒模型

2.不知道宽高，设置水平垂直居中

3.css的position定位

4.transform实现居中

5.flex布局

6.精灵图/雪碧图，如何使用

7.css的样式优先级

8.margin合并如何解决

9.display：none和visibility：none

10.为什么要在样式初始化的时候设置{margin，padding}为0

11.1px如何设成0.5px(通过缩放)

12. var,let ,const说一说

13.JS 的数据类型

14.基本数据类型和引用数据的区别

15.cookie，session Storage，local Storage的区别

16.local Storage储存的数据能否在不同的网页里访问

17.es6的新增有哪些

18.解构

19.模板字符串

20.原型链

21.作用域链

22.类型判断的方法

23.箭头函数

24.闭包

25.如何内存清理

26.冒泡和默认事件

27.promise

28.async（单独使用可以）和await（不能单用）

29.this的理解

30.数组的一些方法

31.数组转字符串，字符串转数组的方法

32.vue的生命周期

33.activated和deactivated

34.vue的指令

35.vue组件之间通信

36.computed和watch

37.next tick（）方法

38.vuex的使用

39.路由守卫

40.路由的两种模式

41.v-if和v-show

42.vue的diff()