寒冬中的前端社招面试

前言

本人17年毕业至今，一年多工作经验，三月中旬加入了找工作的大潮。这里整理了一下最近面试的题目，分享给大家。

再惠

一面

1. 自我介绍一下
2. 看到你用过mobx，说一下mobx的优势？实现原理呢？
3. 你工作以来，在项目中遇到的印象深刻的问题有哪些？有没有在项目实践过一些自己的想法和新技术？
4. 说说TS和ES的区别，以及TS带来的好处？
5. 你说你学习能力强，那你毕业这一年多来，你都是怎么熟悉业务和项目的？有系统的看完过哪本书？
6. 对小程序有了解吗？（我只写过demo）
7. 对打包工具有了解吗？
8. 除了react，你还用过哪些框架？
9. 求契波那切数列的第N项
10. 获取到契波那切数列的前N项
11. 求一个对象的层级数（我写完后，又问如果不用递归，只用循环实现呢）
12. 实现下面这道题中的machine函数

function machine() {
    
}
machine('ygy').execute() 
// start ygy
machine('ygy').do('eat').execute(); 
// start ygy
// ygy eat
machine('ygy').wait(5).do('eat').execute();
// start ygy
// wait 5s（这里等待了5s）
// ygy eat
machine('ygy').waitFirst(5).do('eat').execute();
// wait 5s
// start ygy
// ygy eat
复制代码

二面

1. 介绍一下你们那边的业务？那你们业务都是在app里面吗？（安卓、IOS、H5甚至小程序和快应用都有，基本上都是webview套h5做的）
2. 你最近有比较感兴趣的、主要研究的技术吗？为什么感兴趣？
3. 我看了你的github，上面star了一个react.backbone，这个是什么？
4. 我看你的github里面有个mobx-jquery，这个是做什么的？
5. 这个mobx-jquery里面的observer你是怎么实现的？（封装的autorun）那么autorun的原理是什么？
6. 你对团队的要求是怎么样的？你毕业这一年多收获最大的是什么？
7. 看到你写了TS，那么TS的优势是什么呢？你说修改字段后其他还用原字段的地方会报错，那么是怎么跟踪到是否修改的呢？vscode里面是怎么实现根据类型文件来给一个方法添加类型的呢？
8. 看到你的简历里面写着维护一个老项目，这个lizard是什么框架？（基于backbone封装的一个Hybrid框架xxxxx）
9. 那来做道题吧。实现一个函数，可以按顺序获取到一个DOM节点下面所有的文本。
10. 你有什么想问我的吗？（你平时在公司的一天都是在做什么呢？）

总结

感觉技术栈和这家可能不是很匹配，他们主要做h5和小程序，h5也以vue居多，所以这些问题基本上都没怎么深入。 面试除了mobx，也没问过我react相关的技术，也没问过app开发方面的东西，他们唯一感兴趣的就是TS，可惜我TS写的不多。 但是面试体验还不错，我属于比较紧张的人。面试官让现场写代码，可以查资料，可以现场调试，甚至有不懂的还可以问一下他，我觉得这个挺好的。听他们描述，感觉团队技术氛围不错，和HR聊了一下，觉得福利还算不错。

附上一面第12题的答案。

function machine(name) {
    return new Action(name)
}
const defer = (time, callback) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(callback())
        }, time * 1000)
    })
}
class QueueItem {
    constructor(defer, callback) {
        this.defer = defer;
        this.callback = callback;
    }
}
class Action {
    queue = []
    constructor(name) {
        this.name = name;
        this.queue.push(new QueueItem(0, () => console.log(`start ${this.name}`)))
    }
    do(eat) {
        this.queue.push(new QueueItem(0, () => console.log(`${this.name} ${eat}`)))
        return this;
    }
    wait(time) {
        this.queue.push(new QueueItem(time, () => console.log(`wait ${time}s`)))
        return this;
    }
    waitFirst(time) {
        this.queue.unshift(new QueueItem(time, () => console.log(`wait ${time}s`)))
        return this;
    }
    async execute() {
        while(this.queue.length > 0) {
            const curItem = this.queue.shift();
            if (!curItem.defer) {
                curItem.callback();
                continue;
            }
            await defer(curItem.defer, curItem.callback)
        }
    }
}
复制代码

富途

一面（记不清了）

1. 自我介绍
2. 为什么离职？你说你觉得做的业务无聊，那怎么样才是不无聊的呢？你期望的团队是怎样的？
3. 什么是xss攻击？有什么危害？怎么解决？
4. 实现一个深拷贝
5. 有两个有序数组M和N，怎么判断N是否为M的子集？
6. 箭头函数和普通函数有什么区别？
7. for循环里面setTimeout打印的值是多少？怎么解决这个问题呢？（let和闭包解决，解释一下原理就好了）
8. 你们团队中的每个成员都是什么角色？你在里面扮演什么角色？
9. 怎么优化页面的加载速度？如果有很多个小图标，怎么优化？iconfont有什么缺点？
10. 移动端兼容不同设备有哪些解决方案？这些方案都有哪些缺点？

达达-京东到家

面试过去的时候，先让做了一张试卷，主要是考察http、css和js的。

笔试题（只记得这几道http相关的）

1. http2.0的新特性有哪些？（选项是多路复用、头部压缩、设置优先级、服务端推送、二进制传输）
2. DNS的作用有哪些？（选项是域名解析、防火墙、负载均衡、控制流量还有一个我不记得了）
3. 以下哪些协议是可靠的？（选项是TCP、UDP、FTP、HTTP还有一个我不记得了）
4. 以下关于POST请求说法正确的是？（POST请求只能通过body带参数、服务器一定能够收到POST请求发送的数据、POST请求发送了两个数据包、POST请求可以被缓存）

一面

1. 什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？
2. CSS里面有哪些相对单位？都是相对什么的？
3. fixed是相对于谁定位的？如果加上transform会出现问题吗？
4. 什么是XSS攻击？怎么解决？
5. innerHTML有什么问题？有什么简单的办法可以避免插入文本被XSS攻击吗？
6. 为什么不推荐用style内联元素？内联元素有什么缺点？（css文件可以缓存）
7. 什么是原型链？原型链的终点指向什么？
8. cookie、sessionStorage、localStorage的区别和作用是？
9. http状态码有哪些？301和302的区别是什么？304是指什么？
10. 什么是闭包？使用场景有哪些？闭包会引起什么问题？
11. 什么是浅拷贝和深拷贝？怎么实现一个深拷贝？
12. lodash和ramda的区别是什么？
13. HTML中attribute和property的区别是什么？
14. 怎么解决跨域？
15. 字符串和new String出来的字符串有啥区别？

二面

1. 解释一下react中setState？（说说setState的表现和原理实现）
2. 如果我需要上传一个文件，前端展示进度条，用setState会导致合并更新，你有什么好办法？（Promise封装setState、利用setState底层特性，使用异步函数（setTimeout、async）包裹）
3. 有状态组件和无状态组件，有人说有状态的更好复用，有人说无状态的更好复用，你平时写的时候是怎么分的？（这个还是要看业务场景）
4. 如果有个react项目，你该管理组件状态？（从local state、global state和global store三个方向来解释）
5. react中组件是怎么响应数据的变化从而更新的呢？
6. react中的生命周期分为哪几个阶段？react16废弃了哪几个生命周期api？
7. 虚拟DOM相比真实DOM，为什么会带来性能上的优化？
8. diff算法是怎么比较新旧节点并更新的？key有什么作用？
9. 如果我这里有一个文本组件，我修改了里面的文本，那么会影响到其他的组件吗？（所以这个还是要看场景）
10. 如果store中有一个cityList字段，我们需要在用户刷新后保持原来的样子，做缓存，如果这个时候上方下达了一个命令，需要关闭某个城市的物流配送，这个时候需要将该城市移除，用户不刷新浏览器的情况下，如何做到？（这道题说实话我没理解，我说更新store和缓存，但被面试官否定了，后来只能说不知道，也忘了问他答案是什么了）
11. 对webpack有了解吗？chunk、bundle和module有什么区别？
12. 说说hash、chunkhash和contenthash的区别？
13. TypeScript有哪些好处？
14. 浏览器页面渲染的流程是什么？
15. css会阻塞页面渲染吗？会的话该怎么解决呢？怎么做到只加载首页的css？
16. 你觉得你最擅长的技术是哪一块呢？

综合面（综合+HR+部门leader）

1. 从你的项目中随便找一个，说一说这个项目解决了哪方面的问题，业务或者技术上的都行。
2. 这个项目中你的角色是什么？你做了哪些？哪里又能够体现你的能力呢？
3. 为什么只在携程呆了一年多就出来找工作了？你现在的职级是多少？
4. 你最近有看过什么书？最近在研究的技术是什么？
5. 用过vue吗？感觉和react的区别是什么？如果让你做vue项目，你能接受吗？
6. 这边是一个vue重构到react的项目，最近招人来做这块的内容，包括webpack之类的都是重新搭，你觉得你能hold住吗？
7. 打算在上海定居吗？是打算啥时候回二线？
8. 你未来3-5年的职业规划是什么？
9. 其他私密问题等等

总结

二面的时候，面试官问我有什么想问的吗？我说，对于我这种刚毕业1-2年的人来说，我对webpack和node接触比较少，在公司也很难接触到，自己写项目又遇不到很多深入的场景，接下来我该往哪方面发展呢？什么才是更重要的呢？

面试官说，你之前说自己为什么离职的时候已经说的很清楚了，我相信你已经找到答案了。我觉得对于毕业1-3年的人来说，如果能够做到独立去带一个项目和团队，这是非常可贵的。

部门leader面的时候，问了我很多项目方面的问题，不少正中我要害，刚毕业一年多来确实没有想过那么多东西。在技术不够突出，工作经验也比较少的情况下，似乎也很难说哪里能够体现出自己的能力。如果能多呆半年，肯定会有不一样的回答。

HR面的时候，这个HR对前东家的薪资待遇、职称等等可以说非常了解了，问了很多深入和细节的问题，也和我聊了很多，导致我非常尴尬和紧张（我一向不会撒谎，很多都是照实说了）。

这是自己遇到时间最久一次面试，算上HR面前后有五轮。不过，还算是愉快，至少让我积累了一大笔很宝贵的面试经验。

PS：欢迎大家关注我的公众号【前端小馆】，大家一起来讨论技术。