鼠鼠的美团面试之旅

👋个人背景：民办本 双非硕 两段中厂实习从二月底陆陆续续投简历，除了字节腾讯外都投了个遍（挺后悔的，应该面一面涨涨经验，但现在累了）阿里系     简历挂，无一例外，全挂京东        泡池子快手        简历挂了五次美团        第一轮三面挂 第二轮二面，目前等消息百度        oc已接b站         日常oc，暑期泡池子网易        雷火日常一面挂 暑期二面挂小鹅通     oc已拒小红书     简历挂理想        简历挂作业帮     简历挂米哈游/pdd    笔试挂感觉比较友好的就是美团，基本都会给面并且面试就按照简历来，面试官也很好。第一轮面试三面挂的时候很气馁，大概在三月底，然后休息了半个月才开始投其他的暑期。总结来看其实暑期运气成分还是挺高的，前端对算法和场景手撕有一定要求，感觉大多还是在hot100的范围内，准备好八股和算法基本上问题不大，再加上先前实习和投递部门的契合度。接下来也不打算再投了，就这样结束暑期吧，成为百度孝子，秋招再见👋

📍面试公司：汇量👜面试岗位：h5前端开发📖面试问题：[[1,2,3],[4,5,6]][[1,4],[2,5],[3,6]]-2到4Math.random()* 4-2

好伤心，面试官结束时候评价是整体还行，等视频挂了5分钟内收到感谢信这前后反差，我只好安慰面试官尊重自己，但是谁来安慰我呀面试上来开始问八股1，说说 url到浏览器页面显示整个过程2，http 缓存3，流式输出，你知道哪些可以实现的方式？AI生成到前端你觉得采用那种方式？3，css 设置的元素要不断旋转，怎么写（不到一分钟面试官问我是否会，不会可以换一题，那我还行想到用什么，那换一题吧）keyfram 里面设transform；animation 里面应用设定的spin；代码如下：（linear 匀速转，infinite 无限循环）@keyframes spin {    from {        transform: rotate(0deg);    }    to {        transform: rotate(360deg);    }}.spinner {    animation: spin 2s linear infinite; /*持续2秒 转一圈*/}4，输出解释题：function app() {    const [count, setCount] = useState(0)    useEffect(() => {        const interval = setInterval(() => {            console.log('useEffect')            setCount(count + 1)        }, 1000)    }, [])     return (        <div>            <h1>{count}</h1>        </div>     )}会输出打印什么？h1位置 count 显示什么那当然每隔1s 打印出0，页面显示也是05，好的，你分析他原来想要实现什么效果，然后现在这段代码怎么改能实现预期效果，你有几种方式？【用useRef 、手写update函数，设定count 动态依赖项，使用setTimeout 递归（但是容易爆栈）】我当时有点懵，当然是没考虑到function app() {    const [count, setCount] = useState(0)    const countRef = useRef(count);    useEffect(() => {        setInterval(() => {            console.log('count', count);            // setCount(count + 1)            setCount(countRef.current + 1)        }, 1000)    },[])    useEffect(() => {       const update = () => {        console.log('update')        setCount(count + 1)         setTimeout(update, 1000) // 递归调用, 会导致栈溢出       }        update(); // 初始调用    })    useEffect(() => {        const interval = setInterval(() => {            console.log('useEffect')            setCount(count + 1)        }, 1000)    }, [count]) // 动态依赖，但是频繁定时器创建和销毁    return (        <div>            <h1>{count}</h1>        </div>     )}7，输出顺序是什么？function app() {        promise.resolve().then(() => {        console.log('promise')    })    useEffect(() => {        console.log('useEffect')    }, [count])    useLayoutEffect(() => {        console.log('useLayoutEffect')    }, [count])    return (        <div>            <h1>{count}</h1>        </div>     )}输出：useLayoutEffect promiseuseEffectuseLayoutEffect（dom更新后，相当浏览器刷新渲染了，立即同步执行）、promise (微任务，在同步执行完清空微任务队列）useEffect（异步执行，事件循环后执行）期间问了useLayoutEffect 和 useEffect 区别8，看下面输出什么？（弱弱心想：不能出点其他的吗？）function Foo() {    getName = function () {        alert(1);    }    return this;}Foo.getName = function () {    alert(2);}Foo.prototype.getName = function () {    alert(3);}var getName = function () {    alert(4);}function getName() { alert(5); }Foo.getName(); // 2getName(); // 4Foo().getName(); // 1getName(); // 1new Foo.getName(); // 2new Foo().getName(); // 3new new Foo().getName(); // 3看这是金典js输出，但是解释起来费劲呀，解释不断问我：变量提升到哪，函数提升到哪，可以修改一下代码看看提升到的位置，new 关键字分析一下，作为普通函数调用还是.... （问下牛友，这种题目去那找能复习到呀）9，写个sum函数实现下面输出：console.log(sum(1,2,3).sumOf()); // 6console.log(sum(1,4)(2).sumOf()); // 7console.log(sum(1)(2)(3)(4).sumOf()); // 10function sum(...args) {    let total = args.reduce((acc,cur) => acc + cur,0);    function innerSum(...newArgs) {        total += newArgs.reduce((acc,cur) => acc + cur,0);        return innerSum;    }    innerSum.sumOf = () => total;    return innerSum;}console.log(sum(1,2,3).sumOf()); // 6console.log(sum(1,4)(2).sumOf()); // 7console.log(sum(1)(2)(3)(4).sumOf()); // 10

30min 八股+项目 25min 手撕 + 5min反问1.redux用法，分为哪些部分2.图片懒加载怎么实现3.Intersection Observer会有性能问题吗4.使用时如何解决频繁计算5.图片懒加载第三方库实现6.lazyload什么时候加载真实的组件7.骨架屏优化8.localstorage和sessionstorage的区别9.cookie特殊的性能10.xss攻击11.前端数据类型12.传参的时候基本数据类型和引用数据类型有什么区别13.讲一下链表14.链表和数组存储的使用场景有什么区别15.想在链表中插入一个元素，怎么做16.想在数组中插入一个元素，怎么做17.动态数组如何实现18.扩容的比例19.讲一下栈20.js如何实现栈手撕：做了4个题，有代码输出和函数实现，都要讲思路，强度有点大反问：1.业务 2.结果