现在前端是不是特别难招？

[sniucom]

坐标北京，公司打算招一个中高级前端，薪资大约在 10-25K 之间，上不封顶。

由于目前公司只有一个前端，水平也一般，所以就由我来出题和面试，其实我是一名后端程序员，对前端了解有限，所以主要考察四个层面

1. CSS 选择器 写了几个嵌套元素， 然后多选哪些选择器无法指向。

2. 简单布局 固定 800 像素的行，等分成三列，列宽相同， 列间距相同。 用 CSS 实现， 如果答出就追加如何用 CSS 实现等分并自动换行(bootstrap 原理)

3. js 变量作用域提升的问题

4. js 异步问题

招聘了 2 个月，10 个前端有 8 个都无法完全回答这 4 个问题，快疯了，一个人都还没录取。

第一题 大部分只会# . 空格, 大部分人一是不认识伪类 二是以为>符号是指向下一级所有元素，包括孙级 孙孙级 三是逗号组选择也不认识

第二题最惨 80%的面试者，不管你问他什么布局方式， 他给你的回答永远都是 flex 布局， 连最基础的等分行的问题都搞不明白， 都日了狗了。

第三题不说了 我都感觉我出难了

第四题答不上来基本就没心情再面了， 大部分面试者只知道 ajax 是异步的， 不知道其他有哪些语句是异步的， 更不知道异步在同步代码中会出现什么影响。

这两月见的最多的就是那种 UI 用框架， 数据也用框架， 反正什么都用框架， 一涉及到原生 涉及基础基本完蛋的前端， 昨天还有人怼我， 跟我说都什么年代了， 还用原生开发， 我真无语了

是不是现在的前端大多数都这样， 还是我落后时代了啊？

感觉我这面试题有问题的给我来份《面试题大礼包》吧，顺便来点面试套路，要求重 HTML CSS 和 兼容，轻 JS 前端 MVC。

就 flex 布局问题我找了很多网站来看， 大部分大中型网站还没有使用， 特别用户全体年龄层次跨度比较大的，技术都比较传统。面向年轻人的也不多， 我能找到明确大规模使用 flex 布局的只有快手。

[abcbuzhiming]

单说第二题吧，以前其实早就有人说过，CSS1 和 CSS2 作为排版系统是过于复杂的，浮动布局其实很多人根本搞不定的（非正交型技能，需要背几十种组合产生的结果），于是简单粗暴的 flex 一出来。自然都选简单的了

[sniucom]

我承认 flex 简单粗暴，但是你不能指望一个几万几十万 IP 的，且用户评论年龄都在 30 岁的网站放弃所有用 IE10 以前的浏览器的用户吧。

[abcbuzhiming]

另外多说一句，其实 CSS 技能要求的思维模式和 JS 要求的思维模式完全是不同的，前者是查表的思路，后者是编程的思路，而且这两种思路是互斥的。这么多年来，我在两者的领域分别发现过不少高手，但是——能同时精通两者的，凤毛麟角（我自己都只是偏向后者）。后来我就屈服了，把前端分成了“ CSS 程序员”和“ JS 程序员”，目前看，成本降低了，能用比较少的钱招到需要的人

[sniucom]

@abcbuzhiming 这思路不错， 不过即使分离了也比较难招，现在太多人是从框架学起的，基础太残， 但框架经验部分却又是最不值钱的， 但是前端自身又普遍认为值钱且有竞争力的

[tyrealgray]

1 和 2 回答得很厉害的人，3 和 4 不一定能答得很好，建议招一个 UX UI 前端，和一个 JS 开发，而不是统称前端。

内其实这方面不怎么到位，这其实这是两个不同延伸的领域

[TomatoYuyuko]

正常的。。培训班出的都是面向轮子编程，都觉得踏踏实实学基础出力不讨好。 不过题主说招中高级，这些应该都是该掌握的

[frankkai]

不如从框架出发，一步一步去深入考察。
前提是你得会

[frankkai]

@frankkai 题

[cent777]

同后端，现在在一家偏前端的公司，很能明白你的感受。。
你的题目应该没啥问题，我 2 年前自学的前端，现在啃老底也看得懂大概
1 是基本功没啥好说的
2 应该是考文档流方面的知识，flex 感觉有点答非所问，你可以题目禁用 flex
3 一眼没看出来是啥，感觉可以题目放大点讨论一下变量作用域就行了
4 我第一反应也是 ajax。。感觉题目应该换成“ js 队列问题”，接口做多了感觉看到异步就会想到 ajax

但不得不说现在前端真的是框架的时代了，公司里那种数组和对象都分不清的新人都能拿 vue 写前端逻辑，还像模像样地在 cli 里敲敲敲，本来前端门槛就低，框架直接把它降得更低。我觉得用框架倒没什么，但一定要基础够牢，不然碰到框架无法实现的就直接 gg （公司里就很多这个情况）

最后说一下前端的现状，感觉现在外面的前端还是培训机构的占多数，基本就是三个月左右速成，基础知识很差但是会写 html，其中部分机灵点的就会伪造简历然后去北京上海应聘，现在招聘好的前端真的很难。如果你们有老手前端建议招个有上进心的培养，或者就把最低薪资提高点然后靠缘分吧。。

[learnshare]

说明面试题出错了。应该根据每个人实际的情况逐步深入去问，前端知识范围很广，都熟悉的寥寥

[yoke123]

去网上搜前端面试题呗
何必出这些题 导致招不到人呢

[sniucom]

坚定的认为过不了异步关的前端基本都是垃圾

[littlewin]

@yoke123
这些题答成楼主说的那个样子的话
那还真不是楼主选题的问题
建议起薪高点 15k
看有无更好的 candidate

[sniucom]

@yoke123 之前就是这种无欲无求的招聘，面向轮子编程导致整个网站做的和狗屎差不多

[sniucom]

@frankkai 虽然我是后端，但我 2006 年就玩 jquery 了，js 每个框架刚出来都是最先开始玩。 框架这东西，只要不是傻子， 进公司后任务高压，1-2 个月就能从零到高手， 但是基础不扎实， 框架会再多， 这种人天花板太低， 一脚就踩踏

[sniucom]

@cent777 没老手，所以才蛋疼。 甚至动用猎头去挖， 真挖不到靠谱的老手

[SakuraKuma]

看下来，北京真高工资啊。
这种题目 10 下限。

现在框架太多，N 多人直接框架学起，基础？不存在的。

[whypool]

一看就是不会面试的，招不到人也正常

考题只能当作参考的一部分，回答不了不代表不能用，也不代表这个人水平高低

正常的流程应该是先聊项目，做过哪些(可以不用太具体),负责什么任务，在团队中承担什么角色，然后可以聊聊框架，为什么选择这个框架，有什么优缺点，如果不用这个框架要怎么实现，可以涉及一些框架具体的部分，然后就是兼容，遇到过哪些兼容问题(css/js 都行)

然后可以问一下遇到哪些难题，怎么解决的

然后观察他的回答，会就是会，不会就是不会，不要含糊其词说不清楚，看他回答问题的思路，特别是在项目上，中高级，至少经历过 3 5 个项目的打磨，伪造经验的，基本流程都说不清楚

然后问出他擅长的方向，比如 css，js 或者逻辑，然后看这个岗位哪个侧重高一点，需要兼容样式的，就招个 css 厉害的，需要写交互逻辑的，就招个 js 厉害的

还有，有时会遇到刷题厉害的，问的啥问题都能回答出，还有刷了各种面经取巧的，这个坑更大，如果能力 OK 还能用，就怕纸上谈兵的

最后一点，一定要用项目说事，不要用题目去考察

[Eoss]

感觉楼主薪资下限低了。在北京 10k，能答的看不上。建议还是起薪高点吧。

另外第 3 点，我只听过变量 /函数声明提升，没听过作用域提升。不吝赐教。

[sniucom]

@whypool
@Eoss
这么一说感觉可能真是薪资下限设置的太低，导致太多滥竽充数的人来碰运气。 也聊项目， 但是来的人中大部分都是只做过企业站、后台系统， 要么就是移动 APP。 不大好聊

[cent777]

@sniucom 说个不是办法的办法，招俩能干的 php 或者 java，告诉他们公司有个项目很急，现在需要你们转 node，同时去学下 react，vue 之类的，总之 balabala 把他往前端上引，工作也全安排偏前端的。。。。慢慢半年过去，你们就有俩熟练的前端了———来自一位前端大牛的经历

[jjx]

我们公司的两位前端

自己用的电脑分辨率的不知道, 你们说说是什么水平

[frankkai]

@cent777 套路还是你深 233

[sniucom]

@cent777 我也知道这办法， 但是想招的是偏重 html css 方面的， 把公司网站的视觉和兼容问题的坑给填了， 偏 js 的太好找， 遍地都是

[remon]

别提了，之前招人面试简直了，js 啥不会不说了，CSS 都不行，工资一个比一个要的还高，不知道哪来的自信

[remon]

@sniucom 不不不，要 20 的不会垂直居中你能信?js 更不要提了，数组去重都说不好

[otakustay]

2 这个问题还附加不用 flex 的要求毫无意义，这是纯粹的领域经验。一个一直用 flex 能解决问题的人，想必是不可能自己特别去放弃 flex 来写一写的，而对于这样的人，你不让他用 flex，他就是 google 一下然后写出来，以后就能写了
所以在面试的时候用这种题把人卡住，是在浪费发现人才的机会

[Sivan]

现在是淡季

[cent777]

@sniucom 不好意思才注意到，看你回复好像还涉及到 ie 兼容性，这就的确难招了。。。以前做这一块的现在都成老前端了，现在一两年经验的都未必会做。

我觉得还是看你们需求，如果只是负责下门户网站，还能招个人让他学；如果涉及到后台表单甚至移动端适配，那只能把资历往高了招，然后面试里 js 那一块可以弱一点，然后 10k 可能太低了

[sniucom]

@remon 今天也面了一个要 20 的 > 选择器不认识， 布局只会回答用 flex 还 6 年多工作经验。

[sniucom]

@otakustay 问题 2 不是很难， 只是想证明这个人完全使用框架， 基本没去学过 html css。 哪怕新学者也能答出， 无非浮动， 给 margin-left 或者 margin-right 然后清除第一列 或 最后一列的 margin。 到这一步应该不难， 如果不是完全从框架开始的人，稍微动下脑子就想到吧。
如果想实现 bootstrap 那种可以自动换行，可以自适应的， 其实也简单， 无非就是两层容器， 第二层容器的左右 margin 都是负数， 这样就把第二层宽度撑出来， 然后每列直接均分宽度， 使用左右对称的 padding 把撑出的部分消除掉和做为间距， 这样你不用对任何一列做处理。
我一个后端都能像明白的问题，不知道前端为什么答不出。

[FrankFang128]

为什么没有人回答楼主的问题，到底难不难招呢

[Pikaping]

感觉到了楼主很心酸 hh，现在的人好多都太浮躁了，建议还是招科班出身的人吧

[cent777]

@sniucom 你的题目还是有点出偏了，建议出点 css hack、html 元标签、浏览器渲染方面的问题，如果来的人全答得上来，上手你们的业务应该是没问题的

[fengye1996]

钱给够啥都不难招

[FrankFang128]

这点基础问题还偏？ 服了……

[sniucom]

@cent777 行等分这题我从 2005 年负责招聘就在用， 算是布局中基础题， 难道是我真跟不上前端的发展了？

[UnitTest]

看的我很惭愧。本人现在在某大厂做前端，工资比楼主标的高一些。
但是原生 js 我也忘的差不多了。css 各种布局很多细节也记不清楚了。
所以我在面试之前这些基础知识都要好好背一遍，但是也会有遗漏。
习惯了细节去查文档。我觉得楼主可以问一些架构上的问题，模块设计，设计模式，或者算法之类的问题。招一个聪明的，计算机基础好的，前端这些细节其实很快就能掌握。

[badcode]

其实前端面试前端会比较好

[cent777]

@sniucom 不是你跟不上，是来面试的人基础不行，总结问题还是前端的确难招，把 10k 提一提吧，能吓跑些速成的，多吸引些跳槽的

[sniucom]

@UnitTest 我们的问题很严重， 就是以往面向轮子程序员对设计的还原不到 70%（未定制的 bootstrap 能做到多高的还原呢！）, 视觉美观性和兼容性太差， 一家 B 轮公司即将 C 轮的主站看起来像三流网站。 所以代码组织习惯 面向对象 设计模式 算法对我们现在不重要。

[wtdd]

一看你这个低端薪资下限，就不会有靠谱的中高端去嘛

[throns]

楼主你说最后两题难是真的吗？变量声明提升，函数声明提升，函数是第一等公民，总会提升到作用域的最顶端，这个也难？不过至于为什么存在提升，似乎是第一代 js 虚拟机的问题

[throns]

@wtdd 我觉得这些问题初级前端也应该知道吧

[sniucom]

@wtdd 认识到了，要提高

[Geo200]

谁能说说第二题要实现精确三等分除了用 table 和 flex 布局还有哪些简单的方法？用百分百显然是不行的。

[littlebaozi]

我觉得薪资标的也有问题。10k 起就感觉就是招 10k 的。初中高级分别招吧

[sniucom]

@Geo200 全 margin-right, 然后消除最后一列。bootstrap 的思想是第一层 container 代表容器固定宽度， 第二层 row 两边采用了负 margin 15 像素，将整个容器宽度撑出上一层， 第三层 col 按百分比分配， 然后两边 padding 还是 margin 的， 然后第一列的 margin 还是 padding 就消除了左边撑出的宽度， 最后一列消除右边的，这样每一列就可以使用相同配置达到精确等分目的。

[Geo200]

@sniucom 使用 float 的话怎么实现三等分呢？ 33.3 ％ x3 的话还是有误差的，我觉得第二题难点就在等分这块😂

[UnitTest]

@sniucom 视觉美观应该是有 UI 和 UE 设计人员把关的。我这儿设计人员验收都要精确到像素级别，至于你是 bootstrap 还是自己从头撸，这个和美观程度没啥关系。
我理解你的意思，我只是觉得如果找不到完全符合你要求的人，可以试试招一个聪明人。

[otakustay]

@sniucom 为什么一个 2018 年的前端必须会 margin 来做这种布局？我用 position absolute 画出来成不？

[AllenW]

不知道是楼主描述简单了 还是我语文菜 并不是很理解楼主描述的问题 ，所以感觉很高大上 。
标胶同意楼上去找几个网上的题改改 测试
原因 你这不是在考怎么用轮子，完全是打算自己从头造轮子的出发的 或者你直接从 20k 到 40k 可能会找到合适的

[sniucom]

@AllenW 没什么复杂的，不反对用轮子，但是基础要扎实，不然遇到很多特异性问题铁定抓瞎。 也和现在前端现状有段， 最近几年前端培训培训出的前端比较适合做移动端，和微信端，但我们的前端工作重点是一个面向 30 岁以上人群的 PC 网站和投资人， 注定要在视觉还原和兼容以及 SEO 上下功夫， 基础不扎实， 轮子也用不好。

网上题不敢用的， 现在面试者都知道上网刷题

[sniucom]

@otakustay 那就是流布局了，流布局本身是一个最难控制的

[mars0prince]

10K 你还想找多高级的？ 10K 是应届生水平，典型的既想骡子跑，又想骡子不吃草

[g0thic]

这是普通校招的题目吧 这还中高级啊

[sniucom]

@mars0prince 下限标低了，已经意识到 ， 可能之前也存侥幸心理

[huijiewei]

10k 能找个 bootstrap 和 jquery 玩转的就行了
要求不要太高

[searene]

第二题用 flex 有什么问题？

[searene]

flex 的浏览器覆盖率在 95%以上，不知道这个数值够不够高

[sniucom]

@searene ie8 呢， 你看不起的用 ie8 的老家伙几千上万的消费，能放弃？

[sniucom]

@searene flex 覆盖率高也不是连基础手段都不会的理由。如果基础 css 应用都不顺， 只会和你推荐 flex， 基本可以认定是流水线产品吧。覆盖率再高也不是万能的， 大公司的技术栈比你想象的要保守。

[maichael]

薪水下限偏低，话说这题真的是面中高级？

[sniucom]

@huijiewei 如果人人抱着这种低工资就该基础不扎实的思想， 我可以预言 10 年后 50%以上的都会失业， 就和我十几年前和只会用 PS 和切图的网站美工说你们十年后一定会失业一样。
扎实的基础不应该是任何级别程序员都具备的吗？ 凭什么要给培训流水线下来的垃圾机会！！！！

[chezs66]

第 3 题：js 变量作用域提升的问题
“ js 变量作用域提升”是什么意思？我只知道变量作用域(variable scope)和变量提升(variable hoisting)

[fgk]

唉 我面试的时候 咋没人问这简单的问题呢

[houlin]

我算是小白吧，今年 3 月份开始学习编程，选择小程序作为入门，一开始也是接触框架，比如 wePY，但最终选择了原生写法，学习过程中遇到大佬前辈就文，他们说的最多一句话就是找个班报，我也想，可是报班还不如我自学，之前遇到过辣鸡班，所以对报班不信任。自学过程是比较慢而且效率低的，但是记住的东西特别牢，每个写法都是自己踩坑学习到的，对编程世界的理解还很稀薄，对未来所选方向还没锁定，现在自己已经百分七十把握写小程序前端，但是自己对专业的术语还是不懂，对一些基本的知识还是很残缺，特别希望自己会的全面一些，最近在搞 php 和数据库，就是因为开发过程中总是因为小程序后端而导致开发困难，总不能一直开发单机版吧。

[Lxxyx]

@sniucom 倒不是说低工资就该基础不扎实。而是基础扎实的，一般学习能力也不错，努力补补 React/Vue 等框架，拿到 10k+ 的 Offer 还是不难的…

[fulvaz]

1. 基础没啥好说的

2. 是实现栅格布局吧? 但是 flex 写得快, 调试简单, 你说不能用, 其实是在赶人, 这道题不考也罢, 对吧

3. js 变量作用域提升的问题, 8012 年就不要问这种无聊的问题了, 虽然看起来挺 6, 但是就是糟粕, 看看 es6, TDZ 了解一下, 转而问 let 和 var 的区别更好.

4. js 异步问题, 没啥好说的, 校招问题.

--------------------

话说有一次我斗胆面了一次中高端前端的面试, 人家问的是与缓存相关的 http 头的作用, 如何给仅使用 jq 的团队安利 webpack, 为什么需要 vue/react/angular, 为什么需要全局状态管理

然后指出了我的回答存在什么问题, 可以怎么做, 提出方案让我参考.

一次美妙的面试, 好想再来一次.

[sniucom]

@Lxxyx 下线标低是人事那边心存侥幸， 想广撒网。 不过就面试来看，不管薪资标多少都比较难招。

[fulvaz]

前端还原 70%, 心疼楼主..

[sniucom]

@fulvaz 我们年龄偏大的用户消费能力比较高， 浏览器兼容做的比较低。 不反对移动端用 flex， 但反对 pc 端用， 所以有这题。 比较害怕进来后就像面试表现一样，任何布局问题都是 flex。 你知道现在有太多那种只有企业站，paas saas iaas oa 后台，微信端，轻应用 APP 经验的完全没有中大型 PC 端经验的前端。在他们眼中就没有什么框架搞不定的

这些面试题是过滤题， 过滤了才会有更深入的交谈。说实话真想外请一个前端来组织面试

[sniucom]

@fulvaz 面了很多要价 18K 的， 都搞不明白异步问题。 年轻的孩子明白的比例反而多些， 但是年轻孩子张口框架闭口框架。脱离框架或者换个框架什么也不会， 这就意味着岗位要给他专门设置才行

[jiangnanyanyu]

其实楼主的问题，对于有追求的前端都是能够答上来的。招个爱学习，脑子活的培养吧

[fulvaz]

@sniucom

我和同事讨论了一下, 真觉得你这种问题不可能招到人, 培训班打不出, 科班不想去. 比如题目三, 我记得是变量没声明就使用才会在业务中触发这种诡异的问题, 如果这种代码能上生产, 那就说明一件事, 基本的 eslint 都没有, 进去要从 0 开始前端工程建设. 10k 做团队工程建设......嗯....你懂的

[sniucom]

@fulvaz 题目三我会取消掉 题目会尽量向 h5 css w3c 标准 以及兼容性便宜，放弃 js 的深度考核

[chezs66]

@fulvaz 赞同。有时间纠结用非 flex 的解决方案，不如把时间投入到工程化、测试。就算出了兼容性问题也很容易解。

[sniucom]

@fulvaz 我不是很看重 js 可能和我经历有关， 我再 2007 年进入一家公司，应聘 c#开发，CTO 让我 0 基础去搞 js， 当时框架就是 jquery propties mootools 之类的， 第一周搞定原生， 可以模仿 facebook qqzone 以及百度的拖拽布局 ajax 交互等等， 第二周搞定 jquery， 写了一个 facebook 那种布局的基础库， 第三周就跑去做 flash 的 socket 通讯了，结合轮询做网页 im。 后来不爱前端，还是回来做后端， 但是框架而言，现在的都用过。 面向对象 函数特性也有涉及，但是底层涉及不多， 因为不做这个。
所以我一直觉得 js 那东西不用费多少力气， 反而是 html css 兼容性这些不是能考聪明就能 get 到的

[sniucom]

@chezs66 我们有大量的 IE7-10 用户，可以说平台 80%的大额消费都是这些人贡献的， 就和淘宝 天猫 京东这些平台不可能用 flex 布局一样的理由.

[sniucom]

@chezs66 不可能让产品去适应前端， 只能是前端去适应产品。

[luoway]

@fulvaz
@sniucom
var 变量提升是 ES6 出现以前很火的笔试题

[kisnows]

这些顶多算初级的面试题吧，不过现在前端确实难招。

[chezs66]

@sniucom 1. css 有降级使用的写法。2. 前端去适应产品，前端也要跟上技术发展，尤其是行业标准。3. 前端工程师是给产品做解决方案，而不仅做编码工作，完善的工作流程往往更能帮助企业提高效率。

[sniucom]

@chezs66 达到你说的这种水平的 20%？ 滥竽充数的人太多

[sniucom]

@kisnows 10 个人中碰到 3 个能讲清异步的心情是日了 1 万条狗的

[kisnows]

@sniucom #85 那还是高价从大公司挖人吧，起码我们公司的能保证进来的人异步相关的知识都是了解的。

[sniucom]

@kisnows 你在北京不

[kisnows]

@sniucom #87 不在，其实提高薪资标准就能找到合适的人

[sniucom]

不扯了，我去修正面试题去了

[novay55555]

我觉得应该要重点标注一下需要兼容 IE7 的招聘需求，毕竟现在没多少前端愿意吃力讨好这方面了，不然面试也是浪费双方的时间

[CocaColf]

这些都是校招的基本问题吧…基本上都要能说得出来啊

[yhxx]

https://github.com/fex-team/interview-questions

你要的面试题大礼包

[yhxx]

看了一下你后面的回复，感觉题目问题不大
但是只看主楼我也有点没看懂
可能描述上需要再改改？

[won]

@fengye1996 优秀的文字编辑，真不是钱给够就能招到的，都太有情操了

[Biwood]

理论基础很多人的短板，我觉得楼主出的题挺好的，时下流行的那些框架和工具都是虚的，掌握了基础知识才是实力的体现。

当然有些公司只要求你能上手干活就行，他们觉得只要对某个框架熟悉或者有使用经历就好，说明他们公司对技术的要求只有那种水准，路线不同，没什么好争论的。

[lightening]

@sniucom 可是这两种方法都不完美啊，百分比宽度是有误差的，怎么办？

[otakustay]

@sniucom 厄如果你认为 absolute 是流布局的话，你的 CSS 也就那样子了吧- -那敢问用 margin 是啥布局？

[P233]

@lightening 老浏览器上，float: right 代替 float: left，那 1px 就看不出来了。现代浏览器都没有 sub pixel 问题了吧。

[zhgg0]

技能点很容易学，考计算机基础知识就够了，招个脑子聪明的，现学现用。

[cctv1005s927]

3 就别问了，变量提升是非常可怕的事情，'use strict'把它关了吧。