美团前端暑期实习一面

春招结束，最后去美团实习啦，总结一下面试的问题，希望能帮助大家。隔了一周多，有些问题不太记得了。

时间:3-15

部门介绍

面试官上来先介绍了部门，搞外卖业务的。

自我介绍

俺是华科计院的小菜b。0.0

项目问题

• 博客项目的虚拟滚动；
• 组件库项目的测试方案，为什么要测试，如何平衡测试和开发的时间分配；
• 小程序项目的技术选型，为什么用uniapp，和其它主流框架的对比（没太研究，答的不好）
• 后台管理系统的后端有没有做什么优化

css选择器优先级

基本答出来了，但是当时脑抽把内联样式和!important的优先级说反了。

flex布局

没问题。

回流和重绘

ok。

前端页面优化

答: 从请求和运行两方面考虑。

• 请求:压缩图片（埋下伏笔QAQ）、压缩代码、开启gzip/compress、懒加载、cdn、雪碧图、本地缓存...
• 运行:优化用户体验。减少重排、滚动优化、骨架屏、防抖节流...

图片优化相关

首先是问了图片优化的方案，答:可以让图片懒加载，先请求首屏的图片，其它图片等要展示了再请求，然后先给一个占位的元素。具体可以参考这个图片优化方案

然后问 如果我就是要优化首屏的图片，怎么办？

答:可以压缩图片。webpack和vite都有压缩图片的插件，或者直接手动去压缩图片。

然后开始聊起了图片格式，这块答的一般。

http2

答得不错，然后问了一下项目中有没有用到http2。

了解哪些js新语法

知道的都说出来了，然后漏了个js的可选链，面试官特意问了一下。

代码输出题:

setTimeout(() => {

    console.log(1);

}, 0);

async function main1() {

    new Promise((resolve, reject) => {

        console.log(2);

        resolve();

    }).then(() => {

        console.log(3);

    })

    await main2();

    console.log(7);

}

function main2() {

    console.log(8);

}

main1();

setTimeout(() => {

    console.log(10);

}, 0);

// 2
// 8
// 3
// 7
// 1
// 10

答案如上，当时把3和7搞反了，就算main2是普通的函数，await main2() 还是会把后面的代码推入微任务队列。面试官努力想提醒我，还把main2加上async又问我现在的输出，这次答对了。

场景题

给出一个数组，对应一棵目录树，正确修改每一项的selected。

数组长这样,children是子目录。

let data = [{ "id": 1540000, "label": "流量", "children": [{ "id": 33, "label": "开放平台推广渠道", "select": 0 }, ...]}]

一个简单的dfs+缓存。

const cache = new Map()
const search = (obj)=>{
    if(cache.has(obj))return cache.get(obj)
    let select = obj.select===undefined?0:obj.select
    if(obj.children!==undefined){
        obj.children.forEach((t,index)=>{
            select += search(t)
        })
    }
    obj.select = select
    cache.set(obj,select)
    return select
}
data.forEach(t=>search(t))

反问&感受

• 贵部门对新人的期望？

面试官: 主要就是看重基础。

感受：常规问题为主，还是挺简单的。css的选择器那块答的不太好，回去也把css好好整理了一遍。然后整场面试还是比较轻松，面试官看上去挺年轻，提问过程中有在引导我。

后续:通过了。二面见这里