一年半经验前端社招——虾皮（已拿offer）

前言

在鹅厂也呆了一年多了，业务一般般，而且很忙（晚上10点+，每天不定时随时oncall）。希望能换个平台稍微轻松一些的，并寻求更好的发展和更高的技术视野，也希望能找到轻松一些的工作，所以出来看机会了。个人选择的原则：满足工作生活平衡、付出收益平衡、业务未来可观三者之一。近来有一批面试，整理完每一篇后，会持续更新《一年半经验前端社招》系列的文章

下面的题目，都会标明每一题的性质，也会给出一些参考思路

描述：对概念、过程的描述，纯理论性问答题为主
举例：说出应用场景，或者是自己团队实践的情况
伪代码：写代码，但不需要跑起来，甚至可以随便写伪代码，主要目的是描述思路
编程：真正的写代码，需要跑起来，有测试用例，要看到效果

往期回顾:

hr面的话，是一些日常、项目回顾（技术细节少说）、职业规划、为什么跑路、为什么选择这边、目前薪资和职级、期望薪资。hr面基本类似，后面会出一个hr面专题

公司面试难度评估：✭✭✭

1面

项目突出点，挖项目细节问题【描述】
各种情况下的proto指向，多道问答题【描述】
有一个class A {},问他的实例a的__proto__和A.prototype的关系，a.__proto__.__proto__是什么，a.__proto__.__proto__.__proto__是什么。然后再问普通对象、function的。这里需要注意一下Function.prototype === Function.__proto__和a的三次proto是null。一开始就问三次取a的proto，其实潜意识是null的，但刚刚下班赶车回家，心跳都没有恢复正常就进入面试，没什么状态，“em～”了10秒钟，面试官说：哎，你别打开控制台喔，别偷偷的运行哦。我说这肯定是原型链终点了，我想想，确认一下——null！犹豫就会败北，开门一波丢脸
页面10张img，http1是怎样的加载表现，怎么解决。那多域名又为什么可以解决呢【描述】
这个是重点问题之一，http1下，浏览器对一个域名下最大tcp连接数为6，所以10张图片表现为6+4。所以可以用多域名部署解决。5个a域名，5个b域名就可以实现一瞬间全部出来了(或者6个a，4个b，融会贯通)。如果是1个a域名，9个多域名，会表现为(6 + 1) + 3
http缓存是怎样的。etag和last modify分别什么优点缺点，适合什么场景【描述】【举例】
缓存、304基本问题。etag适合重要量小的资源，last modify适合不重要的量大的资源。注意last modify需要保证服务器时间准确
接上题，10张img，http2是怎样表现【描述】
一瞬间全部
http2为什么快，多了什么特性，头部压缩算法是怎样【描述】
背书，搜http2答案都有了。头部压缩是HPACK算法
react性能优化【描述】【举例】
scu生命周期、memo；usememo & usecallback记住一些值不用重新计算；虚拟列表；immutable+scu/memo；原生js；（这块聊了很久了）
长列表优化，多种方案及对比【举例】
虚拟列表、intersectionobserver、监听滚动长列表+raf（经验之谈，聊了很久）
diff算法、key作用，不要key会怎样【描述】
树diff、组件diff、元素diff；key可以原地复用，没有key无脑会更新（此时你可以发现，index做key其实会形同虚设）
react的usememo原理【描述】
闭包、缓存、memorize
编程题：对象扁平化【编程】(30min)
{ a: b: c: { d: 1 }, aa: 2, c: [1, 2] } => { 'a.b.c.d': 1, aa: 2, 'c[0]': 1, 'c[1]': 2 }
我一听到30分钟，心里暗暗的想，给30分钟是不是觉得我很菜啊。不管他，先撸为敬。reduce递归+ ...，写+debug总共4分钟就秒杀了，面试官说你怎么不写了，我说已经ok了。他看了一下，嗯，ok

主要是一开始问proto冷场了10秒，这么基础的题都犹豫了，有点丢脸了，还好后面力挽狂澜把局面拉回来了。后面因为提前做完题目，和面试官聊了很久其他事情了，业务、技术、团队、公司方向之类的，到了7点了，他说后面其他的你问hr吧(潜台词:你过了)。总的来说，面试官是那种逗比类型的，面试过程中和一个人闲聊一样，有说有笑，挺爽的

2面

项目相关，细问【描述】【举例】
这里还是问项目。对方以前也是腾讯的，我们也聊了很多腾讯内部相关的事情，挺多共同话题的
如果我接入你做的平台，怎么接入【举例】
项目继续挖。我们互相之间说了很多腾讯人特有黑话，拉近感情
jsbridge了解么，说一下【举例】
没做过，就我之前做少量内嵌webview的经验，我猜一下吧，大概就是两种：注入全局方法通信、监听url协议(如abc://，然后触发请求的地方可以做拦截如img、iframe、xhr、fetch等)。回去查了一下，发现我猜的的确是差不多，只是专业名词没到位，口头话很多
addeventlistener第三个参数作用【描述】【举例】
控制冒泡/捕获阶段执行。或者是一个对象{ passive: true }，针对的是Safari的，禁止/开启使用滚动的时候要用到
commondjs和esm区别【描述】
概念性问题
为什么浏览器不用commondjs而用了esm【举例】
cjs都是require系统本地文件，时间不用考虑。如果在浏览器使用类似cjs的require，实现过程无非就是创建script标签、发请求。这个发请求的过程就无法保证同步了，你要写成callback/promise/async-await，这样子写页面门槛又高了
es6了解不，说一下let、const的暂时性死区【描述】
概念性问题
set、map有什么好处，map和一般的对象有什么不一样【描述】
概念性问题。map可以用复杂数据类型做key
跨端的方案【描述】
内嵌webview、客户端内嵌js引擎、将js编译为客户端语言运行
编程题：字符串相乘【编程】
实际上你可以理解为大数相乘。总体很快写出来，但是自己debug的时候，花了很长很长时间，因为在debug的时候console了一下index，发现index居然错位，疯狂怀疑人生，尴尬。最终找到了原因（哭笑不得）——每次面试牛客网编辑器有一个console.log('hello world')的，我一般不会删掉。这次我居然删了，导致什么现象呢，就是这样：
```
输出结果: 0
1
```
而我期望的是
```
输出结果: 
0
1
```
如果你不删掉系统默认的一句hello world，用的时候不会觉得有什么问题
```
输出结果: hello world
0
1
```
突然删掉console.log('hello world')，目光直接到第二行，第一个index是1！那种心情。。。写代码几分钟，傻乎乎debug20分钟。面试官说，看你coding挺欢乐的，不错。我说看错这个console了，害得我白搞那么久。他说没事，问题不大