这一次面试真的是我觉得非常非常遗憾和纠结的一次经历，面试大约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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。