出处 | 前端之巅
在过去的几年里，我在亚马逊和雅虎口试过很多专注于前端开拓的 Web 开拓者和软件工程师，在这篇文章中，我想分享一些口试技巧，帮助候选人为口试做好准备。
免责声明——本文并非旨在列出在前端口试中可能会被问到的所有问题，但可以将其视为知识的基线。
通过口试不是件随意马虎的事，作为候选人，常日须要在 45 分钟的韶光内展示自己能做些什么。作为一名口试官，同样难以在这么短的韶光内评估候选人是否适宜。对付口试来说，并不存在一刀切的方法，口试官问的问题常日会有一个范围，但除此之外，他们可以自行决定要问哪些其他问题。
作为曾经的候选人和口试官，我试图在这篇文章中涵盖你可能会在口试中被问到的最主要的前端开拓知识。
常见的误解我见过候选人犯的最大缺点之一便是准备了一些噜苏的问题，例如“什么是盒子模型”或者“JavaScript 中的 == 和 === 之间的差异是什么”。知道这些问题的答案固然是好，但这并不会见告口试官来太多有用的信息。
相反，在实际的口试中，你可能须要利用 JavaScript、CSS 和 HTML 来编写代码。在你的口试期间，你可能须要实现 UI、构建窗口小部件或利用 Lodash 和 Underscore.js 这样的库编写常用的实用程序函数。例如：
构建常见的 Web 运用程序的布局和交互，例如类似 Netflix 网站那样的。实现小部件，如日期选择器、轮播或电子商务网站购物车。写一个类似 debounce 或深度 clone 工具的函数。说到库，我看到候选人常常犯的另一个缺点是他们须要完备依赖最新的框架来办理口试问题。你可能会想，如果我可以在生产环境中利用 jQuery、React、Angular 等，那为什么就不能在口试中利用它们呢？技能、框架和库会随着韶光的推移而发生变革——我更感兴趣的是你是否理解前端开拓的底层事理，而不是依赖更高层次的抽象。如果你不能在没有它们的情形下回答口试问题，我希望你至少可以彻底阐明和推测这些库背后的事理。
总的来说，大部分的口试都涉及实际的编码。
JavaScript你须要理解 JavaScript，而且是彻底地理解。你口试的职位越高，对措辞知识的哀求就越高。以下是你该当熟习的 JavaScript 知识点：
实行高下文，尤其是词法浸染域和闭包；提升、函数和块浸染域，以及函数表达式和声明；绑定——特殊是 call、bind、apply 和 this；工具原型、布局函数和 mixin；组合和高阶函数；事宜委托和冒泡；利用 typeof、instanceof 和 Object.prototype.toString 进行类型转换；利用回调、promise、await 和 async 处理异步调用；什么时候可以利用函数声明和表达式。DOM知道如何遍历和操作 DOM 非常主要，对付重度依赖 jQuery 或者开拓了很多 React & Angular 类型运用程序的候选人来说，他们可能会在这个问题上栽跟斗。你可能不会每天都直接打仗 DOM，由于我们大多数人都在利用各种抽象。在不该用第三方库的情形下，你须要知道如何实行以下这些操作：
利用 document.querySelector 选择或查找节点，在旧版浏览器中利用 document.getElementsByTagName；高下遍历——Node.parentNode、Node.firstChild、Node.lastChild 和 Node.childNodes；旁边遍历——Node.previousSibling 和 Node.nextSibling；操作——在 DOM 树中添加、删除、复制和创建节点。你该当理解如何修正节点的文本内容以及切换、删除或添加 CSS 类名等操作；性能——当有很多节点时，修正 DOM 的本钱会很高，你至少该当知道如何利用文档片段和节点缓存。CSS至少，你该当知道如何在页面上布局元素，如何利用子元素或直接后代选择器来定位元素，以及什么时候该用类、什么时候该用 ID。
布局——安排彼此相邻的元素的位置，以及如何将元素支配成两列或三列；相应式设计——根据浏览器宽度大小变动元素的尺寸；自适应设计——根据特定断点变动元素的尺寸；特异性——如何打算选择器的特异性，以及级联如何影响属性；适当的命名空间和类命名。HTML知道哪些 HTML 标签最能代表你正在显示的内容以及干系属性，该当节制手工知识。
语义标记；标记属性，例如 disabled、async、defer 以及何时利用 data-；知道如何声明 doctype（大多数人不是每天都会写新页面，以是可能会忘了这个）以及可以利用哪些元标签；可访问性问题，例如，确保输入复选框具有更大的相应区域（利用标签“for”）。其余还有 role=“button”、role=“presentation”，等等。系统设计在系统设计方面，常日涉及 MapReduce、分布式键值存储系统或 CAP 定理等知识。虽然前端工程师日常不须要深入理解如何设计这类系统，但在被哀求设计出常见运用程序的前端架构时，你也不应该感到惊异。这些问题常日暗昧不清，比如“设计一个像 Pinterest 这样的网站”或者“如何构建购物结账做事？”。以下是须要考虑的知识点：
渲染——客户端渲染（CSR）、做事器端渲染（SSR）和全局渲染；布局——如果你正在设计被多个开拓团队利用的系统，须要考虑进行组件化，以及是否须要开拓团队通过指定标记来利用组件；状态管理，例如在单向数据流或双向数据绑定之间做出选择。你还该当考虑你的设计是采取被动式还是反应式编程模型，以及组件如何相互关联，例如是 Foo->Bar 还是 Foo->Bar；异步——你的组件可能须要与做事器进行实时的通信。在设计时须要考虑利用 XHR 或双向调用。如果你的口试官哀求你支持旧浏览器，那么你须要在隐蔽 iFrame、script 标签或 XHR 之间做出选择。如果没有，你可以建议利用 websocket，或者利用做事器发送事宜（SSE），这样会更好；关注点分离——Model-View-Controller（MVC）、Model-View-ViewModel（MVVM）和 Model-View-Presenter（MVP）模式；多设备支持——你的实现是否同时支持 Web、移动 Web 和稠浊运用程序，还是为每一种场景供应单独的实现？如果你正在构建像 Pinterest 这样的网站，你可能会考虑在 Web 上利用三列，但在移动设备上只利用一列，你的设计将如何处理这个问题；资产文件交付——在大型运用程序中，独立团队拥有自己的代码库是常有的事。这些不同的代码库可能彼此依赖，每个代码库常日都有自己的管道来发布代码变更。你的设计须要考虑如何基于依赖项进行资产文件的构建（代码拆分）、测试（单元测试和集成测试）和支配。你还须要考虑如何通过 CDN 交付资产文件或者内联它们来减少网络延迟。Web 性能除了通用编程最佳实践之外，你该当期望访问者查看你的代码或设计及其性能影响。它曾经足以将 CSS 置于文档的顶部，而 JS 脚本位于页面底部，但 Web 正在快速移动，你该当熟习这个领域的繁芜性。
关键渲染路径；Service Worker；图像优化；延迟加载和捆绑拆分；HTTP/2 和做事器推送的一样平常含义；何时预取和预加载资源；减少浏览器回流以及何时将元素提升到 GPU；浏览器布局、组合和绘制之间的差异。数据构造和算法这个可能有点争议，但对 Big-O 韶光繁芜性和常见运行韶光（如 O(N) 和 O(N Log N)）有一个基本的理解对你来说不会是坏事。单页运用程序现在非常常见，以是理解内存管理等方面的知识是有帮助的。例如，如果你被哀求构建客户端拼写检讨程序，那么理解常见的数据构造和算法将会让你的任务变得轻松许多。
我不是说你一定须要念一个打算机学位，但这个行业已经从构建大略的网页转移到了打算机科学。网上有很多资源可以让那个你快速节制根本知识。
一样平常的 Web 知识你须要节制一些构成 Web 的技能和范式。
HTTP 要求——GET 和 POST 以及干系标头，如 Cache-Control、ETag、Status Codes 和 Transfer-Encoding；REST 与 RPC；安全性——何时利用 JSONP、COR 和 iFrame。总结对 Web 开拓职员或工程师来说，构建 Web 运用程序须要节制大量的知识。不要被知识的深度所限定，而是要保持开放的心态去学习所有繁芜的部分。
除了这里涉及的技能主题之外，你还须要谈论过去参与的项目，描述发生了哪些有趣的事情以及做出了哪些权衡。