面经:给你300一天,你来不来?

作者:Aidan路修远i

来源:juejin.cn/post/7348275757800030223

顺便吆喝一句,对技术大厂有向往,对前后端测试岗位有兴趣,不对大厂外包有100%的排斥,可以看看这里,薪酬待遇确实还不错,4年一签。

这一次面试真的是我觉得非常非常遗憾和纠结的一次经历,面试大约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进去,直到主栈中满十个数据。

#24届软开秋招面试经验大赏#
全部评论

相关推荐

一只菜鸟111:1.架构 2.负载均衡 3.SPI 4.序列化 5.熔断 降级 接口超时 6.生产者下线怎么感知? 7. rpc线程模型,NIO 可以问的太多了
点赞 评论 收藏
分享
2 3 评论
分享
牛客网
牛客企业服务