d***o
发帖数: 113 | 1 上周面试linkedin的前端，杯具了。反馈说是desgin和coding没做好。我百思不得其解
，想问问大家我的回答到底出了什么问题。
design是倒数第二轮，一个刚刚入职不到一年的小女生主试。
题目是设计一个registration real time map for linkedin. 每当有人注册linked,地
图上就会有一个点闪一下。
我首先问她的第一个问题是期望的效果是什么样的，多久刷屏一下，resolution到多少
，闪的点是不是越大代表注册人数越多。她说1秒钟刷屏一次，resolution到post code
，点的大小代表什么你自己说了算。我就说因为很可能同一地区有可能一秒钟内有多人
注册，所以我就用点的大写代表人数。然后我就开始设计api，我说我期待api返回一个
数组，数组里每个元素是一个json object，包含latitude,longitude和人数，我每个1
秒钟call一次这个api。然后她就说这不行，服务器只返回country code和post code，
并且不能够1秒钟call一次，服务器受不了，最多30秒call一次。于是我就改了一下，
前端加一个转换函数，把country code+post code转换成latitude,longitude，中间有
一个cache，采用lfu淘汰算法。至于服务器端，我用30台服务器，有一个load balance
，这样就可以1秒call一次。她还是说不行，最多10秒call一次，不能再多了。我就说
那好吧，setInterval为10秒一次，然后把拿到的点画到地图上，另外有一个
setInterval，隔3秒，把所有的点清理。她又说不行，我们虽然最多只能10秒call一次
，但要模拟每一秒都有点闪和灭。我说那就给每个拿回来的点随机放一个0~10之间的
delay值，setInterval为1秒，每次把delay--，直到为0就开始在地图画点。然后她又
说现在感觉resolution太高了，地图上都是点，怎么办。我说那api返回的时候能不能
先aggregate一下，她说还是不行，api返回的东西不变。我说那好吧，那个country
code+post code转换成latitude,longitude的函数里，我把多个country code+post
code转到同一个latitude,longitude，这样就可以在前端aggregate。然后她就没有再
提问了。
回来以后我一直很纳闷，这题提的要求很不合理。api不直接返回我需要的内容，无端
增加前端的工作量。然后最多10秒call一次，这什么破服务器？同时非要模拟每一秒都
有活动，简直是自找麻烦。然而这样的设计面试官也还是很不满意，最后还是fail了。
coding是最后一轮，当时我已经非常疲倦，结果遇到一个非常不友好，乌克兰女的面试
官。
题目是给出一个string输入，表示一系列tuple: "(1,2,3),(4,5,6),(7,8,9)"，然后实
现一个multiply(n)函数，返回每个tuple里第n个数的积。比如这里multiply(2)的话，
就返回2*5*8=80. 要求写成一个class
我首先确认是写一个constructor function，然后用new关键字来call这个function来
生成class。她说可以，我就开始写。最终代码如下：
Tuple = function(str) {
this.tuple = [];
this.parse(str);
}
Tuple.prototype.parse = function(str) {
var str2 = str.substring(1, str.length-1);
var t = str2.split('),(');
var tps = t.map(function(item) {
return item.split(',').map(function(i) {return +i})
})
this.tuple = tps;
}
Tuple.prototype.multiply = function(n) {
if(n<=0 || n>this.tuple[0].length) {return null;}
var output = 1;
for(var i=0; i
output *= this.tuple[i][n-1];
}
return output;
}
fiddle在这里：https://jsfiddle.net/dongogogo776/rem5gus4/
题目应该很简单，但互动效果极其的差。我刚开始写了几个字，她就说我写错了，一会
儿说我没有注意输入的validation，一会儿又说我不应该把parse函数分开。str.
substring那里我本来写的是.slice的，她说不行一定要让我用.substring。我问有啥
不一样吗，她说差不多但还是一定要问用.substring。parse函数里tps.map那一行我本
来是想用for循环，同时进行validation的，她又说for循环不对，容易出错，要用high
order function才安全。我说我改把，刚写下this.tuple = 这几个字她又说我错了，
不可以直接等于。我差点没骂出来说你都不知道我准备怎么写怎么就知道我错了？最后
完了又说我没有validation，我说我本来想parse时候用for循环同时做validation的，
是你不让用for循环的。她又问我那你现在怎么做validation，我说我再写个
validation function吧，把string拆开了一个个点valid一下看有没有violated的地方
。她说检查violated太复杂的，有没有更简单的方法。我说那就写个regular
expression吧，但这比较复杂，我现在写不出来。然后她就无话了。
7轮面试最终就是这两轮挂掉。我感觉前端真是个坑，答题很无所适从。跟大家分享一
下，希望一起琢磨琢磨到底怎么样才能答好题目。 |
h***n
发帖数: 1600 | 2 我现在知道了为什么linkedin越来越慢，原来Linkedin的developers觉得users注册自
己的地址后，能够在delay 10秒后看到注册的东西显示出来，已是Linkedin的服务器能
达到的最好结果了! |
s*****3
发帖数: 10 | |
f***k
发帖数: 147 | 4 说下自己观点楼主别生气，要求不要每秒call 服务器的需求很合理。前端只是要显示
一个activity的图，让user感受每秒都有世界各地的人注册，如果每一个页面每秒都要
call服务器，cost会不会太高了？
user完全不care你的每个点是否精确
其实每三十秒call一次完全可行。你只需要保存好过去一次或两次call的结果（如每一
次都是一个postal code集合），弄一个Queue，然后每次拿到新结果了
，入queue，把最老的那一次弹出。然后把你queue中所有的点放在一个大set里。
每秒钟从这个set随机选sub set绘制即可。 |
e*******s
发帖数: 1979 | 5 前端面试是真难啊
code
个1
【在 d***o 的大作中提到】
: 上周面试linkedin的前端，杯具了。反馈说是desgin和coding没做好。我百思不得其解
: ，想问问大家我的回答到底出了什么问题。
: design是倒数第二轮，一个刚刚入职不到一年的小女生主试。
: 题目是设计一个registration real time map for linkedin. 每当有人注册linked,地
: 图上就会有一个点闪一下。
: 我首先问她的第一个问题是期望的效果是什么样的，多久刷屏一下，resolution到多少
: ，闪的点是不是越大代表注册人数越多。她说1秒钟刷屏一次，resolution到post code
: ，点的大小代表什么你自己说了算。我就说因为很可能同一地区有可能一秒钟内有多人
: 注册，所以我就用点的大写代表人数。然后我就开始设计api，我说我期待api返回一个
: 数组，数组里每个元素是一个json object，包含latitude,longitude和人数，我每个1
|
d***o
发帖数: 113 | 6 你的想法跟我当时给的差不多，我也是每30秒取回的数据放进queue
有一点点不一样，放进queue以后，我不是随机取，随机取不能保证清空
我是拿回来以后随机分配一个delay，一直delay--直到0就pop并且绘制
30秒的限制很奇葩的，现在的服务器随便都能支持几百几千的qps，为啥1qps就不行，0
.033就行？
【在 f***k 的大作中提到】
: 说下自己观点楼主别生气，要求不要每秒call 服务器的需求很合理。前端只是要显示
: 一个activity的图，让user感受每秒都有世界各地的人注册，如果每一个页面每秒都要
: call服务器，cost会不会太高了？
: user完全不care你的每个点是否精确
: 其实每三十秒call一次完全可行。你只需要保存好过去一次或两次call的结果（如每一
: 次都是一个postal code集合），弄一个Queue，然后每次拿到新结果了
: ，入queue，把最老的那一次弹出。然后把你queue中所有的点放在一个大set里。
: 每秒钟从这个set随机选sub set绘制即可。
|
f***k
发帖数: 147 | 7 这样的问题在于，你pop以后，内存里的点原来越少，导致必须常常call服务器拿新点
。其实你不用用delay来pop的，既加重了服务器负担，又要CPU跟进每个点，每个点都
要计时。这又是何苦。
你只需要按batch pop就行，每次新batch来了，把老的set一次移除。
：你的想法跟我当时给的差不多，我也是每30秒取回的数据放进queue
：有一点点不一样，放进queue以后，我不是随机取，随机取不能保证清空 |
f***k
发帖数: 147 | 8 说句不好听的，如果这样仅仅显示闪烁效果的功能都要高频call服务器，那么太不合理
了。其实我甚至可以不call服务器，就一个静态的大set，每秒随机去取subset，显示
即可。甚至可以做一个gif。
LOL
：你的想法跟我当时给的差不多，我也是每30秒取回的数据放进queue
：有一点点不一样，放进queue以后，我不是随机取，随机取不能保证清空 |
z*******o
发帖数: 4773 | 9 把桌子一掀，
‘我就要一秒call一次，你们他妈的什么服务器？凭什么限制老子，信不信老子把你家
服务器砸了？！’ |
H**********5
发帖数: 2012 | 10 前端就是个坑，隔段时间出新库新框架，又要重新学。比刷题难多了
【在 e*******s 的大作中提到】
: 前端面试是真难啊
:
: code
: 个1
|
|
|
d***o
发帖数: 113 | 11 她的要求是取回是30秒的间隔，但闪烁是每秒都要有，所以每秒都要做一下处理
你的方案里每秒都要生成一次rnd，也不见得很efficiency
我也觉得我当时给的方案未必是最好的，但至少是working solution
我后来想到最effective的方法应该是维护一个有10个数组的数组，每次取回数据就把
数据就随机这10数组个里面撒，然后一个每一秒钟顺序取一个数组里的东西绘制，绘制
完清空，index = (index+1)%10
主要她也没深究任何的performance问题。如果performance是她关心的，问一问我怎么
improve我就能想到更efficient的方案。她当时没问就转到别的问题去了。
【在 f***k 的大作中提到】
: 这样的问题在于，你pop以后，内存里的点原来越少，导致必须常常call服务器拿新点
: 。其实你不用用delay来pop的，既加重了服务器负担，又要CPU跟进每个点，每个点都
: 要计时。这又是何苦。
: 你只需要按batch pop就行，每次新batch来了，把老的set一次移除。
:
: ：你的想法跟我当时给的差不多，我也是每30秒取回的数据放进queue
: ：有一点点不一样，放进queue以后，我不是随机取，随机取不能保证清空
|
d***o
发帖数: 113 | 12 大哥，人家设计要求是real time real data，你做个static set或者gif怎么满足要求？
【在 f***k 的大作中提到】
: 说句不好听的，如果这样仅仅显示闪烁效果的功能都要高频call服务器，那么太不合理
: 了。其实我甚至可以不call服务器，就一个静态的大set，每秒随机去取subset，显示
: 即可。甚至可以做一个gif。
: LOL
:
: ：你的想法跟我当时给的差不多，我也是每30秒取回的数据放进queue
: ：有一点点不一样，放进queue以后，我不是随机取，随机取不能保证清空
|
h***n
发帖数: 1600 | |
d***o
发帖数: 113 | 14 你的意思我应该一开始就做websocket？似乎比looping开销更大
而且websocket这么新，应该不会吧。面试官说这是几年前linkedin放在大厅的一个
demo app，那时候websocket诞生了没还不知道。她描述那个demo app运行的时候的效
果是漫天星星闪烁的样子。
如果真考websocket我就真心跪了，还没碰过这东西
【在 h***n 的大作中提到】
: Linkedin每分钟新注册人数2人!!!!
: http://expandedramblings.com/index.php/by-the-numbers-a-few-important-linkedin-stats/
: 看样子应该是有人注册时，前端才更新,把新注册的点加入到原来的图中，而不是频繁
: call后端.
|
d***o
发帖数: 113 | 15 不对，你看错了，是每秒2人，不是每分钟
【在 h***n 的大作中提到】
: Linkedin每分钟新注册人数2人!!!!
: http://expandedramblings.com/index.php/by-the-numbers-a-few-important-linkedin-stats/
: 看样子应该是有人注册时，前端才更新,把新注册的点加入到原来的图中，而不是频繁
: call后端.
|
R*********4
发帖数: 293 | 16 其实，你可以把地图想象成一个大数组。
地图是分等级的
1 Level 1
2x2 Level 2
2x2x2x2 Level 4
.... ...
2..x2.. Level 16
比如 level4， 有16个格子，只要得出每个格子注册的人数就行了。一定时间内格子里
注册的人越
多，那么那个亮点的直径或者大小越大。
x=1,y=2, z=1
x 从纬度转换过来，y从精度转换过来，z表示level
post code, 也可以理解为n个格子.
她提到resolution太高，我感觉是她认为你不懂地图
你有机会可以看看 openstreetmap,或者其他开源地图，你会发现，其实图片地址是这
样的
其实就是
b.tile.openstreetmap.org/z/x/y.png
一般postcode 是 8-10级，也就是说，给你的可能就是基于 256X256 - 1024x1024的数
组的数据，
其实我觉得,面试你的人，还是一个蛮厉害的前端。 |
d***o
发帖数: 113 | 17 好像没那么复杂吧，她只是说api返回country code, post code和这个范围里注册人数
地图长期是处于zoom level 1的状态，把返回的点在地图上画出来
resolution太高是我转述成这样，原文是说用post code定位的话那些点太细碎了，你
能不能做到每个洲只显示一个大点的点
【在 R*********4 的大作中提到】
: 其实，你可以把地图想象成一个大数组。
: 地图是分等级的
: 1 Level 1
: 2x2 Level 2
: 2x2x2x2 Level 4
: .... ...
: 2..x2.. Level 16
: 比如 level4， 有16个格子，只要得出每个格子注册的人数就行了。一定时间内格子里
: 注册的人越
: 多，那么那个亮点的直径或者大小越大。
|
R*********4
发帖数: 293 | 18 我不知道他们使用什么画图，
我做过一个软件是显示人体肌肉，锻炼越多颜色越深，
因为整个人体是由几十个svg path肌肉组成，每个肌肉有个id，通过class, css，可以
很容易
得到各
种效果，你给的信息太少， 希望我提供信息多你有用 |
d***o
发帖数: 113 | 19 我倒没问，默认她说的是地图的API，一般也是svg
【在 R*********4 的大作中提到】
: 我不知道他们使用什么画图，
: 我做过一个软件是显示人体肌肉，锻炼越多颜色越深，
: 因为整个人体是由几十个svg path肌肉组成，每个肌肉有个id，通过class, css，可以
: 很容易
: 得到各
: 种效果，你给的信息太少， 希望我提供信息多你有用
|
R*********4
发帖数: 293 | 20 我给你一个现成得例子把。 这东西我也觉得，只有实践过的人才知道。 给刚毕业的人
考是有点过了。
我想他们是想考你 Websocket，地图, 矢量图，还是一些UI的小技巧， 这里面所有亮
点都是根据PostCode.
https://realtimemapapi.com/Map/CnVhcwyq
https://realtimemapapi.com/static/js/realtimemap.js 这里你可以看源程序
https://realtimemapapi.com/static/js/topojson/topojson.js
https://realtimemapapi.com/static/js/topojson/us.json
这里有全美所有州，County的边界适量信息。。
其实PostCode意思就是County.
Websocket 2011年底就有了，开始用Html5时就用了。 |
