世界顶级公司的前端面试都问些什么

18,937 阅读9分钟

原文:davidshariff.com/blog/prepar…

作者:David Shariff (亚马逊 UI基础架构团队Leader)

翻译:疯狂的技术宅

在过去的几年里,我在亚马逊和雅虎面试过许多前端工程师。在这篇文章中,我想分享一些技巧,帮助大家做好准备。

免责声明:本文的目的并不是为你列出在前端面试中可能会被问到的问题,但是可以将其视为知识储备。

面试是一件很难的事情。作为候选人,通常会给你45分钟的时间来让你展示自己的技能。 作为一名面试官,同样难以在这么短的时间里评估这个人是否适合这项工作。 对于面试来说,没有任何一种标准能够适合所有人,面试官通常会覆盖某一个领域,但除此之外,他们会自行决定应该问哪些问题。

不管你坐在面试桌的哪一侧,这篇文章都会尽可能的涵盖前端开发中那些最重要的领域。

常见的误解

我看到面试者犯的最大错误之一是喜欢准备一些琐碎的问题,例如“什么是盒子模型?”或“告诉我在JavaScript中==和===之间的区别?”等等。知道这些问题的答案固然很好,但它并不能告诉面试官你真正的水平。

相反,你应该为面试做一些非常实际的准备,能够真正体现出自己的JavaScript,CSS和HTML编码水平。为面试的准备包括去实现UI,构建窗口小部件或实现诸如Lodash和Underscore.js库中常见的功能,例如:

  • 构建常见Web应用程序的布局和交互,例如Netflix浏览器站点。

  • 实现小工具,如日期选择器,轮播或电子商务购物车。

  • 编写类似debounce或深度克隆对象的函数。

说到库,常见的另一个错误是人们喜欢完全依赖最新的框架来解决面试问题。你可能会想:既然在开发中我可以使用jQuery,React,Angular等,为什么还要重新发明轮子,为什么不能在面试中使用它?这个问题很好,技术、框架和库总会随着时间的推移而发生变化 —— 我更感兴趣的是:你需要了解前端开发的基本原理,而不是依赖更高级别的抽象。如果你不能在不依赖这些库的情况下回答的面试问题,我希望你至少可以彻底解释和推测库在背后都做了什么。

总的来说,你应该期望大部分的面试都是非常实际的。

JavaScript

你需要了解JavaScript,而且是深入了解。在面试中,越高级别的人对语言知识深度的期望也越高。 至少,以下是你应该熟悉的JavaScript内容:

  • 执行上下文、尤其是词法作用域和闭包。

  • 提升机制、函数与块作用域、以及函数表达式和声明。

  • 绑定 - 特别是调用、bind、apply 和this关键字。

  • 对象原型,构造函数和mixins。

  • 组合函数和高阶函数。

  • 时间委托和冒泡。

  • typeof,instanceof和Object.prototype.toString。

  • 使用回调,promises,await和async处理异步调用。

  • 何时使用函数声明和表达式。

DOM

如何遍历和操作DOM很重要,如果他们依赖jQuery或者编写了很多React和Angular类型的应用,那么这就是大多数面试者应该努力的地方。你可能不会每天都做这些,因为我们大多数人都使用抽象排序。但是如果不依赖第三方库,你应该知道该如何进行以下操作:

  • 使用document.querySelector和旧版浏览器中的document.getElementsByTagName选择或查找节点。

  • 上下遍历: Node.parentNode,Node.firstChild,Node.lastChild和Node.childNodes。

  • 左右遍历: Node.previousSibling和Node.nextSibling。

  • 操作:在DOM树中添加,删除,复制和创建节点。 你应该了解如何修改节点的文本内容,以及切换,删除或添加CSS类名等操作。

  • 性能:当你有很多节点时,操作DOM的代价可能会很高,所以你至少应该知道文档片段和节点缓存。

CSS

至少,你应该知道如何在页面上布局元素,如何使用子元素或直接用后代选择器来定位元素,以及何时使用classes与id。

  • 布局:坐在彼此相邻的元素以及如何将元素放在两列与三列中。

  • 响应式设计:根据浏览器宽度更改元素的尺寸。

  • 自适应设计:根据特定断点更改元素的尺寸。

  • 特异性:如何计算选择器的特异性以及级联怎样影响属性。

  • 使用恰当的命名空间和类名。

HTML

知道哪些HTML标签能最好的表现你正在显示的内容以及相关属性,应该掌握手写HTML的技能。

  • 语义标记。

  • 标记属性,例如disabled, async, defer以及何时使用data-*。

  • 知道如何声明你的doctype(很多人因为不是每天都写新页面,从而忘记了这一点),以及可以使用哪些meta标签。

  • 可访问性问题,例如:确保输入复选框具有更大的响应区域(使用标签“for”)。 另外还有role =“button”,role =“presentation”等。

系统设计

针对后端系统设计的面试通常会涉及MapReduce、设计分布式键值存储或需要CAP定理等知识。 尽管你的前端工作不需要深入了解此类系统是如何设计的,但是在被要求设计常见应用程序的前端架构时,千万不要感到惊讶。通常这些问题会问的含糊,比如“设计像Pinterest这样的网站”或“告诉我如何构建购物结账服务?”。 以下是需要考虑的领域:

  • 渲染: 客户端渲染(CSR),服务器端渲染(SSR)和通用渲染。

  • 布局: 如果你正在设计多个开发团队使用的系统,则需要考虑构建组件,以及是否需要团队遵循一致的规范来使用这些组件。

  • 状态管理:例如在单向数据流或双向数据绑定之间进行选择。你还应该考虑自己的设计是否遵循被动或响应式编程模型,以及组件应该如何相互关联。

  • 异步流: 你的组件可能需要与服务器实时通信。你的设计应考虑XHR与双向调用。如果面试官要求你支持旧版浏览器,那么你的设计需要在隐藏的iFrame,脚本标签或XHR之间进行选择以进行消息传递。如果没有,你可以建议使用websockets,或者你可能决定服务器发送事件(SSE)更好。

  • 关注点分离: MVC、MVVM和MVP模式。

  • 多设备支持: 你的设计是否会针对Web、移动Web和混合应用使用相同的实现,或是单独实现?如果你正在开发类似于Pinterest这样的站点,可能会考虑在Web上使用三列,但在移动设备上只考虑一列,那么你的设计该如何处理这个问题?

  • 交付: 在大型应用程序中,让独立团队拥有自己的代码库并不罕见。这些不同的代码库可能彼此依赖,每个代码库通常都有自己的管道来释放对生产环境的更改。你的设计应考虑如何使用依赖关系(代码拆分)、测试(单元和集成测试)和部署来构建这些资源。你还应该考虑如何通过CDN分发资源或内联它们以减少网络延迟。

网络表现

除了通用编程技术之外,你应该期望面试官查看你的代码或设计及其对性能的影响。 在以前将CSS放在页面的顶部,并在底部放置JS脚本的做法就足够了,但是Web正在快速发展,你应该熟悉这个领域的复杂性。

  • 关键渲染路径。

  • Service workers。

  • 图像优化。

  • 延迟加载和捆绑拆分。

  • HTTP/2和服务器推送的一般含义。

  • 何时预取和预加载资源。

  • 减少浏览器重排以及何时将元素渲染交给GPU。

  • 浏览器布局,合成和绘制之间的差异。

数据结构和算法

这点可能具有争议,但是不了解高时间复杂度和常见运行时(如O(N)和O(N Log N)的基本知识会对你造成困扰。理解内存管理等方面的知识对当前十分常见的单页应用非常有帮助。 例如:如果你要实现一个拼写检查功能,那么了解常见的数据结构和算法将使你的工作变得更加轻松。

我不是说你需要一个CS学位,但是这个行业已经不再是写一个简单的页面了。 网上有很多资源,你可以很快掌握这些基础知识。

常用Web知识

你需要掌握构成Web的技术和范例。

  • HTTP请求: GET和POST以及相关标头,如Cache-Control,ETag,Status Codes和Transfer-Encoding。

  • REST与RPC。

  • 安全性:何时使用JSONP,CORs和iFrame策略。

总结

作为Web开发人员或工程师,需要大量的知识。 不要拘泥于所需的知识深度,而要保持开放的心态,学习开发所需的所有复杂技术。

除了本文涉及的技术主题外,在面试中你还需要谈谈自己过去的项目,描述有趣的纠结点以及所做的权衡。

我知道前端面试中还有很多方面被我忽略了,所以我很想听听你的经历,或者你认为自己在面试时被问到,但是被我忽略的那些重要内容。

原文最早发布于京程一灯公众号:jingchengyideng

关注公众号 jingchengyideng ,回复“6”,获取本文所讲到的知识体系大图。查看自己离年薪40万还差哪些技能点。