Interviewing For Front-End Engineers
Introduction
为什么面试很难
- 因为技术栈不适合当前公司?
- 即使编程技能很好但仍会当前公司使用的是不熟悉的技术?
也许是每个人对编程的理解不同
- 每个工程师对于构建产品或者解决问题的思路可能不同
- 所以并没有一个类似高考分数的同一标准
3 type of programmers
- Programming is math
- 编程就是算法,操作数字的技术
- Programming is for controlling hardware
- 编程的关键是硬件性能,程序是否足够接近底层以获得更高的性能表现
- Programming is for building things
- 巨大多数人的类型,前端工程师的主要工作
- 制作产品,用产品与用户沟通,理解规范与浏览器差异来实现功能
- Programming is math
Challenges Interviewing for Front-End Engineering
Why is interviewing for Frontend so difficult?
问题特定到前端面试,为什么如此之难?
- 技术更新过快,一夜间可能就多出许多概念
- 前端涉及范围广泛
- 车载应用、电视应用、浏览器应用、桌面应用、移动应用等等
- 与其他技术相比,gui仍十分年轻,只在最近二三十年开始蓬勃发展
这里说了个笑话
- In JavaScript, how would _you_ define scope?
作用域在JS中是一个核心概念,可是即便是如此核心的概念,不同人对此仍有不同理解
Application
Interview & Candidate Perspectives
- Interviewer
- 这里提了一个问题,作为一个面试官,你总共花了多久学习面试?
- 问题的答案可能就是从面试者的角度来说,面试很难的原因之一,因为我们花了许多时间学习如何通过面试,但很少学习如何面试他人
Goal Setting & The Interview Process
0.300
- 这个应该是美职棒的平均打击数量(10次挥棒七次不中)
- 既每十次打中三次就可以在美职棒中处于平均水准之上,成为棒球明星
0.501
- 这是作者提出的面试成功率,及面试两次就能成功一次
Steps of an interview
- Application
- Initial call
- Code test
- Phone screen
- On-site
- Result
Before You Apply
- Application
- What do you like about your current job?
- 是工作氛围很好,能帮助成长?
- 解决了许多复杂难题并且获得了奖励?
- 公司有所谓的工程师文化?
- What sort of things are you looking for in your next role?
- 建议在入职前仔细考虑下自己的需求
- Which companies have appealing engineering cultures? What makes it appealing?
- What do you like about your current job?
About Your Resume
- One page
- Skills
- Experience
- Technology familiarity
- Education
- Accomplishments
What to Do with No Experience
- What do I do if I have little/no experience?
- 可以先做测试,进入互联网公司,再转型。
- 以一个低价格帮助企业建站
- 有人会说在GItHub上放一大堆样例代码,但作者认为可能并没有太大帮助,将算法等发到Twitter等社交媒体,将一些酷炫的ui和动画发到CodePen上的效果可能比GItHub上更好,能被更多人注意到。
- 最好的办法还是多在网络上跟人交流,争取内推的机会。
- 最终的建议总结
- LinkedIn Profile
- Personal Webpage
- Network
- 非计算机相关的经历怎么处理
- 可以放在简历上
Evaluating Application
- Interviewer
- Which roles does this person fit?
- What sort of experience is required?
- Is there any bias in your selection process?
Initial Call
Initial Call Overview
- What do you do currently?
- What are some projects you’ve worked on recently?
- What are you looking for in your next role?
- Why do you want to work for ____?
- What is your availability for the next steps?
Preparing Interview Questions
- How many steps are in the interview process? How long does it generally take?
- How big is your engineering team?
- Which team would I be interviewing for?
- What is the culture like?
- Who are you competitors?
- What sort of projects would I work on?
Prescreen JavaScript Questions
What is the difference between const let, and var?
- var与let和const作用域不同;var会提升到作用域顶部,在初始化之前使用,let和const不能再初始化之前使用;const一旦初始化不可重新赋值,当然,还是可以更改引用类型的属性。
Explain prototypical inheritance
- JS使用原型提供面向对象的继承。通过指定新对象的原型属性来继承其他对象的属性或者方法。
What is “this” mean in JavaScript?
- 当前执行上下文所指向的对象,如果没有的话就是全局对象
What is the data structure of the DOM?
- Tree
What is a Stack and Queue? How would you create data structures in JavaScript?
- Stack: FILO(First In Last Out)
- Queue: FIFO(First In First Out)
How can you tell if an image element is loaded on a page?
- Image元素有onload事件
What is call() and apply()?
- 显式的更改this指向
What is event delegation and what are the performance tradeoffs?
- 当有多个元素注册同一监听事件时,可以将事件注册在其共有的父级元素上,这就是事件委托。因为注册事件会消耗性能,所以应该尽可能少的减少注册事件
What is a Worker? When would you use one?
- 浏览器内置功能,在后台可以做一些计算或者缓存,如果有一些复杂计算,并且不想阻塞当前进程,可以使用worker后台计算。
作者并不追求完全正确的答案,而是期待对这些知识有一定了解
Trivia- {} === +[]
有时候你认为你出的面试题简单是因为你已经知道答案,如果你在独立解决一些怪异问题时,还认为这些问题简单吗?
面试本来就不简单,我们被赋予高额的工资来面试别人,有些困难和挑战才是工资如此之高的正常现象。
Code Test
Code Test Overview
- Interviewee Code test tips
- Make your code as readable as possible
- 例如别用~~代替Math.round😂
- Comment your code
- 即使追求self documenting也最好加注释,这样即使不赞同实现方式也可以顺着实现逻辑缕清代码思路
- Don’t over complicate the architecture
- 还是尽量简单,简单易读的代码就是好代码
- Don’t import too many libraries
- If you have time, add unit tests
- Ask questions!
- Make your code as readable as possible
Giving & Evaluating a Code Test
- Interviewer Code Test Tips
- Make the problem as straightforward as possible
- Be honest with the time constraints
- Have a code review checklist
Average | Good | Exceptional |
---|---|---|
Application starts properly | Code is well documented | Modular architecture designed for extensibility |
3/5 requirements completes | All requirements are complete | Created unit and integration tests |
No errors and thrown in the console |
Big-O
- Knowledge: Big-O
- 大O,没啥好说的,描述时间和空间复杂度的,简单说就是忽略一切常数和其他,只保留最高位的系数。
- Big Omega Ω “best case”
- Big Theta ⍬ “average case”
- Big O O “worst case”
1 | function search(arr, num) { |
Phone Screen
Phone Screen Overview
Candidate
- Ask questions
- Talk out your solution
- Get comfortable with the environment
Interviewer
- Are you in a quiet area?
- Is the problem well worded?
- Does the candidate know what the requirements and restrictions are?
- Did you leave time for questions at the end?
Phone Screen Exercise
My solution
1 | /** YOUR CODE BELOW **/ |
- Author’s Solution
1 | class Foods { |
On-Site Preparation
不是所有面试者都能走到On-Site这一步,如果进去了On-Site环节,即使此环节搞砸了,也要强于多数面试者。
Candidate
- Practice writing code without a computer
- Go over general sample problems
- Ask your friends to test you
- Try to ask what the style of technical questions will be
Interviewer
- Make sure questions are relevant to the role
- Have backup interviewers
- Book the room for the day
- Allow time for breaks(bathroom, lunch, etc)
On-Site Interview & Concept Review
On-Site Interview Overview
- 一般来说,On-Site作为最后一个环节决定了是否发offer。那么除了大量的js基础问题,还涉及到作为面试者,在我问这些问题时我在寻找被面试者的那些特质?
- 作为被面试者,你试图尽可能的表现出自己最好的一面,当已经进行到On-Site代表公司认同你的天分,所以此时其实寻找的是不发offer的原因,不要给公司这个机会。
What is a String
- Knowledge: strings
- Primitive type
- Useful methods
- .split()
- .toLowerCase()
- .substring()
- .startsWith()
- Immutable
Reversing a String
1 | const reverseString = (str) => [...str].reverse().join('') |
Built-in Methods
- Knowledge: arrays
- Convert methods
- Object.entries()
- Array.from()
- […item]
- Useful methods
- .isArray()
- .filter()
- .reduce()
- .map()
- .concat()
- .join()
- .pop()
- .push()
- Convert methods
On-Site Interview Example Questions
Removing Duplicate Strings Exercise
1 | // Create a function that takes a string and returns a |
- Tip
- 如果涉及到unique value,考虑使用Set
Flattening an Array Exercise
1 | // Without using .flat(), create a function to flatten an array |
JavaScript Scope: bind Exercise
- Knowledge: scope
- .call()
- .apply()
- .bind()
1 |
|
Timing: Debounce Exercise
- Knowledge: timing
- setInterval()
- setTimeout()
1 | // Implement debounce |
Trees Exercise
- Knowledge: trees
1 | // We have two identical DOM trees, A and B. For DOM tree A, we have |
Rendering Exercise
- Knowledge: rendering
- requestAnimationFrame()
1 | // Create a function to move an element. The function arguments are, |
Promises Exercise
- Knowledge: Promises
1 | function returnApple(callback) { |
1 | // Create a sleep function that takes one parameter (time) and |
1 | // Create a function to turn any function into a "promisified" function. |
Wrapping Up
Results
- 此时已通过所有面试流程,所以结果只有通过或者不通过
- 有时你运气不错,基本回答上所有问题,有的时候也许只是运气不好,涉及到了知识盲区
- 尽量获取到公司对面试的反馈,以便下一次的提升
Interviewer
- Give feedback
- Invite them to re-apply
- Stay in touch