坐标北京,公司打算招一个中高级前端,薪资大约在 10-25K 之间,上不封顶。
由于目前公司只有一个前端,水平也一般,所以就由我来出题和面试,其实我是一名后端程序员,对前端了解有限,所以主要考察四个层面
CSS 选择器 写了几个嵌套元素, 然后多选哪些选择器无法指向。
简单布局 固定 800 像素的行,等分成三列,列宽相同, 列间距相同。 用 CSS 实现, 如果答出就追加如何用 CSS 实现等分并自动换行(bootstrap 原理)
js 变量作用域提升的问题
js 异步问题
招聘了 2 个月,10 个前端有 8 个都无法完全回答这 4 个问题,快疯了,一个人都还没录取。
第一题 大部分只会# . 空格, 大部分人一是不认识伪类 二是以为>符号是指向下一级所有元素,包括孙级 孙孙级 三是逗号组选择也不认识
第二题最惨 80%的面试者,不管你问他什么布局方式, 他给你的回答永远都是 flex 布局, 连最基础的等分行的问题都搞不明白, 都日了狗了。
第三题不说了 我都感觉我出难了
第四题答不上来基本就没心情再面了, 大部分面试者只知道 ajax 是异步的, 不知道其他有哪些语句是异步的, 更不知道异步在同步代码中会出现什么影响。
这两月见的最多的就是那种 UI 用框架, 数据也用框架, 反正什么都用框架, 一涉及到原生 涉及基础基本完蛋的前端, 昨天还有人怼我, 跟我说都什么年代了, 还用原生开发, 我真无语了
是不是现在的前端大多数都这样, 还是我落后时代了啊?
1
abcbuzhiming 2018-07-19 15:18:59 +08:00
单说第二题吧,以前其实早就有人说过,CSS1 和 CSS2 作为排版系统是过于复杂的,浮动布局其实很多人根本搞不定的(非正交型技能,需要背几十种组合产生的结果),于是简单粗暴的 flex 一出来。自然都选简单的了
|
2
sniucom OP 我承认 flex 简单粗暴,但是你不能指望一个几万几十万 IP 的,且用户评论年龄都在 30 岁的网站放弃所有用 IE10 以前的浏览器的用户吧。
|
3
abcbuzhiming 2018-07-19 15:23:08 +08:00 6
另外多说一句,其实 CSS 技能要求的思维模式和 JS 要求的思维模式完全是不同的,前者是查表的思路,后者是编程的思路,而且这两种思路是互斥的。这么多年来,我在两者的领域分别发现过不少高手,但是——能同时精通两者的,凤毛麟角(我自己都只是偏向后者)。后来我就屈服了,把前端分成了“ CSS 程序员”和“ JS 程序员”,目前看,成本降低了,能用比较少的钱招到需要的人
|
4
sniucom OP @abcbuzhiming 这思路不错, 不过即使分离了也比较难招,现在太多人是从框架学起的,基础太残, 但框架经验部分却又是最不值钱的, 但是前端自身又普遍认为值钱且有竞争力的
|
5
tyrealgray 2018-07-19 15:31:38 +08:00 via Android
1 和 2 回答得很厉害的人,3 和 4 不一定能答得很好,建议招一个 UX UI 前端,和一个 JS 开发,而不是统称前端。
内其实这方面不怎么到位,这其实这是两个不同延伸的领域 |
6
TomatoYuyuko 2018-07-19 15:36:38 +08:00
正常的。。培训班出的都是面向轮子编程,都觉得踏踏实实学基础出力不讨好。 不过题主说招中高级,这些应该都是该掌握的
|
7
frankkai 2018-07-19 15:51:45 +08:00
不如从框架出发,一步一步去深入考察。
前提是你得会 |
9
cent777 2018-07-19 15:56:26 +08:00
同后端,现在在一家偏前端的公司,很能明白你的感受。。
你的题目应该没啥问题,我 2 年前自学的前端,现在啃老底也看得懂大概 1 是基本功没啥好说的 2 应该是考文档流方面的知识,flex 感觉有点答非所问,你可以题目禁用 flex 3 一眼没看出来是啥,感觉可以题目放大点讨论一下变量作用域就行了 4 我第一反应也是 ajax。。感觉题目应该换成“ js 队列问题”,接口做多了感觉看到异步就会想到 ajax 但不得不说现在前端真的是框架的时代了,公司里那种数组和对象都分不清的新人都能拿 vue 写前端逻辑,还像模像样地在 cli 里敲敲敲,本来前端门槛就低,框架直接把它降得更低。我觉得用框架倒没什么,但一定要基础够牢,不然碰到框架无法实现的就直接 gg (公司里就很多这个情况) 最后说一下前端的现状,感觉现在外面的前端还是培训机构的占多数,基本就是三个月左右速成,基础知识很差但是会写 html,其中部分机灵点的就会伪造简历然后去北京上海应聘,现在招聘好的前端真的很难。如果你们有老手前端建议招个有上进心的培养,或者就把最低薪资提高点然后靠缘分吧。。 |
10
learnshare 2018-07-19 15:58:44 +08:00
说明面试题出错了。应该根据每个人实际的情况逐步深入去问,前端知识范围很广,都熟悉的寥寥
|
11
yoke123 2018-07-19 16:02:03 +08:00
去网上搜前端面试题呗
何必出这些题 导致招不到人呢 |
12
sniucom OP 坚定的认为过不了异步关的前端基本都是垃圾
|
13
littlewin 2018-07-19 16:20:33 +08:00
|
15
sniucom OP @frankkai 虽然我是后端,但我 2006 年就玩 jquery 了,js 每个框架刚出来都是最先开始玩。 框架这东西,只要不是傻子, 进公司后任务高压,1-2 个月就能从零到高手, 但是基础不扎实, 框架会再多, 这种人天花板太低, 一脚就踩踏
|
17
SakuraKuma 2018-07-19 16:28:57 +08:00
看下来,北京真高工资啊。
这种题目 10 下限。 现在框架太多,N 多人直接框架学起,基础?不存在的。 |
18
whypool 2018-07-19 16:44:25 +08:00 9
一看就是不会面试的,招不到人也正常
考题只能当作参考的一部分,回答不了不代表不能用,也不代表这个人水平高低 正常的流程应该是先聊项目,做过哪些(可以不用太具体),负责什么任务,在团队中承担什么角色,然后可以聊聊框架,为什么选择这个框架,有什么优缺点,如果不用这个框架要怎么实现,可以涉及一些框架具体的部分,然后就是兼容,遇到过哪些兼容问题(css/js 都行) 然后可以问一下遇到哪些难题,怎么解决的 然后观察他的回答,会就是会,不会就是不会,不要含糊其词说不清楚,看他回答问题的思路,特别是在项目上,中高级,至少经历过 3 5 个项目的打磨,伪造经验的,基本流程都说不清楚 然后问出他擅长的方向,比如 css,js 或者逻辑,然后看这个岗位哪个侧重高一点,需要兼容样式的,就招个 css 厉害的,需要写交互逻辑的,就招个 js 厉害的 还有,有时会遇到刷题厉害的,问的啥问题都能回答出,还有刷了各种面经取巧的,这个坑更大,如果能力 OK 还能用,就怕纸上谈兵的 最后一点,一定要用项目说事,不要用题目去考察 |
19
Eoss 2018-07-19 16:46:45 +08:00
感觉楼主薪资下限低了。在北京 10k,能答的看不上。建议还是起薪高点吧。
另外第 3 点,我只听过变量 /函数声明提升,没听过作用域提升。不吝赐教。 |
20
sniucom OP |
21
cent777 2018-07-19 16:57:24 +08:00 4
@sniucom 说个不是办法的办法,招俩能干的 php 或者 java,告诉他们公司有个项目很急,现在需要你们转 node,同时去学下 react,vue 之类的,总之 balabala 把他往前端上引,工作也全安排偏前端的。。。。慢慢半年过去,你们就有俩熟练的前端了———来自一位前端大牛的经历
|
22
jjx 2018-07-19 16:58:04 +08:00
我们公司的两位前端
自己用的电脑分辨率的不知道, 你们说说是什么水平 |
24
sniucom OP @cent777 我也知道这办法, 但是想招的是偏重 html css 方面的, 把公司网站的视觉和兼容问题的坑给填了, 偏 js 的太好找, 遍地都是
|
25
remon 2018-07-19 17:05:05 +08:00 via Android
别提了,之前招人面试简直了,js 啥不会不说了,CSS 都不行,工资一个比一个要的还高,不知道哪来的自信
|
27
otakustay 2018-07-19 17:11:10 +08:00
2 这个问题还附加不用 flex 的要求毫无意义,这是纯粹的领域经验。一个一直用 flex 能解决问题的人,想必是不可能自己特别去放弃 flex 来写一写的,而对于这样的人,你不让他用 flex,他就是 google 一下然后写出来,以后就能写了
所以在面试的时候用这种题把人卡住,是在浪费发现人才的机会 |
28
Sivan 2018-07-19 17:13:32 +08:00
现在是淡季
|
29
cent777 2018-07-19 17:15:47 +08:00
@sniucom 不好意思才注意到,看你回复好像还涉及到 ie 兼容性,这就的确难招了。。。以前做这一块的现在都成老前端了,现在一两年经验的都未必会做。
我觉得还是看你们需求,如果只是负责下门户网站,还能招个人让他学;如果涉及到后台表单甚至移动端适配,那只能把资历往高了招,然后面试里 js 那一块可以弱一点,然后 10k 可能太低了 |
31
sniucom OP @otakustay 问题 2 不是很难, 只是想证明这个人完全使用框架, 基本没去学过 html css。 哪怕新学者也能答出, 无非浮动, 给 margin-left 或者 margin-right 然后清除第一列 或 最后一列的 margin。 到这一步应该不难, 如果不是完全从框架开始的人,稍微动下脑子就想到吧。
如果想实现 bootstrap 那种可以自动换行,可以自适应的, 其实也简单, 无非就是两层容器, 第二层容器的左右 margin 都是负数, 这样就把第二层宽度撑出来, 然后每列直接均分宽度, 使用左右对称的 padding 把撑出的部分消除掉和做为间距, 这样你不用对任何一列做处理。 我一个后端都能像明白的问题,不知道前端为什么答不出。 |
32
FrankFang128 2018-07-19 17:26:26 +08:00
为什么没有人回答楼主的问题,到底难不难招呢
|
33
Pikaping 2018-07-19 17:27:46 +08:00
感觉到了楼主很心酸 hh,现在的人好多都太浮躁了,建议还是招科班出身的人吧
|
34
cent777 2018-07-19 17:28:20 +08:00
@sniucom 你的题目还是有点出偏了,建议出点 css hack、html 元标签、浏览器渲染方面的问题,如果来的人全答得上来,上手你们的业务应该是没问题的
|
35
fengye1996 2018-07-19 17:30:06 +08:00
钱给够啥都不难招
|
36
FrankFang128 2018-07-19 17:30:51 +08:00
这点基础问题还偏? 服了……
|
38
UnitTest 2018-07-19 17:43:34 +08:00 2
看的我很惭愧。本人现在在某大厂做前端,工资比楼主标的高一些。
但是原生 js 我也忘的差不多了。css 各种布局很多细节也记不清楚了。 所以我在面试之前这些基础知识都要好好背一遍,但是也会有遗漏。 习惯了细节去查文档。我觉得楼主可以问一些架构上的问题,模块设计,设计模式,或者算法之类的问题。招一个聪明的,计算机基础好的,前端这些细节其实很快就能掌握。 |
39
badcode 2018-07-19 17:43:50 +08:00 via iPhone
其实前端面试前端会比较好
|
40
cent777 2018-07-19 17:45:44 +08:00
@sniucom 不是你跟不上,是来面试的人基础不行,总结问题还是前端的确难招,把 10k 提一提吧,能吓跑些速成的,多吸引些跳槽的
|
41
sniucom OP @UnitTest 我们的问题很严重, 就是以往面向轮子程序员对设计的还原不到 70%(未定制的 bootstrap 能做到多高的还原呢!), 视觉美观性和兼容性太差, 一家 B 轮公司即将 C 轮的主站看起来像三流网站。 所以代码组织习惯 面向对象 设计模式 算法对我们现在不重要。
|
42
wtdd 2018-07-19 18:01:40 +08:00
一看你这个低端薪资下限,就不会有靠谱的中高端去嘛
|
43
throns 2018-07-19 18:02:18 +08:00 via Android
楼主你说最后两题难是真的吗?变量声明提升,函数声明提升,函数是第一等公民,总会提升到作用域的最顶端,这个也难?不过至于为什么存在提升,似乎是第一代 js 虚拟机的问题
|
46
Geo200 2018-07-19 18:08:31 +08:00 via iPhone
谁能说说第二题要实现精确三等分除了用 table 和 flex 布局还有哪些简单的方法?用百分百显然是不行的。
|
47
littlebaozi 2018-07-19 18:09:10 +08:00
我觉得薪资标的也有问题。10k 起就感觉就是招 10k 的。初中高级分别招吧
|
48
sniucom OP @Geo200 全 margin-right, 然后消除最后一列。bootstrap 的思想是第一层 container 代表容器固定宽度, 第二层 row 两边采用了负 margin 15 像素,将整个容器宽度撑出上一层, 第三层 col 按百分比分配, 然后两边 padding 还是 margin 的, 然后第一列的 margin 还是 padding 就消除了左边撑出的宽度, 最后一列消除右边的,这样每一列就可以使用相同配置达到精确等分目的。
|
49
Geo200 2018-07-19 18:17:24 +08:00 via iPhone
@sniucom 使用 float 的话怎么实现三等分呢? 33.3 % x3 的话还是有误差的,我觉得第二题难点就在等分这块😂
|
50
UnitTest 2018-07-19 18:20:25 +08:00
@sniucom 视觉美观应该是有 UI 和 UE 设计人员把关的。我这儿设计人员验收都要精确到像素级别,至于你是 bootstrap 还是自己从头撸,这个和美观程度没啥关系。
我理解你的意思,我只是觉得如果找不到完全符合你要求的人,可以试试招一个聪明人。 |
51
otakustay 2018-07-19 18:24:58 +08:00 1
@sniucom 为什么一个 2018 年的前端必须会 margin 来做这种布局?我用 position absolute 画出来成不?
|
52
AllenW 2018-07-19 18:32:18 +08:00
不知道是楼主描述简单了 还是我语文菜 并不是很理解楼主描述的问题 ,所以感觉很高大上 。
标胶同意楼上去找几个网上的题改改 测试 原因 你这不是在考怎么用轮子,完全是打算自己从头造轮子的出发的 或者你直接从 20k 到 40k 可能会找到合适的 |
53
sniucom OP @AllenW 没什么复杂的,不反对用轮子,但是基础要扎实,不然遇到很多特异性问题铁定抓瞎。 也和现在前端现状有段, 最近几年前端培训培训出的前端比较适合做移动端,和微信端,但我们的前端工作重点是一个面向 30 岁以上人群的 PC 网站和投资人, 注定要在视觉还原和兼容以及 SEO 上下功夫, 基础不扎实, 轮子也用不好。
网上题不敢用的, 现在面试者都知道上网刷题 |
55
mars0prince 2018-07-19 18:44:52 +08:00
10K 你还想找多高级的? 10K 是应届生水平,典型的既想骡子跑,又想骡子不吃草
|
56
g0thic 2018-07-19 18:45:16 +08:00
这是普通校招的题目吧 这还中高级啊
|
57
sniucom OP @mars0prince 下限标低了,已经意识到 , 可能之前也存侥幸心理
|
58
huijiewei 2018-07-19 18:49:43 +08:00 via iPhone
10k 能找个 bootstrap 和 jquery 玩转的就行了
要求不要太高 |
59
searene 2018-07-19 18:53:43 +08:00
第二题用 flex 有什么问题?
|
60
searene 2018-07-19 18:57:05 +08:00
flex 的浏览器覆盖率在 95%以上,不知道这个数值够不够高
|
62
sniucom OP @searene flex 覆盖率高也不是连基础手段都不会的理由。如果基础 css 应用都不顺, 只会和你推荐 flex, 基本可以认定是流水线产品吧。覆盖率再高也不是万能的, 大公司的技术栈比你想象的要保守。
|
63
maichael 2018-07-19 19:05:53 +08:00
薪水下限偏低,话说这题真的是面中高级?
|
64
sniucom OP @huijiewei 如果人人抱着这种低工资就该基础不扎实的思想, 我可以预言 10 年后 50%以上的都会失业, 就和我十几年前和只会用 PS 和切图的网站美工说你们十年后一定会失业一样。
扎实的基础不应该是任何级别程序员都具备的吗? 凭什么要给培训流水线下来的垃圾机会!!!! |
65
chezs66 2018-07-19 19:07:07 +08:00
第 3 题:js 变量作用域提升的问题
“ js 变量作用域提升”是什么意思?我只知道变量作用域(variable scope)和变量提升(variable hoisting) |
66
fgk 2018-07-19 19:09:37 +08:00
唉 我面试的时候 咋没人问这简单的问题呢
|
67
houlin 2018-07-19 19:10:08 +08:00 via Android
我算是小白吧,今年 3 月份开始学习编程,选择小程序作为入门,一开始也是接触框架,比如 wePY,但最终选择了原生写法,学习过程中遇到大佬前辈就文,他们说的最多一句话就是找个班报,我也想,可是报班还不如我自学,之前遇到过辣鸡班,所以对报班不信任。自学过程是比较慢而且效率低的,但是记住的东西特别牢,每个写法都是自己踩坑学习到的,对编程世界的理解还很稀薄,对未来所选方向还没锁定,现在自己已经百分七十把握写小程序前端,但是自己对专业的术语还是不懂,对一些基本的知识还是很残缺,特别希望自己会的全面一些,最近在搞 php 和数据库,就是因为开发过程中总是因为小程序后端而导致开发困难,总不能一直开发单机版吧。
|
68
Lxxyx 2018-07-19 19:11:46 +08:00
@sniucom 倒不是说低工资就该基础不扎实。而是基础扎实的,一般学习能力也不错,努力补补 React/Vue 等框架,拿到 10k+ 的 Offer 还是不难的…
|
69
fulvaz 2018-07-19 19:14:18 +08:00
1. 基础没啥好说的
2. 是实现栅格布局吧? 但是 flex 写得快, 调试简单, 你说不能用, 其实是在赶人, 这道题不考也罢, 对吧 3. js 变量作用域提升的问题, 8012 年就不要问这种无聊的问题了, 虽然看起来挺 6, 但是就是糟粕, 看看 es6, TDZ 了解一下, 转而问 let 和 var 的区别更好. 4. js 异步问题, 没啥好说的, 校招问题. -------------------- 话说有一次我斗胆面了一次中高端前端的面试, 人家问的是与缓存相关的 http 头的作用, 如何给仅使用 jq 的团队安利 webpack, 为什么需要 vue/react/angular, 为什么需要全局状态管理 然后指出了我的回答存在什么问题, 可以怎么做, 提出方案让我参考. 一次美妙的面试, 好想再来一次. |
71
fulvaz 2018-07-19 19:16:53 +08:00
前端还原 70%, 心疼楼主..
|
72
sniucom OP @fulvaz 我们年龄偏大的用户消费能力比较高, 浏览器兼容做的比较低。 不反对移动端用 flex, 但反对 pc 端用, 所以有这题。 比较害怕进来后就像面试表现一样,任何布局问题都是 flex。 你知道现在有太多那种只有企业站,paas saas iaas oa 后台,微信端,轻应用 APP 经验的完全没有中大型 PC 端经验的前端。在他们眼中就没有什么框架搞不定的
这些面试题是过滤题, 过滤了才会有更深入的交谈。说实话真想外请一个前端来组织面试 |
73
sniucom OP @fulvaz 面了很多要价 18K 的, 都搞不明白异步问题。 年轻的孩子明白的比例反而多些, 但是年轻孩子张口框架闭口框架。脱离框架或者换个框架什么也不会, 这就意味着岗位要给他专门设置才行
|
74
jiangnanyanyu 2018-07-19 19:27:27 +08:00 via Android
其实楼主的问题,对于有追求的前端都是能够答上来的。招个爱学习,脑子活的培养吧
|
75
fulvaz 2018-07-19 19:29:10 +08:00
@sniucom
我和同事讨论了一下, 真觉得你这种问题不可能招到人, 培训班打不出, 科班不想去. 比如题目三, 我记得是变量没声明就使用才会在业务中触发这种诡异的问题, 如果这种代码能上生产, 那就说明一件事, 基本的 eslint 都没有, 进去要从 0 开始前端工程建设. 10k 做团队工程建设......嗯....你懂的 |
78
sniucom OP @fulvaz 我不是很看重 js 可能和我经历有关, 我再 2007 年进入一家公司,应聘 c#开发,CTO 让我 0 基础去搞 js, 当时框架就是 jquery propties mootools 之类的, 第一周搞定原生, 可以模仿 facebook qqzone 以及百度的拖拽布局 ajax 交互等等, 第二周搞定 jquery, 写了一个 facebook 那种布局的基础库, 第三周就跑去做 flash 的 socket 通讯了,结合轮询做网页 im。 后来不爱前端,还是回来做后端, 但是框架而言,现在的都用过。 面向对象 函数特性也有涉及,但是底层涉及不多, 因为不做这个。
所以我一直觉得 js 那东西不用费多少力气, 反而是 html css 兼容性这些不是能考聪明就能 get 到的 |
79
sniucom OP @chezs66 我们有大量的 IE7-10 用户,可以说平台 80%的大额消费都是这些人贡献的, 就和淘宝 天猫 京东这些平台不可能用 flex 布局一样的理由.
|
82
kisnows 2018-07-19 19:58:02 +08:00
这些顶多算初级的面试题吧,不过现在前端确实难招。
|
83
chezs66 2018-07-19 19:58:41 +08:00
@sniucom 1. css 有降级使用的写法。2. 前端去适应产品,前端也要跟上技术发展,尤其是行业标准。3. 前端工程师是给产品做解决方案,而不仅做编码工作,完善的工作流程往往更能帮助企业提高效率。
|
89
sniucom OP 不扯了,我去修正面试题去了
|
90
novay55555 2018-07-19 20:24:11 +08:00 via Android
我觉得应该要重点标注一下需要兼容 IE7 的招聘需求,毕竟现在没多少前端愿意吃力讨好这方面了,不然面试也是浪费双方的时间
|
91
CocaColf 2018-07-19 20:39:50 +08:00 via iPhone
这些都是校招的基本问题吧…基本上都要能说得出来啊
|
92
yhxx 2018-07-19 20:59:35 +08:00
|
93
yhxx 2018-07-19 21:03:18 +08:00
看了一下你后面的回复,感觉题目问题不大
但是只看主楼我也有点没看懂 可能描述上需要再改改? |
94
won 2018-07-19 21:11:49 +08:00
@fengye1996 优秀的文字编辑,真不是钱给够就能招到的,都太有情操了
|
95
Biwood 2018-07-19 21:27:38 +08:00
理论基础很多人的短板,我觉得楼主出的题挺好的,时下流行的那些框架和工具都是虚的,掌握了基础知识才是实力的体现。
当然有些公司只要求你能上手干活就行,他们觉得只要对某个框架熟悉或者有使用经历就好,说明他们公司对技术的要求只有那种水准,路线不同,没什么好争论的。 |
96
lightening 2018-07-19 21:36:22 +08:00
@sniucom 可是这两种方法都不完美啊,百分比宽度是有误差的,怎么办?
|
97
otakustay 2018-07-19 21:53:20 +08:00
@sniucom 厄如果你认为 absolute 是流布局的话,你的 CSS 也就那样子了吧- -那敢问用 margin 是啥布局?
|
98
P233 2018-07-19 22:03:03 +08:00 1
@lightening 老浏览器上,float: right 代替 float: left,那 1px 就看不出来了。现代浏览器都没有 sub pixel 问题了吧。
|
99
zhgg0 2018-07-19 22:05:41 +08:00
技能点很容易学,考计算机基础知识就够了,招个脑子聪明的,现学现用。
|
100
cctv1005s927 2018-07-19 22:09:37 +08:00
3 就别问了,变量提升是非常可怕的事情,'use strict'把它关了吧。
|