这一次面试真的是我觉得非常非常遗憾和纠结的一次经历，面试大约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 事件循环机制，讲了一下基本的执行流程，宏任务，微任务
然后就是手写题
实现一个红绿灯效果
这里我直接给大家上代码
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进去，直到主栈中满十个数据。
作者：Aidan路修远i
链接：
https://juejin.cn/post/7348275757800030223
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。