谈谈面试与面试题
wintercn opened this issue · comments
起因，某日电话面试之后满心郁闷的我发了两条微博：
面试的时候问个css的position属性能刷掉一半的人这是啥情况……
其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了……
其中的一些回复让我认为非常有必要写这样一篇文章来说说面试和面试题的事情。
关于题目
什么样的面试题是好的？我认为有三点衡量指标：
- 区分度
- 深度
- 覆盖范围
是的，请注意我并没有使用“难度”这个词，因为这三个指标都与难度有关系。
css的position属性有哪些取值，它们的行为是什么？
这个题目几乎是我每次必问的，因为这个题区分度、深度和覆盖范围都很高。这个题的答案可以分成不同的层级:
- position属性常用的取值static、relative以及absolute和它们的基本行为是每个前端都应该掌握的。这包括relative和absolute的定位原点。
- fixed旧版本IE不支持，但是一个对技术有热情的工程师也是应该了解的。
- 有过研究工程师可以知道absolute的containing block计算方式跟正常流不同，当然如果没读过标准的话，表述方式不一定是这样。
- 对CSS布局有深入研究的工程师会知道position跟display、margin collapse、overflow、float这些特性相互叠加后的行为。
区分度可以让题目可以适用于入门级到专家级的各种面试者，深度可以保证有深度研究的面试者可以展示他们的才能，覆盖范围可以有效地了解面试者擅长的方向。
网上抱怨面试官以出难题展示自己技术为乐的声音颇多，虽然不排除这样的可能性，但是我认为这样抱怨的人多半自己没有做过面试官，实际上多数公司面试往往任务量很大，几乎不会有什么玩乐的心情。题目偏、难、怪的情况多半可能是面试官不太负责任随便从网上搜索"大公司面试题"来的——图省事是个比戏弄靠谱的多的动机。
关于过程
比起笔试，面试的最大好处是可以根据面试者的水平调节题目的难度，即使一个题目中，也可以通过提示和追问来调整难度。
一般来说，当面试者遇到困难或者长时间思考时，面试官应当给予提示来节约时间，而当面试者给出的答案不够具体或者回答得过于轻松时，可以适当追问。在我的微博中
其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了……
我提到了一些我准备的追问内容，这些知识点从前到后越来越细致，也越来越偏，从最开始的box排布，到后面的行模型，再到文本排版，基本上是网页排版从整体到细节的顺序。
当面试者前面回答的答案足够完美，我就会进行追问，确保问到我开始不懂或者面试者开始不懂为止，这样可以大大延展题目的区分度和深度。
关于评判
首先我希望表达的一点，就是面试的评判跟学校里的考试完全是两回事，太多的人把面试当做考试而把注意力放在题目上。
事实上面试中未必是所有题目全都回答"正确"就一定会通过或者较高评价。面试是面试官和面试者双方"挖掘与展示才能"的过程，参考前面提到的面试过程，全部回答正确的情况很可能是因为面试官不感兴趣懒得追问。
对于面试官而言，基本评判原则就是"我要不要这个人做我的同事？"，多数情况下，这个答案会非常清楚。一些题目是充分的，也就是"回答对了说明这个人具有可以依靠的才能"，一些题目则是必要的，也就是"回答错了说明这个人无法胜任我们的工作"。
在position一题的评判上，我一般认为能够答对static、relative以及absolute就已经可以达到必要标准。而因为CSS layout是我最擅长的部分（虽然还是很烂……），又考虑到误差，当面试者能回答80%以上的追问，我就会认为面试者水平远高于我，在工作中能够作为CSS方面的专家来依靠。
我在面试中之所以感到沮丧，是因为大部分的人仅仅在position的基本行为上就已经错了，多数人的回答都是笼统的"绝对定位"和"相对定位"两个词，问及具体行为我得到了五花八门的答案，甚至有看上去经历相当资深的工程师把absolute和relative搞混的。
而微博上一些人说"属性可以google搜索"则更离谱，position在CSS布局中是相当基础的知识，对它的行为理解深度实际上代表了一个工程师对于CSS布局系统的理解，这个理解需要长时期的学习，绝对不是可以临时google得来的。正如同考人英语，若是不认识visibility尚可以解释说确实没怎么用过，而不会写英文字母v则说明这个人根本没学过英语。
关于题目类型
面试题有很多种类型：项目细节、知识型问题，开放性问题，案例问题以及传说中的Funny Question。事实上网络上流传甚广的"大公司面试题"，往往是Funny Question，而它们真正的应用，在任何公司都是非常少见和谨慎的。
一些人提到，面试应该更注重“考察能力”。是的，我认为
web前端工程师的竞争力 = web前端知识 + 能力
能力 = 编程能力 + 工程能力 + 架构能力
这其中不包括所谓的学习能力，因为我认为学习能力是通过已有知识来体现的，如果一个具有超强学习能力的人来应聘web前端工程师但是他具有如此强的学习能力却连position这么重要的属性都没学会，那是不是下一步该要求这人附上证明自己没有精神疾病的诊断书？
工程能力和架构能力一般针对层级较高的工程师，所以一般来讲所谓能力考察就是编程能力，然后呢，编程能力一般考查方式就是案例问题，也就是传说中的——“算!法!题!”（当然我曾提到，它们与其说是算法题，不如说是稍微复杂点的小程序，它们之所以看上去不太有用是因为出题的人为了避免理解麻烦剥掉了实际的业务场景，毕竟各个公司的业务都不是一句两句可以讲清楚的）。
所以我估计教育我"考察能力"的各位,真的碰上这种题要骂死我了……
在题目类型的使用上，电话面试中我会以项目细节和知识性问题为主，一般当面面试中会使用案例问题（写程序或者架构case），开放性问题和Funny Question几乎不用。
考察能力的问题，一般我会控制在一道左右，最多不会超过两道题，因为这种问题往往非常消耗精力，过多会引起面试者抱怨。（当然有的公司专门这么干，同一天三轮技术面一轮AA面，每一轮都有算法题——这公司就是万恶的M$哈哈哈）
PS. position那道题目，我是不怕漏的，如果你要认真准备这道题的答案的话，基本等于学好了CSS的布局了，有兴趣的同学可以写篇文章并且发送简历到我的邮箱csf178 [at] gmail.com 写得好的话电话面试可以省了哦~ 阿里无线前端期待你的加入！
咦，winter 大大我可以写一篇吗？《CSS 布局大法》
话说知道 CSS3 中 position 新增了几个属性值的举手！
@yisibl 写！我自己一直懒得写……
我认为可以分两个层次来对待，比如在考察 BFC这个知识点的时候，若我出的题会是「自适应图文混排（常用在响应式的页面中）」。1.面试者知道使用 overflow:hidden 等来实现要求，但不知道原理。2.不仅知道，而且有创新，比如如果内部有内容需要溢出时改用display:table-cell。有人说知道这些概念没啥用，我说如果你不仅知道这些概念，还能灵活的学以致用，那才是CSS之道。当然如果连 position 有几个属性值都不知道，只能是「负分，滚粗了」。
以上
一丝
看来还是得给自己充充电，css并不像想象中的那么简单
关于position:relative/absolute就想起了张鑫旭的《CSS 相对|绝对(relative/absolute)定位系列》之一、二、三、四
学习了学习了，找到了新的学习目标，多谢！
今天就实测了一下，有布局经验的基本上能回答relative和absolute的。至于默认的static周围倒是知道的人特别少，fixed要是做过了固定的导航这种需求的一般能答上来，也会提出使用JS在老版本IE上的弥补方案。默认流、多层块、块格式上下文这些概念可能不是某种固定的表述方式，但是处理过IE6、7怪异模式的兼容性都会碰到，运用clearfix方案的网站不在少数，仔细研究就可以发现。margin 合并的问题同理，认真对待IE6、7怪异模式必定会总结出自己的对待方法。writing mode 我记得是废了吧，现在新标准是unicode-bidi来处理，其实如果深入挖掘还会发现Chrome的list-style-type会有特别针对东亚国家的选项和一系列自己的实现。baseline与其说是支持valign元素块的布局问题，不如说是文字排版时会遇到的问题。
写了这么多有点乱。其实就是想表达一个观念：本人并不觉得一个前端工程师有义务去了解布局实现有关的全部细枝末节，了解这些实现的更有可能是浏览器的页面渲染引擎开发人员。
当然作为考察那些自称是“熟练掌握HTML/CSS页面排版技术”的问题还是有其用途的哈哈。
为啥我觉得selection挺重要的，但是都没人提啊。。。
另外，关于这个position的面试题。。我自己的项目中用的就不多啊。就是position:absolute，然后设置top、left，height、width之类的定位啊。position:relative的也有，搭配height、width用。position:static的听过但不知道具体怎么用。。可是这个并不影响我做新功能啊。。。在一个项目中，页面布局是最初就定义好的，之后更多的是功能开发了吧。
很有意思的一点。作为一个从设计师转行的前端，我对position的理解完全是为了实现设计的布局要求一路Google出来的。这个问题对我来说虽然可能用的表达方式和标准里面不一样，但是直觉上是非常清晰的。一年多以前曾经有个Apple WebKit测试组的电面，HR（还不是真正带组的那个人）上来就问了这个问题，我一边回答一边心里觉得这个是不是太简单了...
@zhengwen2013 你这个说的在理。selection的功能是精确操控所必须的。我之前就在把系统时间日期设置组件移植到Web端时碰到过这个问题，如果没有对Selection位置的精确控制，不可能让处在同一文本框时分秒的一部分受到右侧上下调节按钮的精确控制，就像Windows更改时间那样，选中‘时’上下键改变的就是‘时’的那一部分。当然这个讨论是要建立在使用实现这种方案效果的前提之上。
selection重不重要得看使用场景。或许你们公司需要这么一个高级程序员呢，面试考考他/她也无可厚非。
static是默认属性，估计大家看到默认属性就一般不会去管了呢，哈哈。
要改变页面布局的地方就是云桌面环境了呢，不是打广告，你大可以去看看WebQQ的实现；总而言之，这已经不是单纯的页面布局属性而是通过编码操纵页面元素的事务了。
@yyx990803 果然你也自爆了 Apple WebKit 这种开发 page renderer 的专案才会关心开发人员是否熟悉 renderer behavior 的啊， @wintercn 大大不去开发浏览器引擎，去做**自主浏览器HTML渲染引擎/CSS极速选择器解析渲染引擎/执行速度贴近本地代码的JS宿主环境和解释器工具，申请中科院及国家核高基研究项目立项真的是太可惜了啊
前端我不懂，但是从叙述来看，这样的问题比较厚道
winter老师好样的！
看着大大们的交锋，愈加感到自己在这个领域知识的薄弱。有时间真得好好研读一下标准文档了。标准文档自然是极好的，谁读谁知道。
问前端问题，直接讲看过mozilla源码，慢慢讲position的实现，会不会有加分？
单就这个问题来说，我认为不加不减。前端最重要的还是灵活应用position等等的属性，而不是实现position。所以加分减分还是在于能否很好的应用上。理解原理对于一些人来说确实是可以起到促进应用的效果，但也存在一些人理解了原理可能起到负面作用。所以我认为不会以这个来判断。
@wintercn ：这其中不包括所谓的学习能力，因为我认为学习能力是通过已有知识来体现的
已有知识 = 学习能力 X 有效学习时间，所以我认为这样理解片面了。我倒觉得面试的时候问到的一些问题直接交给他去解决，让他自寻资料去解释，更能很好的体现学习能力。
@ericdum 👎
已有知识 = 学习能力 X 学习时间，所以我认为这样理解片面了。我倒觉得面试的时候问到的一些问题直接交给他去解决，让他自寻资料去解释，更能很好的体现学习能力。
温特大说的很对啊。你觉得你去给他一个机会，他找到了你想要的东西就是学习能力很强？
如果一个人接触前端1年，水平已经很不错了。这个人不管是学习能力超强还是勤奋。都是难得的人才啊。
学习能力很强，但是不勤奋，要了何用。我觉得更多的是得看人现有的知识掌握，公司需要的是你的现在，不是你可能的未来。
@AKIo0O 学习能力很强，但是不勤奋，要了何用。我觉得更多的是得看人现有的知识掌握，公司需要的是你的现在，不是你可能的未来。
道不同，我看未来。
第一行，没有说要别人找“我想要的东西”。
第二行，你既然不管别人是勤奋还是学习能力强，只考察结果。为什么要限定“接触前端1年”呢？
第三行，目测与第二行矛盾啊~~~
很好的文章，特来支持一下！
@ericdum 是啊。看似有点矛盾。这也是跟winter老师写的文章一样，容易被吐槽。
不过我想传达的东西你应该理解到了。否则也不会说道不同。
第一行，没有说要别人找“我想要的东西”。
第二行，你既然不管别人是勤奋还是学习能力强，只考察结果。为什么要限定“接触前端1年”呢？
第三行，目测与第二行矛盾啊~~~
你想要的东西，不就是很清晰明了的找到的目标信息么？这个叫学习能力？
第二行是为了突出现阶段的水平/年，是学习能力牛逼或者很勤奋。而且水平也达到我想要的。这是最完美的。
第三行是为了说明学习能力和勤奋都是同时需要的。而且现阶段也不能差。
你想要的东西，不就是很清晰明了的找到的目标信息么？这个叫学习能力？
“目标信息” 不知道你是怎么定义的。
我的原话是：“交给他去解决，让他自寻资料去解释”。
首先解释的结果、解决的方案不一定就是预设的，或是有目标的。
其次面试者能够在压力下去收集到资料，领会并理解、应用知识，这不就是学习的过程吗？如果他能做到，为什么不能够证明一个人的学习能力呢？
支持一下！
对于前端开发来说 CSS 中的 position 属性的确是非常基本的知识。
不过如果开发人员隔太久没使用的话也还是会生疏的……
而对于 IE 6/... 的各种光怪陆离的 layout hack ，在经验不是很丰富的情况下很多时候其实是靠“撞”的……
个人还是挺赞同winter老师，既然应聘的是前端的职位，如果对position的基本用法都不是很了解的话，应该都是没有多少css页面布局的经验，当然没有经验也要分两种情况：
- 确实是应该pass掉的部分
- 在其它方面有特别的能力
不过个人觉得，如果是第2种情况，面试者在简历中一般会有突出标明，面试官在面试前如果对面试者的简历有大致了解的话，很容易可以甄别出，当然问的问题也会有不同的侧重点。
面试是一个双向选择的过程，在面试前，应聘者需要做一些准备，面试官同样也应该通过简历先了解每一个面试者的基本情况，这样至少可以减少真正优秀人才在面试环节中被误判，对于双方来说也是一种尊重！
这不像是在招前端工程师，而像是招浏览器开发人员啊。
我觉得这种靠查手册就能得到答案的问题没什么好问的，毫无创造性。
@zhangchen2397 感觉承斌总不在圈里的样子= =！你不拉他下水么?我拉过一次，但是...没效果
支持。。受益了
我觉得还要加上业务能力。技术能力再强，对业务没贡献，结果就是自己折腾着玩。
不错，马克一下。
我居然完全不赞同winter的观点！但我说不出更好的理由来反驳，所以暂且认为winter的观点可以是对的
先说一下。。。其实我个人一直蛮喜欢用position的，但直到有一次被腾讯那边的重构人员说能不用就尽量别用。毕竟后期维护的话，会挺麻烦的。想想还是挺有道理的。
我觉得position的四个值：relative，absolute，fixed，static，必须是前端知道的。。其实我知道static，是因为有一次做项目，需要把绝对定位的方式去掉。。然后这四个东西，相对谁定位，也必须要做到了然于胸的。
这里的讨论比博客园热闹多了。。。
支持考算法
关于static，偶也是在需要把某个定位去掉时才知道的，哈哈。
对新人来说，考察问题解决能力也很重要啊
考算法建议还是有针对性，分考算法还是考数学，例如数据可视化和统计分析等方向数学要求高一点可以
发自我的 iPhone
在 2013-5-21，10:00，looping notifications@github.com 写道：
支持考算法
—
Reply to this email directly or view it on GitHub.
。。。一打开邮件又看到这个， 老屌丝再次路过
winter老师，写的很棒，刚好，最近在收集前端面试题，看了你这篇文章，很是认同。阿里等着我，我会努力进去的。
附上我最近收集的一些题目。用到了您的一些观点和文字。
https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
啊，感谢你的来信，不过我不是寒冬老师，前端我并不在行。要感谢寒冬老师才对：）
在 2014年1月10日 上午1:24，MarkYun notifications@github.com写道：
winter老师，写的很棒，刚好，最近在收集前端面试题，看了你这篇文章，很是认同。阿里等着我，我会努力进去的。
附上我最近收集的一些题目。用到了您的一些观点和文字。
https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions
—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-31955675
.
……
劉鑫·矮人工匠
Mars Liu @ Dwarf Artisan
第一轮不会被刷掉.. 但是 base line，writing mode，bidi 不太明白是什么意思.
.
能搞清楚position的话说明两点：
1）啃资料时会比较、整理、总结。
2）应该有过布局经验。
但后面那堆都是啥…………我去好好看一眼……
目前正在学习这些细节~
大多数人的css知识是从网上看来的，比如，css选择符权重。
所以，布道者们任重而道远啊。
从知乎上转过来看的，看来是很早之前的事情了，喜欢前端的一个原因，是我学习的过程感觉到了自己的不断的提升，每天都能学到一些好玩的东西
哈哈，这四个我都知道，不过要是深入问下去我就也歇菜了
static还是用过的，因为碰到一些需要用static覆盖绝对或相对定位的情况。还有类似默认值的问题：
visibility的默认值是什么？定位属性中的left/right/top/bottom的默认值是什么
一直还以为能不能搞懂position完全是对css理解的基本要求……
还在高中的时候扒过WordPress的皮肤的皮，那时候还不知道扒皮这个词，就发现了奇怪的position属性。认真学的话，怎么可能对这样子的知识点含含糊糊不搞清楚呢？position属性背后可是整个css排版的根本。。。任何一本书也会严肃地讲清楚position吧。。。而且三个关键字relative、absolute、fixed又是直接跟背后的原理相对应，了解过不可能记不住的。。。
position搞不懂就不可能搞明白float，流布局，clearfix，top，left，right，down，margin，padding这一大堆。。。这根本不是一个查手册的问题吧，离浏览器引擎也远远达不到。。
跟我出题的想法一模一样，我这道题也用来面试大半年了，确实可以刷掉一半以上的人，尤其是默认的static，几乎没几个知道的，有的人知道有个”正常“的，就写个normal~~
@jiguang static我倒不纠结，知道默认跟另外两种不一样就ok了，relative和absolute行为说错的太多了，就知道"绝对"和“相对”俩词……
get,多谢winter大大~
初次面试，很不习惯
css工程师 =。=
position有哪些取值 , color有哪几种取值 , 兄弟选择器有几种 , 伪类有几种 , viewpoint应该怎么写才能适配手机 , flex怎么垂直水平居中 , 在meta里面怎么写charset=utf-8.
以上这些有几个能不查字典回答出来
我还没说animation transform translate rotateX translate3d opacity scale3d这些特性跟用法 .
最后问你的mask是怎么实现的.
现在有的公司前端分的很细，有写css的，写js的，如果在这样的公司工作，可能js比较熟悉，但是说到css 相关知识可能就比较弱了
不敢苟同
有收获，多谢大大
学习能力强，需要证明，不是说说而已
还是好好看 https://drafts.csswg.org/css-position-3 吧 😂
好多 Google 不到的问题都能找到答案。