这一次面试真的是我觉得非常非常遗憾和纠结的一次经历,面试大约1个小时多,一开始hr小姐姐告诉我通过面试其实我很开心,因为面试官其实和我很聊得来,面试过程也是十分愉悦,一开始是给我开了200/天的工资,可是因为自己的原因,不得不拒掉,最后,最让我觉得遗憾的是面试真的很看好我,我也很喜欢和面试官的这种交流方式,甚至是给我开到了300/天,希望我留下来。而且hr小姐姐说他们只招一个实习生,当时我真的就想立马飞过去了。可是最后真的真的很遗憾,我还是不得不拒掉了。一些原因,我也不太方便透露了。
下面我总结一下这次面试!
自我介绍
首先也是一个简单的自我介绍!
介绍项目中难点
简单的介绍了自己是如何做的简历上面的练手项目,具体做了哪些内容。
我说了当时碰到的跨域问题
我们自己写的后端和前端之间的通信是会被浏览器的同源策略拦截,我们需要进行对这种情况进行处理!我是安装了一个Cors2直接use一下就解决了这个问题。
你了解解决跨越的方式吗
因为当时我还没有具体去了解怎么解决跨越,我只说了JSONP的方式!
当然,解决跨域有很多方式:jsonp ,Cors,node代理,nginx代理等等
前端让你感觉有点困难的点
我当时是说了一下,因为自己的练手项目可能不太符合实际上的业务需求,自己没有做过,这方面可能自己想要去进入一个实习学习一下,然后就是一些算法也没有掌握,然后就是vue很多源码还没有具体去看等等。
如果让你做什么内容让你感觉会有点挑战
切页面对前端来说不是什么问题,我说了一下可能有一些公司要求vue3转React这些,还有一些新的组件库没有使用可能需要我自己去了解一下,总结一下就是一些没接触的内容可能需要我们去适应!
vue的组件通信
介绍了一下vue是通过数据拦截,发布订阅模式,介绍了一下父子组件传参,子父组件传参,兄弟组件传参,比较远的组件传参provide inject 注入,介绍了一下vuex 和 pinia 公共状态管理仓库
vuex和pinia的区别
这方面我主要介绍了pinia相对于vuex的简便。说了一下 pinia是如何修改数据,vuex是如何修改数据。
还问了我一下自己喜欢用哪个。
怎么实现类似vuex让两个比较远的组件进行通信
我第一想到就是传统的父子组件传参,然后面试官让我抛开vue让组件通信。
我简单说了一下我的想法:使用项目中那个全局main.js进行变量声明,做一个类似仓库的内容。
面试官说:通过在一个组件内做一个按钮,点击一下让另外一个页面进行更新。
然后我讲了一下:可以通过一个发布订阅的模式,让按钮的组件发布一个事件,然后要更新的组件订阅这个事件。
你了解过哪些设计模式
我说了一下:单例模式,工厂模式,发布订阅模式,观察者模式等等其他没记清
vue的响应式原理
介绍了一下vue3的响应式原理,响应拦截,依赖触发,基于ES6的Proxy
然后面试官又问我vue2的响应式原理
介绍了一下vue2的响应式原理是基于defineProperty,然后说了一下他的缺陷等等
问了我一下数据解析,模板解析是怎么建立的观察者
当时这个问题,我是还真忘记了,想不起来,也是老实交代了自己不会🥺
说了一下什么是闭包!
让我介绍了一下js中的闭包,闭包的缺点,内存泄漏的问题。还说了一下闭包可以用于封装模块,比如防抖节流。封装私有变量,比如computed
面试官好奇问了我说掘金这个2023人气作者top12之前也看到过
当时我就纳闷了,这个称号不是我的吗?然后说了可能是因为这个分类不同,我是走的前端嘛。当时这个真给我整懵了!!!
浏览器从输入url到渲染经过了哪些过程
输入url之后,浏览器会解析url,检测地址是否合法,解析出你的主机名,方法体,目标地址等等
然后通过dns解析,将你目标地址解析成对应的ip。
然后通过TCP三次握手
再浏览器发送http请求,服务器响应请求,
再是浏览器拿到请求,渲染dom树和cssom树合并成render树,解析相应的js脚本,然后TCP的四次挥手断开连接。
加载js脚本会阻塞渲染,怎么解决
这里我说了js中的两个关键字defer和async
然后面试官让我说了一下区别:defer执行完不会立即指向,async加载完毕会立即执行,然后就是执行顺序的区别
js中怎么处理异步事件
这里我讲了一下解决异步的发展史,先讲一开始是通过回调解决,然后再说到promise,还有generator 最后是async awiat
问了我一下js本身是单线程,怎么处理异步的事件
这里我讲了一下js的Event-Loop 事件循环机制,讲了一下基本的执行流程,宏任务,微任务
然后就是手写题
实现一个红绿灯效果
这里我直接给大家上代码
js
class TrafficLight {
constructor() {
this.colors = ['red', 'yellow', 'green'];
this.times = [3000, 1000, 2000]; // 默认红、黄、绿灯时间
this.currentIndex = 0;
this.isRunning = false;
}
setLightTime(color, time) {
const index = this.colors.indexOf(color);
if (index !== -1) {
this.times[index] = time;
}
}
setLightColor(color) {
const index = this.colors.indexOf(color);
if (index !== -1) {
this.currentIndex = index;
}
}
start() {
this.isRunning = true;
this.changeLight();
}
pause() {
this.isRunning = false;
}
async changeLight() {
while (this.isRunning) {
const color = this.colors[this.currentIndex];
const time = this.times[this.currentIndex];
console.log(`${color} light`);
await new Promise(resolve => setTimeout(resolve, time));
this.currentIndex = (this.currentIndex + 1) % this.colors.length;
}
}
}
// 使用示例
const trafficLight = new TrafficLight();
trafficLight.start();
// 模拟修改红绿灯时间和颜色
setTimeout(() => {
trafficLight.setLightTime('red', 5000); // 修改红灯时间为5秒
trafficLight.setLightColor('green'); // 切换到绿灯
}, 10000);
// 模拟暂停
setTimeout(() => {
trafficLight.pause(); // 暂停红绿灯
}, 20000);
怎么拿到页面上的所有DOM节点,并且取到节点数的前10位
这道题,面试官说他后面还有一场面试,就让我说了一下思路
我说了一下,我们可以通过document.querrySelectAll('*')
可以拿到一个数组形式的dom节点,
然后我们可以遍历这个数组,将所有同类型的dom节点进行统计。
然后维护两个调用栈,一个主栈,一个暂存栈
一个个遍历,放入主栈,后来的与主栈的数据进行对比,如果主栈中数量更少,就push到暂存栈当中,然后把数量多的push到主栈中,一直维护主栈中只有十个数据,如果不满足,就把暂存栈的数据push进去,直到主栈中满十个数据。
最后
如果,你觉得这篇文章有帮助的话,可以帮博主点赞+评论+收藏,三连一波!感谢!
后面我还会出一些面经!大家可以持续关注一波!