共计 3498 个字符，预计需要花费 9 分钟才能阅读完成。
原文：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，回复“体系”，查看本文所讲到的知识体系大图