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

原文： http://davidshariff.com/blog/...
做者： David Shariff
翻译：疯狂的技术宅

---

本文首发微信公众号：jingchengyideng
欢迎关注，天天都给你推送新鲜的前端技术文章

---

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

免责声明： 本文的目的并非为你列出在前端面试中可能会被问到的问题，可是能够将其视为知识储备。

面试很难，做为候选人，一般会给你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 ，回复“体系”，查看本文所讲到的知识体系大图

---

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章