寒冬中的前端社招面试

前言

本人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('robot').execute() 
// start robot
machine('robot').do('eat').execute(); 
// start robot
// robot eat
machine('robot').wait(5).do('eat').execute();
// start robot
// wait 5s（这里等待了5s）
// robot eat
machine('robot').waitFirst(5).do('eat').execute();
// wait 5s
// start robot
// robot 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面先后有五轮。不过，还算是愉快，至少让我积累了一大笔很宝贵的面试经验。