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

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

最后

如果,你觉得这篇文章有帮助的话,可以帮博主点赞+评论+收藏,三连一波!感谢!

后面我还会出一些面经!大家可以持续关注一波!

相关推荐
逐·風27 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
鱼跃鹰飞4 小时前
大厂面试真题-简单说说线程池接到新任务之后的操作流程
java·jvm·面试
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨5 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js