19届普通本科毕业，软件工程专业，两年工作经验

一面

1. 自我介绍
2. 问项目
3. 算法题，leetcode 112路径总和
4. 你知道哪些JS数组的API
5. 手写reduce
6. 讲一下HTTP缓存
7. 谈谈vue和react的区别和优劣
8. hooks用过吗？聊聊react中class组件和函数组件的区别
9. 前端性能优化你会怎么做？

• 减少回流重绘
• 缩小代码体积，例如：Tree-shaking、代码压缩、代码分割、Scope-hoisting等
• 减少请求数，例如：雪碧图、基础库打成一个包
• 并发请求，使用cdn，突破浏览器对同一域名的TCP连接数限制，或者使用http2
• 运行时加载，例如：图片懒加载，组件动态import
• 缓存，例如：http缓存，dll等

10. 反问环节

一面没有太大难度，进行的很快，不到40分钟就结束了

二面

1. 自我介绍

2. 项目中遇到最复杂的是什么？最有技术难度的是什么？

3. 算法题，fn([['a', 'b'], ['n', 'm'], ['0', '1']]) => ['an0', 'am0', 'an1', 'am1', 'bn0', 'bm0', 'bn1', 'bm0']

   function f(matrix) {
      const result = [];
      const len = matrix.length;
    function dfs(res, curr) {
        if (res.length === len) {
            result.push(res.join(''));
              return;
        }
          for (let i = 0; i < matrix[curr].length; i++) {
            res.push(matrix[curr][i]);
                 dfs(res, curr + 1);
              res.pop();
        }
    }
      dfs([], 0);
      return result;
   }

4. u.console('breakfast').setTimeout(3000).console('lunch').setTimeout(3000).console('dinner')，实现这个u

   class U {
    constructor() {
        this.promise = Promise.resolve();
    }
   
    console(val) {
        this.promise = this.promise.then(() => {
           console.log(val); 
        });
        return this;
    }
   
    setTimeout(wait) {
        this.promise = this.promise.then(() => {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve()
                }, wait);
            });
        })
        return this;
    }
   }
   const u = new U()
   u.console('breakfast').setTimeout(3000).console('lunch').setTimeout(3000).console('dinner')

5. 事件代理是什么？

6. e.target和e.currentTarget的区别

7. 写一个事件代理函数，需要判断child是parent的子节点

   function proxy(event, cb, parent, child) {}

8. 看代码说结果

   var length = 10;
   function fn() {
    return this.length + 1;
   }
   var obj1 = {
    length: 5,
      test1: function() {
        return fn()
    }
   }
   obj1.test2 = fn;
   obj1.test1.call()
   obj1.test1()
   obj1.test2.call()
   obj1.test2()

9. 从输入Url到页面渲染发生了什么？写个提纲

• 网络阶段：构建请求行、查询强缓存、DNS解析、建立TCP连接、发送HTTP请求、响应请求
• 解析阶段：解析html、构建dom树、计算样式、生成布局树
• 渲染阶段：生成图层树、生成绘制列表、生成图块、优先选择视口附近的图块生成位图数据、展示内容

10. Tcp和Udp的区别
11. 前端新技术了解哪些？
    说了PWA和electron，介绍了这两个主要是用来做什么
12. 问了一下工作中的性格
13. 复盘，问了一下离职原因
14. 反问

二面基本全程都在手写，过程中感觉差点就要凉凉了，但是好在题目都做出来了，这一面花了一个多小时。

三面

1. 自我介绍
2. 聊项目
3. 算法题，给数组中的字符串编号，f(['ab', 'c', 'd', 'ab', 'c']) => ['ab1', 'c1', 'd', 'ab2', 'c2']，写完后问了一下时间和空间复杂度。
4. 作用域问题，看代码说结果
   题目忘记了，做完后面试官改了一个地方让我说结果，结果做错了。。
5. 让你实现一个微信扫码登录掘金会怎么实现，微信、掘金、客户端这三方的通信流程是怎样的？
6. vue和react让你做技术选型你会考虑哪些因素？
7. React Fiber有了解吗？
   讲了为什么要做时间分片、说了react15和react16架构的区别，然后说了Fiber树其实对应了原来的vDom，本质是一个链表。
8. 了解哪些设计模式？代理模式了解吗？
   说了单例、发布订阅、观察者模式。
9. 了解消息中间件吗？
   说了redux和koa的中间件，估计面试官不是想问这个。。
10. 工作中有没主动做过什么事？
11. 你觉得你跟别人相比有什么优势？
12. 问了大学时的专业排名，高考生源是哪儿的
13. 反问

这一面也进行了一个多小时，感觉做的时候脑子有点懵，基础题居然做错了一题，后面出的题都是比较开放的，让我自己谈，问我微信扫码登录的时候有个点一直没答到面试官想要的结果，发挥的很一般。。感觉是要凉了，不过还是勉强过了。

HR面

1. 前几轮面试的感受
2. 为了这次面试准备了多久，怎么准备的
3. 聊了以往的工作经历，在团队中的定位
4. 工作后是怎么学习的，有没有自己的规划
5. 工作中遇到困难是怎么解决的
6. 团队协作的时候怎么沟通的
7. 业务繁忙时如何保障代码质量
8. 你会通过怎样的方式理解需求
9. 离职的原因
10. 期望薪资以及当前的薪资
11. 反问

HR面也聊了一小时

最后

HR面完过了一周多，问了内推的兄弟，说是已通过，在走审批流程了，但是当天被HR告知审批没通过，他们还是想要更资深一点的人(PS:外包经历毁简历)

09-27更新

去抖音电商了，有空更新一下这边的面经哈