2022-11-19 13:01:25

docs/fe-inter-hb/00.md

+# 前端面试手册
+
+来源:[https://www.frontendinterviewhandbook.com](https://www.frontendinterviewhandbook.com)
\ No newline at end of file

docs/fe-inter-hb/01.md

+# 介绍
+
+> 原文:[https://www.frontendinterviewhandbook.com/introduction/](https://www.frontendinterviewhandbook.com/introduction/)
+
+<header>
+
+## 这是什么？[](#what-is-this "Direct link to heading")
+
+与典型的软件工程师工作面试不同，前端面试不太强调算法，更多的问题是关于前端领域的复杂知识和专业知识——HTML，CSS，JavaScript，等等。
+
+许多前端面试高度关注领域知识，并将它们应用到现实世界的场景中。你可能会发现，当你面试一个前端职位的时候，光是埋头苦读并不足够，但这是一件好事！前端面试倾向于测试更实用的概念，并与真实世界前端开发相关。但这并不意味着你不需要熟悉基本的数据结构和算法概念——只是不太强调它们，可能你会得到更简单的算法问题。
+
+虽然有一些现有的资源可以帮助前端开发人员准备面试，但它们不像软件工程师面试的材料那样丰富。在现有的资源中，最有帮助的题库可能是[前端开发人员面试问题](https://github.com/h5bp/Front-end-Developer-Interview-Questions)。不幸的是，这些问题在网上没有太多完整和令人满意的答案。这本手册回答了这些琐事式的问题，以及其他前端面试形式的信息和指导。
+
+然而，我最近使用并评论了 [Great Front End](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=introduction&fpr=frontendinterviewhandbook) ，一个自称为“前端面试 LeetCode”的平台。它包含由前 FAANG 高级工程师编写的前端面试问题和答案，并有各种格式的问题和答案:编码和琐事风格的前端问题。我发现它非常有用，我强烈推荐你去看看！
+
+## 前端面试的一般技巧[](#general-tips-for-front-end-interviews "Direct link to heading")
+
+不管给你的是哪种形式，有一件事是真的——你需要在你的前端基础上非常强大，并不断向你的面试官展示你对它们的掌握。
+
+非常熟悉以下概念:
+
+*   CSS:特异性，盒子模型，布局，定位
+*   JavaScript: `this`关键字、原型、闭包、异步代码、承诺、定时器(`setTimeout`、`setInterval`)
+*   JavaScript 设计模式:观察者模式、模块模式
+*   HTML:事件委托(几乎在每个面试中都很有用)、DOM 遍历、DOM 操作、表单验证和提交
+*   至少是普通的 JS 或 jQuery。并不是所有的面试都允许你使用 React，因为他们希望看到对基础知识的掌握
+
+在 Glassdoor 上寻找公司的面试问题。前端问题并不丰富，但仍然可以找到一些。很多公司都用类似的问题。
+
+## 前端面试格式[](#front-end-interview-formats "Direct link to heading")
+
+与软件工程面试不同，前端面试的形式不太为人所知，在整个行业中也没有标准化。我们努力在网上搜索热门公司提出的前端面试问题，有些问题经常出现。一般来说，您应该熟悉以下问题和格式:
+
+### 琐事问题[](#trivia-questions "Direct link to heading")
+
+测试你的知识并有清晰的非主观答案的简短问题。招聘人员通常会问这些问题，因为即使是非技术人员也可以验证答案的准确性。以下是一些例子:
+
+*   Java Script 语言
+    *   什么是终结？
+    *   承诺和回拨有什么区别？
+    *   解释 JavaScript 中的`this`关键字。
+*   半铸钢ˌ钢性铸铁(Cast Semi-Steel)
+    *   CSS 盒子模型是什么？
+    *   各种 CSS `position`属性及其差异。
+
+[**阅读更多关于前端琐事提问→**](/trivia/)
+
+### JavaScript 编码[](#javascript-coding "Direct link to heading")
+
+这是 LeetCode 风格的算法题的前端版本。在 JavaScript 中实现一个函数，可以是 Lodash/下划线中的实用函数(如`throttle`)，也可以是 JavaScript 语言/DOM API 的 polyfill(如`Array.prototype.filter`、`Promise.all`、`document.getElementsByClassName()`)。
+
+*   实现`Array.prototype`功能:`map`、`reduce`、`filter`、`sort`。
+*   实现 DOM API:`getElementsByClassName`。
+*   `debounce` / `throttle`。
+*   实现承诺/承诺相关 API:`Promise`，`Promise.all`。
+
+### 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+使用 HTML、CSS 和 JavaScript 构建用户界面(可以是 UI 组件、应用程序或游戏)。
+
+*   成分
+    *   自动完成(**非常流行**)
+    *   图片库
+    *   图像传送带
+    *   工具提示组件
+    *   星级小工具
+*   应用程序
+    *   构建井字游戏
+    *   用可移动的棋子搭建棋盘
+
+[**了解更多前端编码问题→**](/coding/algorithms/)
+
+### 算法编码[](#algorithm-coding "Direct link to heading")
+
+LeetCode 风格的算法编码问题，评估你的核心数据结构和算法技能。你可以被问到任何关于 LeetCode 的问题，可能会被要求用 JavaScript 解决这些问题。
+
+### 系统设计[](#system-design "Direct link to heading")
+
+描述并讨论你将如何构建一个 UI 组件/应用/游戏及其架构。这是系统设计问题的前端版本。例如，描述您将如何在聊天应用程序中构建表情符号自动完成功能，它将具有哪些 API，该功能有哪些组件，如何确保它具有良好的性能，UX 等。
+
+*   设计一个图像转盘组件。
+*   设计一个电子邮件客户端应用程序。
+
+[**了解更多前端系统设计→**](/front-end-system-design/)
+
+Be interview-ready with Great Front End
+
+[大前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)有各种前端面试问题的问答，[学习计划](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook)，还有[庞大的题库](https://www.greatfrontend.com/questions/coding?fpr=frontendinterviewhandbook)！
+
+## 公司面试格式[](#company-interview-formats "Direct link to heading")
+
+通过广泛的研究，以下是公司在前端面试的技术回合中询问的不同类型的格式。如果你在面试某些公司的前端工程职位，做好相应的准备！
+
+*图注:✅:问过，❌:没问过，⚠️:没有数据*
+
+| 公司 | 琐事 | 算法 | JavaScript 编码 | UI 编码 | 系统设计 |
+| :-- | :-: | :-: | :-: | :-: | :-: |
+| [**Airbnb**](/companies/airbnb-front-end-interview-questions/) | -好的 | 981 号房 | 981 号房 | 981 号房 | -好的 |
+| [**亚马逊**](/companies/amazon-front-end-interview-questions/) | 981 号房 | 981 号房 | 981 号房 | 981 号房 | 981 号房 |
+| [**苹果**T3】](/companies/apple-front-end-interview-questions/) | ⚠️ | ⚠️ | 981 号房 | 981 号房 | ⚠️ |
+| [**【字节舞/tik Tok】**](/companies/bytedance-tiktok-front-end-interview-questions/) | 981 号房 | 981 号房 | 981 号房 | 981 号房 | -好的 |
+| [**收纳箱**](/companies/dropbox-front-end-interview-questions/) | -好的 | ⚠️ | 981 号房 | 981 号房 | 981 号房 |
+| Facebook/Meta | 981 号房 | -好的 | 981 号房 | -好的 | 981 号房 |
+| Flipkart | ⚠️ | 981 号房 | ⚠️ | ⚠️ | ⚠️ |
+| [**谷歌**](/companies/google-front-end-interview-questions/) | 981 号房 | 981 号房 | 981 号房 | 981 号房 | 981 号房 |
+| [**领英**T3】](/companies/linkedin-front-end-interview-questions/) | 981 号房 | ⚠️ | 981 号房 | 981 号房 | ⚠️ |
+| [升升](/companies/lyft-front-end-interview-questions/) | -好的 | -好的 | 981 号房 | 981 号房 | ⚠️ |
+| [**微软**T3】](/companies/microsoft-front-end-interview-questions/) | 981 号房 | 981 号房 | 981 号房 | 981 号房 | ⚠️ |
+| [**sales force**T3】](/companies/salesforce-front-end-interview-questions/) | 981 号房 | ⚠️ | ⚠️ | ⚠️ | ⚠️ |
+| [**推特**](/companies/twitter-front-end-interview-questions/) | 981 号房 | ⚠️ | 981 号房 | 981 号房 | ⚠️ |
+| [**优步**](/companies/uber-front-end-interview-questions/) | ⚠️ | ⚠️ | 981 号房 | 981 号房 | ⚠️ |
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/02.md

+# "琐碎问题
\ No newline at end of file

docs/fe-inter-hb/03.md

+# 编码回合
+
+原文：[https://www.frontendinterviewhandbook.com/coding/](https://www.frontendinterviewhandbook.com/coding/)
\ No newline at end of file

docs/fe-inter-hb/04.md

+# 前端面试中的 JavaScript 实用函数编码
+
+> 原文:[https://www . frontendinterviewhandbook . com/coding/JavaScript-utility-function/](https://www.frontendinterviewhandbook.com/coding/javascript-utility-function/)
+
+<header>
+
+这些是 LeetCode 问题的前端版本，但不太强调复杂的算法，更专注于实际用例。然而，它们也可能是简单的 LeetCode 问题，但是需要用 JavaScript 来回答。
+
+几乎所有现有的实用函数都存在于 JavaScript 语言或著名的第三方库中，如 Lodash/下划线，其中最著名的是`debounce`和`throttle`。然而，Lodash 的实现是极度过度工程化的——重用了许多抽象函数，并支持旧浏览器的怪异和晦涩的用例，你不应该在采访中产生这样的复杂程度。
+
+## 基本示例[](#basic-examples "Direct link to heading")
+
+*   实现`Array.prototype`功能:`map`、`reduce`、`filter`、`sort`
+*   实现承诺/承诺相关 API:`Promise`，`Promise.all`
+*   实现 Lodash 功能:`debounce()`、`throttle()`、`cloneDeep()`、`groupBy()`
+*   洛达什的`chunk()` / `map()`，接着是`mapAsync` ( `Promise.all`)，然后是`mapWithChunksAsync`
+*   将对象中的所有键转换为 snake_case/camelCase
+*   `document.querySelectorAll`(仅限于标签选择器)
+*   [观察者模式](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript)
+
+最好的准备方式是亲自动手实现它们，并为它们编写测试用例。
+
+虽然这类问题的焦点不在算法上，但也要注意数据结构的选择和时间复杂度。如果在哈希映射的帮助下可以很容易地用 O(n)编写一个函数，那么就不要编写一个在 O(n <sup>2</sup> 中运行的函数。
+
+候选人预计会花大约 10-15 分钟来回答一个基本问题。如果你知道你收到了一个基本问题，试着在建议的时间内完成，不要故意花整个面试时间来做一个问题。在大多数情况下，你需要回答另一个编码问题。
+
+## 进阶范例[](#advanced-examples "Direct link to heading")
+
+高级问题通常是给更高级的候选人，预计大约 25-30 分钟完成或达成一个最低限度的工作解决方案。
+
+*   编写一个模板引擎，执行变量替换和简单的条件。
+*   执行`JSON.stringify()`。
+*   从 HTML 页面生成目录/大纲(类似于 Google Docs 自动生成的大纲)。
+
+Practice questions on Great Front End
+
+不确定如何开始？[大前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)有前端面试[学习计划](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook)和一个[编码题的庞大题库](https://www.greatfrontend.com/questions/coding?fpr=frontendinterviewhandbook)。今天就开始练习吧！
+
+## 提示[](#tips "Direct link to heading")
+
+*   始终努力编写纯函数，也就是不依赖于函数外部状态并且不会产生副作用的函数。
+*   如果你正在写一个递归函数，问问是否有最大堆栈深度限制。
+*   一些嵌套的数据结构可以递归引用自身。一定要澄清对象中没有自我参照/循环/询问你是否需要处理它们(通常答案是“没有”)。
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/05.md

+# 前端访谈中的用户界面编码
+
+> 原文:[https://www . frontendinterviewhandbook . com/coding/build-front-end-user-interfaces/](https://www.frontendinterviewhandbook.com/coding/build-front-end-user-interfaces/)
+
+<header>
+
+许多前端工程师花费大量时间构建 UI，构建 UI 组件是评估某人对前端三个最大方面(HTML、JavaScript、CSS)熟悉程度的好方法。
+
+问这种问题的公司通常会要求应聘者用以下三种方式之一进行编码:
+
+*   带预览功能的在线编辑器:你可以在浏览器中编写 HTML、CSS、JavaScript，并看到页面的即时预览。常用的平台有 [CodePen](https://codepen.io) 和 [CodeSandbox](https://codesandbox.io/dashboard) ，
+*   没有预览的在线编辑器:与上面类似，但是你看不到页面的任何视觉输出。一个常见的平台是 [CoderPad](https://coderpad.io/) 。过去，谷歌使用谷歌文档😱。
+*   BYOE(自带环境):考生自带开发环境/笔记本电脑，可以自由选择是使用自己的编辑器进行本地开发，还是使用 CodePen 或 CodeSandbox 等在线环境。这是对候选人有利的最理想的情况，但通常只在现场进行。您通常可以使用 JavaScript 框架/库，在这种情况下，建议您使用工具来帮助您搭建一个全新的应用程序，您可以立即开始编码(例如`create-react-app`、`vue-cli`)。你不想在面试中花时间做不必要的准备工作，因为这不会给你的面试官额外的有用信号。
+*   白板:考生要把所有需要的 HTML，JS，CSS 都写在白板上。没有预览，没有自动完成，没有在线文档来帮助你；你完全靠自己了。到目前为止，脸书和谷歌是仅有的两家让候选人在前端面试中写在白板上的公司。
+
+## 例题[](#examples "Direct link to heading")
+
+*   成分
+    *   制表符
+    *   手风琴
+    *   图片库
+    *   其他可能的组件- [参考 Bootstrap 列表](https://getbootstrap.com/docs/4.0/components/)
+*   应用程序
+    *   可排序的数据表(带有过滤扩展)
+    *   所有列表
+    *   看板
+*   比赛
+    *   Tic-tac-toe
+    *   打地鼠
+    *   沃尔多
+    *   俄罗斯方块(高级)
+    *   蛇(高级)
+
+Practice questions on Great Front End
+
+不确定如何开始？[大前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)有前端面试[学习计划](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook)和一个[编码题的庞大题库](https://www.greatfrontend.com/questions/coding?fpr=frontendinterviewhandbook)。今天就开始练习吧！
+
+## 注意事项[](#considerations "Direct link to heading")
+
+完成问题后(甚至开始前)，思考这些潜在的问题(如果相关的话)。你可能需要也可能不需要处理它们，所以你可以在开始之前和面试官澄清一下，这样你就不会写太多/太少的代码。
+
+### 前端最佳实践[](#front-end-best-practices "Direct link to heading")
+
+*   避免编写全局变量。将你的代码包装在一个[生命](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)中，不要污染全局范围。
+*   如果您需要在页面上有该组件的多个实例，该怎么办？
+    *   您的代码能让您做到这一点吗？
+    *   你是否使用了任何全局变量使你很难做到这一点？
+    *   在同一个页面上有多个组件会互相影响吗？他们应该是独立的！
+*   你有一个方便的 API 来实例化带有可配置选项的独立组件吗？在 React 出现之前，老派的 jQuery UI 组件就是很好的例子。
+
+### 性能和可扩展性[](#performance-and-scalability "Direct link to heading")
+
+您的组件是否可扩展(延迟、性能、UI、UX 等)？
+
+*   网络退东西时间太长怎么办？网速慢怎么测试？提示:Chrome Devtools 网络标签。
+*   字符串太长怎么办？提示:CSS `word-break`属性。
+*   图像太大怎么办？
+*   组件可以包含任意数量的子项吗？示例:支持照片库组件中灵活数量的缩略图或选项卡导航组件中的项目。
+*   如果这些项目太少或太多，布局会变得混乱吗？
+    *   物品太多怎么办？提示:设置最大高度或分页。
+    *   如果没有项目，你会显示什么？提示:显示一个空状态，表示没有内容。不要显示任何内容。
+*   如果页面上的元素太多，性能会受到什么影响？你是怎么解决的？提示:[虚拟列表](https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209)
+*   您是否硬编码了任何值，使得将来很难扩展到不断变化的需求？你设计了可扩展性吗？
+
+### 网络请求[](#network-requests "Direct link to heading")
+
+*   组件是否处理网络/异步请求中的竞争条件？例如，在返回对先前请求的响应之前，启动新的网络请求。
+*   如果请求超时或出错怎么办？如何优雅地从中恢复？
+*   如何提高组件的性能？你能利用缓存、延迟加载、预取/预加载吗？
+*   如果需要加载大量数据/图像怎么办？你能延迟加载它们吗？您能批量获取数据以减少 API 端点的垃圾邮件吗？
+
+### 用户体验[](#user-experience "Direct link to heading")
+
+*   该组件是移动友好的吗？该组件能适应不同的屏幕宽度吗？如何让它变得对移动设备友好？
+*   该组件容易安装吗？如何改变设计来迎合 i18n？你的组件支持 RTL 语言吗？
+*   您的组件是否存在任何潜在的 UX/可访问性(a11y)问题？
+*   有哪些常见的可访问性技术和陷阱？
+    *   [https://medium . com/@ addyosmani/accessible-ui-components-for-the-web-39e 727101 a67](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
+*   您可以使用哪些工具来检查可访问性？
+*   如果你不熟悉 a11y，你可能没有太多时间成为 a11y 的专家。你至少可以承认 a11y 中的知识缺口，并尝试将 a11y 纳入你的答案中。你至少应该了解基本的 a11y 实践，如文本大小、颜色对比、可聚焦元素、标签聚焦顺序等。a11y 知识是初级工程师和高级工程师之间的区别因素之一。
+
+### 安全[](#security "Direct link to heading")
+
+*   XSS 的弱点。每当你需要呈现用户输入时，面试官都会特别留意这一点。你几乎不需要使用`.innerHTML`或者 jQuery 的`$.html()`。有`.textContent`和`$.text()`。如果您必须呈现原始 HTML，请确保首先对内容进行转义。
+*   显示在 URL 中的用户输入也必须首先进行编码，否则也有可能造成损害。
+
+### 未来[](#future "Direct link to heading")
+
+最后，提到如果你有更多的时间，并且正在编写你需要维护的产品代码，你会如何做不同的事情。也许使用 Sass 而不是 CSS，使用 React 而不是 jQuery 以获得更好的可维护性，使用 Babel 为旧浏览器编译代码，使组件移动友好并在不同的屏幕宽度上测试，添加键盘快捷键，等等。
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/06.md

+# 前端面试中的编码算法
+
+> 原文:[https://www . frontendinterviewhandbook . com/coding/algorithms/](https://www.frontendinterviewhandbook.com/coding/algorithms/)
+
+<header>
+
+前端工程师毕竟也是软件工程师，前端工程师应该具备算法和数据结构方面的基本能力。在你的前端面试中，你将被要求解决算法问题，这是可能的，也是合理的，而且最有可能的是，你将被期望使用 JavaScript。
+
+树是前端开发中经常遇到的数据结构，因为 DOM 是一棵树，所以如果你必须区分优先级，一定要专注于擅长树数据结构和树的通用算法，比如广度优先搜索和深度优先搜索。
+
+《技术面试手册》详细介绍了如何准备算法问题。
+
+[Go to Tech Interview Handbook  →](https://www.techinterviewhandbook.org/algorithms/study-cheatsheet/)
+
+## 算法课程[](#algorithm-courses "Direct link to heading")
+
+### [AlgoMonster](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)[T3】](#algomonster "Direct link to heading")
+
+AlgoMonster 旨在帮助你在最短的时间内通过技术面试。由谷歌工程师开发的 AlgoMonster 使用数据驱动的方法来教你最有用的关键问题模式，并有内容帮助你快速修改基本的数据结构和算法。最重要的是，AlgoMonster 不是基于订阅的——支付一次性费用，就可以获得**终身访问**。 [**检查一下→**](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
+
+### [寻找编码面试:编码问题的模式](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)[](#grokking-the-coding-interview-patterns-for-coding-questions "Direct link to heading")
+
+这个由设计大师设计的课程扩展了推荐练习题中的问题，但是从问题模式的角度来进行练习，这是一个我也同意的学习方法，我个人也使用这个方法来更好地编写面试代码。本课程允许你用 Java、Python、C++、JavaScript 来练习选定的问题，并提供这些语言的示例解决方案。**学习和理解模式，而不是背答案！** [**结账→**](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
+
+## JavaScript 课程[](#javascript-courses "Direct link to heading")
+
+如果你想练习更多针对 JavaScript 的结构化算法，可以看看下面的课程。
+
+| 课程 | 复习 | 持续时间 | 价格 | 内容 |
+| :-- | --- | --- | --- | --- |
+| [掌握编码面试:数据结构+算法](https://fxo.co/DQpY) | 4.6/5 | 19.5 小时 | $ | 基本数据结构和算法，工作申请，行为面试，谈判 |
+| [JavaScript 数据结构和算法大师班](https://fxo.co/DQpZ) | 4.5/5 | 45 小时 | $ | 基本和高级数据结构和算法 |
+| [Ace JavaScript 编码面试](https://www.educative.io/path/ace-javascript-coding-interview?aff=x23W) | - | 87h | $ | 基本数据结构和算法、系统设计、面向对象设计 |
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/07.md

+# 系统设计面试
\ No newline at end of file

docs/fe-inter-hb/08.md

+# 前端系统设计面试概述
+
+> 原文:[https://www . frontendinterviewhandbook . com/front-end-system-design/](https://www.frontendinterviewhandbook.com/front-end-system-design/)
+
+<header>
+
+前端系统设计资源少得惊人，可能是因为前端工程师候选人的需求和供应都较低。
+
+这里的“系统”通常是指前端系统，它与软件工程面试中典型的分布式系统设计问题有很大的不同。所提的问题可能与[“构建用户界面”格式](/coding/build-front-end-user-interfaces/)中的问题非常相似，但更侧重于架构和设计。它们之间有大量的重叠——当你构建 UI 时，你可能需要做一些设计(数据模型，API ),还需要做一些编码来说明你的想法/应用状态格式。
+
+本节与[“构建用户界面”格式](/coding/build-front-end-user-interfaces/)的区别在于，这里的问题通常更大。如果会议只有半个小时，候选人应该谈论设计权衡，可能的实现，而不是编码出来。因为系统设计问题通常涉及多个组件和跨 web 堆栈的知识，所以考生通常不必非常深入每个组件的较低级别的细节，并且可以将讨论保持在较高的级别，关于客户端和服务器之间的 API 设计，以及组件之间的 API。
+
+[“构建用户界面”格式](/coding/build-front-end-user-interfaces/)中提到的许多主题也与前端系统设计相关——API 设计、可伸缩性、性能、用户体验、i18n、可访问性、安全性等。候选人应该主动提出这些话题，引导与面试官的讨论。性能、可访问性和 i18n 等更高级的主题是高级候选人与初级候选人的区别。
+
+两种主要的前端系统设计面试是 UI 组件和应用程序。
+
+## 例题[](#examples "Direct link to heading")
+
+*   用户界面组件
+    *   自动完成([阅读前端示例解决方案](https://www.greatfrontend.com/questions/system-design/autocomplete)
+    *   图像转盘([阅读前端示例解决方案](https://www.greatfrontend.com/questions/system-design/image-carousel)
+*   应用程序
+    *   新闻提要([阅读伟大前端](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)上的示例解决方案)
+    *   视频观看网站
+    *   聊天应用程序
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+## RADAD 框架[](#radad-framework "Direct link to heading")
+
+系统设计面试问题往往是开放式的和模糊的，给你留下了很多探索的空间。如果面试官告诉你应该关注哪些具体领域，那就太好了！否则，这里有一个框架，你可以用它来给面试官一个大纲，告诉他你将要涵盖的内容，这在工作中处理新的前端项目时也很有帮助。
+
+这个框架被称为 **RADAD** ，它由每一步的第一个字符组成。你可以把这个结构写在白板/在线编辑器上，这样你就不会忘记。
+
+1.  **<u>R</u> 需求澄清/调整**——询问系统的需求。
+2.  **<u>一个</u>架构**——勾勒出系统的架构(可能是 UI 组件，也可能是 app，取决于问题)。在相关的地方画图表。
+3.  **<u>D</u> ata 模型** -组件如何存储传递给它的任何数据？使用什么数据结构？
+4.  **<u>A</u> PI 设计**——使用这个组件的 API 是什么？组件上允许哪些选项？
+5.  **<u>D</u>eep dive**——用户体验(UX)、性能、可访问性(a11y)、国际化(i18n)、多设备支持、安全性
+
+如何处理应用程序和 UI 组件的系统设计问题可能会有很大的不同，我们将在随后的章节中详细讨论这些问题。
+
+## [](#things-you-would-not-have-to-do-probably "Direct link to heading")你本来不必做的事情(大概)
+
+因为前端系统设计面试侧重于前端，所以您可能不必:
+
+*   设计数据库模式
+*   了解使用哪种数据库(SQL 还是 NoSQL)
+*   扩展您的服务器和数据库(分片、垂直/水平扩展)
+*   谈论可用性、容错、延迟等
+
+阅读更多关于[前端与后端系统设计面试](/blog/front-end-vs-back-end-system-design-interviews/#differences)的不同之处。
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/09.md

+# 前端系统设计面试-用户界面组件
+
+> 原文:[https://www . frontendinterviewhandbook . com/front-end-system-design/ui-components/](https://www.frontendinterviewhandbook.com/front-end-system-design/ui-components/)
+
+<header>
+
+## 例题[](#examples "Direct link to heading")
+
+*   自动完成([阅读前端示例解决方案](https://www.greatfrontend.com/questions/system-design/autocomplete)
+*   图像转盘([阅读前端示例解决方案](https://www.greatfrontend.com/questions/system-design/image-carousel)
+*   通过网络加载选项的选择器
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+## 框架[](#framework "Direct link to heading")
+
+在系统设计面试中，候选人应该引导对话。这里有一个框架，你可以用它来给面试官一个大纲，告诉他你将要涵盖的内容。这个框架被称为 **RADAD** ，它由每一步的第一个字符组成。你可以把这个结构写在白板/在线编辑器上，这样你就不会忘记。
+
+1.  **<u>R</u> 需求澄清/调整**——询问系统的需求。
+2.  **<u>一个</u>架构**——在相关的地方概述组件中子组件的架构。
+3.  **<u>D</u> ata 模型** -组件如何存储传递给它的任何数据？使用什么数据结构？
+4.  **<u>A</u> PI 设计**——使用这个组件的 API 是什么？组件上允许哪些选项？
+5.  **<u>D</u>eep dive**——用户体验(UX)、性能、可访问性(a11y)、国际化(i18n)、多设备支持、安全性
+
+### 需求澄清[](#requirements-clarification "Direct link to heading")
+
+每一次系统设计面谈(即使对于非前端也是如此)都应该从需求收集/澄清关于问题的需求开始，这通常是故意留下的。建议您至少花几分钟时间来阐明这些要求。在明确需求之前，不要开始绘制架构！
+
+幸运的是，组件有定义良好的范围，不会试图做太多的事情。您自己可能已经使用过这样的组件，并且可能知道您需要从这样的组件中得到什么。
+
+一些注意事项:
+
+*   系统应该支持哪些设备？桌面网络、移动网络等
+*   用户访问系统的主要设备是什么？
+*   我们应该支持哪些浏览器？
+*   我们需要支持国际化吗？
+*   我们希望允许多少样式定制？
+
+### 架构[](#architecture "Direct link to heading")
+
+前端面试的架构通常集中在客户端架构，而不是涉及数据库、负载平衡器和服务器的大规模分布式系统。
+
+对于组件，列出其中存在的各种子组件，以及每个组件之间传递的数据。
+
+让我们以图像轮播为例。图像转盘中的子组件包括:
+
+*   主图像-显示焦点照片的图像
+*   缩略图-下面更小的图像(会有缩略图吗？您只有在之前澄清需求时才会知道)
+*   图像存储-显示照片列表的客户端缓存
+
+如果你有一个白板/在线绘图工具，画图表来说明实体和它们之间的关系也会很有帮助。当发生用户交互时，哪个子组件与哪个子组件进行通信。
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+### 数据模型[](#data-model "Direct link to heading")
+
+组件的数据模型将引用组件状态。大多数使用过 React、Angular、Vue、Svelte 等前端 UI 库/框架的前端开发人员应该对状态的概念很熟悉。在所有这些库/框架中，状态是一个常见的概念。
+
+决定将哪些数据放入状态对于做好这一部分至关重要。在决定什么进入组件状态时，需要考虑几个因素:
+
+*   在组件的生命周期中，状态可以随着时间的推移而改变，这通常是用户交互的结果。
+*   每个组件应该保持它自己的独立状态，这允许组件的多个实例共存于一个页面上。组件实例的状态不应该影响另一个实例的状态。
+*   状态中的字段越少，组件越容易推理(读取/理解)。我们应该努力减少所需的国家数量。如果一个组件使用一个可以从另一个状态中派生出来的值，那么这个值很可能不属于这个状态。例如，如果您的组件正在呈现一个项目列表，并且您希望在没有项目要呈现时显示一条消息，那么就不应该有额外的`isEmpty`状态，因为它可以从`items`的长度中派生出来。
+*   如果一个组件有多个子组件，最好是能够将状态合并到顶层，而其余的组件是纯的和无状态的。
+
+### API 设计[](#api-design "Direct link to heading")
+
+组件背后的关键思想是让它们被重用和抽象复杂性。好的组件设计得很好，可以在多种场景中重用，用户在使用它们之前不必知道它们内部是如何工作的。对于组件，API 指的是组件开发人员向其他开发人员公开以指定的配置选项。
+
+*   您允许组件有哪些配置选项？(`props` in React)。什么是合理的违约？
+*   遵循[打开-关闭原则](https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle) -组件应该为扩展而打开，为修改而关闭。
+*   如果你的组件是一个 UI 库的一部分，它不关心外观，把样式留给用户，那么在设计道具时要格外小心，允许用户定制组件的外观和感觉。在 React 中有几种方法可以做到这一点:
+    *   [Composition](https://reactjs.org/docs/composition-vs-inheritance.html) - Props 接受 React 组件，这也促进了代码重用。
+    *   [渲染道具](https://reactjs.org/docs/render-props.html)是组件用来知道渲染什么的功能道具。它还有助于重用行为，而不必担心外观。
+    *   `className`或`style`props——允许用户向内部 DOM 元素注入类名和/或样式属性。这可能会产生负面影响，但仍然是允许用户定制组件外观的常用方法。
+*   可能的配置选项:
+    *   生命周期/事件挂钩- `onClick`、`onChange`、`onBlur`、`onFocus`等。
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+### 深潜[](#deep-dives "Direct link to heading")
+
+在了解了组件的基础知识之后，我们可以深入到组件可能需要特别关注的特定领域。请注意，几乎肯定没有足够的时间来涵盖每个领域，并且不是每个领域都与手边的组件非常相关。
+
+表现出对这些领域的了解并能够深入研究这些领域是高级前端工程师的特征。
+
+#### 用户体验(UX)[](#user-experience-ux "Direct link to heading")
+
+UX 可能不属于工程，但良好的前端工程师有很好的理解 UX 和建设与伟大的 UX 用户界面。有太多的 UX 实践需要注意，但最常见的/容易实现的是:
+
+*   向用户反映组件的状态——如果有未决的后台请求，显示一个微调器。如果有错误，一定要显示出来，而不是静静地失败。
+*   如果列表中没有项目，则显示空状态，而不是不呈现任何内容。
+*   破坏性的行动应该有一个确认步骤，尤其是不可逆的。
+*   如果交互式元素触发异步请求，则禁用它们！防止在意外双击的情况下重复触发事件(对于有运动障碍的人来说是可能的)。
+*   如果涉及到搜索输入，每次击键都不应该触发网络请求。
+*   处理极端情况
+    *   字符串可以很长/很短，在这两种情况下你的 UI 都不应该看起来很奇怪。对于长字符串，它们的内容可以被截断并隐藏在“查看更多”按钮后面。
+    *   如果一个组件中有很多条目要显示，它们不应该同时显示在屏幕上，这样会使页面变得非常长/宽。对项目进行分页或将它们包含在具有最大宽度/高度的容器中。
+*   键盘友好性——这包括确保组件是键盘友好的
+    *   添加快捷方式，使只使用键盘的用户更容易使用该组件
+    *   确保元素可以聚焦，并且组件中的 tab 键顺序正确
+*   可访问性是 UX 的一部分，但将在后面的章节中讨论
+
+#### 性能[](#performance "Direct link to heading")
+
+在前端，性能通常是指几件事——加载速度、UI 响应用户交互的速度、组件所需的内存空间(堆)。
+
+*   加载速度——组件包含的 JavaScript 越少，浏览器加载组件所需下载的 JavaScript 就越少，网络请求时间也就越短。模块化组件并允许用户仅下载其用例所需的必要 JavaScript 模块也很重要。
+*   对用户交互的响应
+    *   如果用户交互导致显示必须通过网络加载的数据，则在用户交互和 UI 更新之间会有延迟。最小化延迟或完全消除延迟是提高响应能力的关键。
+    *   浏览器中的 JavaScript 是单线程的。浏览器一次只能执行一行代码。当用户在页面上做一些事情时，组件需要做的工作(JavaScript 执行、DOM 更新)越少，组件更新 UI 以响应变化的速度就越快。
+*   内存空间——你的组件在页面上占用的内存越多，浏览器的运行速度就越慢，用户的体验也会变得迟钝。如果您的组件必须呈现数百/数千个项目(例如，转盘中的图像数量、选择器中的项目数量)，内存空间可能会变得很大。
+
+**优化提示**
+
+*   只呈现屏幕上显示的内容——例如，在选择器中，即使列表可以包含数百个元素，也只向用户显示几个项目。将它们全部呈现在浏览器中会浪费处理能力和内存空间。我们可以利用一种叫做窗口/虚拟化的技术来模拟一个包含许多元素的列表，同时尽可能地只渲染少数元素，以使最终结果看起来好像没有进行优化(尤其是保留滚动高度)。点击阅读关于虚拟化[的更多信息。](https://web.dev/virtualize-long-lists-react-window/)
+*   惰性加载/只加载必要的数据——例如，在一个照片库组件中，一个用户可能有成百上千的照片，但是急切地加载所有的照片是不可行的。最有可能的是，用户不会在那个会话中浏览所有的内容。优化可以是只加载用户可能查看的内容，或者在视口内的内容(我们称之为“折叠之上”)。其余的照片可以按需加载，这会导致响应延迟，但下一篇技巧文章将帮助您解决这个问题。
+*   提前预加载/预取数据——例如，在一个图像轮播中，有太多的图像需要预先加载，优化可以是在用户仍在当前图像上时提前加载下一个图像，这样当用户单击“下一个”按钮时，就不需要网络延迟，因为下一个图像已经被加载了。这种技术也可以修改为加载接下来的 N 个图像，以处理用户快速连续点击“下一个”的情况。
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+#### [可达性(a11y)](#accessibility-a11y "Direct link to heading")
+
+易访问性(a11y)是指让尽可能多的人可以使用你的网站。
+
+*   颜色对比(例如色盲)
+*   键盘友好性(例如精细运动控制能力有限的人)
+*   视觉障碍(如失明)
+*   音频抄本(如聋人)
+
+不是每个人都以同样的方式上网；有的人专门用屏幕阅读器和键盘(没有鼠标)！以下是在 UI 组件中实现 a11y 的一些基本技巧:
+
+*   前景色应该与背景色有足够的对比
+*   为语义使用正确的 HTML 标签，或者正确的`aria-role`属性
+*   可点击的项目应该有`tabindex`属性(以便它们是可聚焦的)和“光标:指针”样式来表示它们可以被点击
+*   图像应该有`alt`文本，它将被屏幕阅读器读出，并作为图像加载失败时的后备描述
+*   这有助于为非视觉用户不明显的元素提供上下文。例如，一个内部没有任何文本标签的图标按钮应该有一个`aria-label`属性，这样对于看不到图标的用户来说，意图就很清楚了
+
+a11y 是最常被忽视的领域之一，因为大多数时候它们对开发人员来说是不可见的。展示 a11y 的知识并拥有创建易访问组件的技能肯定会给你带来好的影响。更多关于[网页可访问性](https://www.w3.org/WAI/fundamentals/accessibility-intro/)的阅读。
+
+#### 国际化(i18n)[](#internationalization-i18n "Direct link to heading")
+
+国际化(i18n)是一种产品、应用程序或文档内容的设计和开发，它使文化、地区或语言不同的目标受众能够轻松地进行本地化。通常，组件不应该担心 i18n，除非在少数特定情况下:
+
+*   组件使用字符串-组件中使用的字符串不应该硬编码为特定的语言(例如，照片库组件控件中的“Prev”/“Next”)。字符串可以被指定为一个属性，默认为英文版本
+*   内容的顺序很重要——你的组件支持 RTL(从右到左)语言吗，比如阿拉伯语和希伯来语？
+
+#### 多设备支持[](#multi-device-support "Direct link to heading")
+
+该组件有望在移动 web 上使用吗？移动设备有独特的限制——它们的硬件功能较弱，而且视窗尺寸较小。因此，可以用不同的方式来让组件在移动设备上更好地工作——有意识地努力:
+
+*   不要使用太多内存——使用太多内存会使设备运行速度变慢
+*   增加交互元素的点击量——手指可以更轻松地点击正确的元素
+
+#### 安全[](#security "Direct link to heading")
+
+大多数时候，组件不会暴露在安全漏洞之下，但这种情况仍然会发生。以下是您应该了解的更常见的安全漏洞:
+
+*   XSS -你的组件容易受到跨站点脚本(XSS)的攻击吗？例如，您是否通过`.innerHTML`或`dangerouslySetInnerHTML`(特定于 React)呈现用户输入？
+*   CSRF(跨站点请求伪造)
+*   点击劫持
+*   [T2`rel=noopener`](https://mathiasbynens.github.io/rel-noopener/)
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/10.md

+# 前端系统设计面试-应用
+
+> 原文:[https://www . frontendinterviewhandbook . com/front-end-system-design/applications/](https://www.frontendinterviewhandbook.com/front-end-system-design/applications/)
+
+<header>Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+## 例题[](#examples "Direct link to heading")
+
+*   社交网络
+*   视频观看网站
+*   聊天应用程序
+*   邮件应用程序
+
+## 框架[](#framework "Direct link to heading")
+
+1.  需求澄清/调整
+2.  体系结构
+3.  数据模型
+4.  API 设计
+5.  深潜
+    *   用户体验(UX)
+    *   表演
+    *   可访问性(a11y)
+    *   国际化(i18n)
+    *   多设备支持
+    *   安全性
+
+### 需求澄清[](#requirements-clarification "Direct link to heading")
+
+每次系统设计面试都应该从澄清问题的需求开始，这通常是有意留下的模糊信息。一些注意事项:
+
+*   系统应该支持哪些设备？桌面网络、移动网络等
+*   用户访问系统的主要设备是什么？
+*   我们应该支持哪些浏览器？
+*   我们需要支持国际化吗？
+*   app 需要离线工作吗？
+
+### 架构[](#architecture "Direct link to heading")
+
+前端面试的架构通常集中在客户端架构，而不是涉及数据库、负载平衡器和服务器的大规模分布式系统。
+
+对于应用程序，常见的架构包括模型-视图-控制器、模型-视图-视图模型、Flux、N 层(其中数据层在客户端)等。
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+### 数据模型[](#data-model "Direct link to heading")
+
+客户端应用程序状态，它是服务器状态(数据库)和真实客户端状态(非持久化到服务器)的组合。
+
+### API 设计[](#api-design "Direct link to heading")
+
+应用程序的 API 设计将参考 HTTP/网络 API 参数和响应的形状。
+
+### 深潜[](#deep-dives "Direct link to heading")
+
+在介绍了应用程序的架构基础之后，我们可以深入到应用程序可能需要特别关注的特定领域。请注意，几乎肯定没有足够的时间来涵盖每个领域，并且不是每个领域都与手边的组件非常相关。
+
+表现出对这些领域的了解并能够深入其中是高级开发人员的特征。
+
+*   用户体验(UX)
+*   表演
+*   可访问性(a11y)
+*   国际化(i18n)
+*   多设备支持
+*   安全性
+
+## 有帮助的文章[](#helpful-articles "Direct link to heading")
+
+许多公司在博客中讲述了他们在前端领域面临的技术挑战，这些都是了解更多前端系统设计的绝佳内容。
+
+*   [构建 Google 相册网络用户界面](https://medium.com/google-design/google-photos-45b714dfbed1)
+*   [Twitter Lite 和 High Performance 对渐进式网络应用做出大规模反应](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3)
+*   [网飞网络性能案例研究](https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9)
+*   [Tinder Progressive Web App 性能案例研究](https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0)
+*   [Pinterest 渐进式网络应用性能案例研究](https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154)
+*   [反应和预测渐进式 Web 应用性能案例研究:Treebo](https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299)
+*   [为新 Facebook.com 重建我们的技术体系](https://engineering.fb.com/2020/05/08/web/facebook-redesign/)
+
+Read front end system design case studies
+
+[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/11.md

+# 行为面试
+
+> 原文:[https://www.frontendinterviewhandbook.com/behavioral/](https://www.frontendinterviewhandbook.com/behavioral/)
+
+<header>
+
+行为面试侧重于候选人的软技能——他们如何与他人合作，他们过去如何处理情况。对于全面的行为面试内容，[技术面试手册](https://www.techinterviewhandbook.org/behavioral-interview/)涵盖了这些内容以及顶级公司的常见行为面试问题。
+
+[Go to Tech Interview Handbook  →](https://www.techinterviewhandbook.org/behavioral-interview/)
+
+## 脸书在行为面试中寻找什么[](#what-facebook-looks-for-in-behavioral-interviews "Direct link to heading")
+
+*   讨论你简历上的任何内容，包括当前的项目和细节
+*   提供具体的例子，说明你做了什么以及产生的影响
+*   批判自己，分享你从过去的经历中学到的东西
+*   谈谈你喜欢你目前的角色和/或作为一名开发人员的什么
+*   讨论你为什么想要做出改变
+
+*来源:[在脸书](https://www.facebook.com/careers/swe-prep-onsite)准备现场面试*
+
+## 课程[](#courses "Direct link to heading")
+
+我真的不认为一个人需要参加行为面试的课程，但你的里程可能会有所不同。我见过一些应聘者因为没有通过行为测试而被拒绝，尽管他们在编码和系统设计面试中做得非常好。如果你想参加行为面试课程，你可以看看 Educative 的[探索行为面试](https://www.educative.io/courses/grokking-the-behavioral-interview?aff=x23W)课程。
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/12.md

+# 简历准备
+
+> 原文:[https://www.frontendinterviewhandbook.com/resume/](https://www.frontendinterviewhandbook.com/resume/)
+
+<header>
+
+简历在工作申请过程中经常被忽视，但却极其重要，因为它能决定你申请的成败。科技面试手册包含更多关于如何写一份杀手简历的细节，这也将有利于前端工程师候选人。
+
+[Go to Tech Interview Handbook  →](https://www.techinterviewhandbook.org/resume/guide)
+
+## 推荐简历工具[](#recommended-resume-tools "Direct link to heading")
+
+### 1.使用简历模板[](#1-use-resume-templates "Direct link to heading")
+
+如果可以使用模板，为什么要浪费时间从头开始创建自己的简历呢？！你可以在网上找到很多免费的简历模板，或者你也可以购买高质量的。 [FAANG Tech Leads](https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2) 目前在**以 70%的价格**提供简历模板和推荐信。
+
+他们的模板:
+
+*   是由前 FAANG 招聘经理根据从数百份候选人申请中收到的顶级简历创建的
+*   通过 FAANG ATS 保证可读性
+*   迎合不同的经验水平
+
+他们还提供了已经收到 FAANG 公司多份聘书的候选人的简历示例/参考资料，这有助于帮助你制作符合相同要求的内容。[来看看](https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2)！
+
+### 2.使用行业标准 ATS [](#2-test-readability-with-industry-standard-ats "Direct link to heading")测试可读性
+
+使用免费的 ATS 简历扫描测试你简历的可读性和格式。大多数大公司都使用这样的简历扫描仪。
+
+### 3.纯文本文件测试[](#3-the-plain-text-file-test "Direct link to heading")
+
+只需从简历中复制内容并粘贴到纯文本文档中即可！在以下情况下进行编辑:
+
+*   你的原始简历中缺少一些要点
+*   纯文本中的字符显示不正确
+*   各部分杂乱无章
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/13.md

+# 公司面试问题
+
+原文：[https://www.frontendinterviewhandbook.com/company-interview-questions/](https://www.frontendinterviewhandbook.com/company-interview-questions/)
\ No newline at end of file

docs/fe-inter-hb/14.md

+# 谷歌前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/Google-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/google-front-end-interview-questions/)
+
+<header>
+
+因为是谷歌，候选人可以期待测试基本的计算机科学概念以及他们的前端知识/技能。
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   实现 Google 文档的大纲视图。
+*   HTML 节点上的 DFS。
+*   执行`throttle`。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/throttle)
+*   如何做一个每 50 毫秒只调用输入函数 f 的函数？
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/throttle)
+*   怎么做一个带 f 的函数，超时返回一个调用 f 的函数？
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/debounce)
+*   给定一条时间线，编写 JavaScript 来选择时间线选择范围内的所有节点。
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   设计一个滑块组件。
+*   设计一个井字游戏/设计一个井字游戏的算法。
+*   实现嵌套复选框(当父复选框被选中时，子复选框也被选中，反之亦然。使用`<input type="checkbox">`)。类似于[不确定的复选框](https://css-tricks.com/indeterminate-checkboxes/)。
+*   使用 JavaScript 设计一个网页，当你到达页面底部时可以自动加载新文章。您可以使用 AJAX 和 JavaScript 事件监听器。
+*   使用 HTML、CSS、JavaScript 编写一个 UI，允许用户在表单的文本输入字段中输入行数和列数，并呈现一个表格。
+
+例如:行数:4，列数:5，“提交”按钮。点击“提交”按钮将显示下表(忽略样式):
+
+| one | eight | nine | Sixteen | Seventeen |
+| --- | --- | --- | --- | --- |
+| Two | seven | Ten | Fifteen | Eighteen |
+| three | six | Eleven | Fourteen | Nineteen |
+| four | five | Twelve | Thirteen | Twenty |
+
+## 琐事[](#trivia "Direct link to heading")
+
+*   解释 CSS 盒子模型。
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/css/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
+*   当你在浏览器中输入一个 URL 并点击回车会发生什么？
+*   给定网页上的一些文本，有多少种方法可以让这些文本消失？
+*   如何在不刷新页面的情况下将数据从网页发送到服务器？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/what-are-the-advantages-and-disadvantages-of-using-ajax)
+
+## 系统设计[](#system-design "Direct link to heading")
+
+*   设计 JS Bin。
+*   你如何创建一个网页使用的谷歌分析软件开发工具包？
+*   设计表情自动完成。
+
+## 算法[](#algorithm "Direct link to heading")
+
+*   扫雷舰问题。编写一个函数`reveal()`，当用户点击一个图块时，输出显示的图块数量。每个区块显示其相邻的炸弹数量。如果用户点击一个炸弹，游戏就结束了。如果该图块为 0，则显示其所有邻居。
+*   给你四个数字(int 类型)，有四个基本的数学运算符供你使用(+、-、x、/)。给定任意的方法对数字进行分组，并使用任何运算符，判断是否可以从四个数字中得到 24。这些数字必须按照它们出现的顺序进行处理。
+*   寻找 k 个最近点。
+
+*来源: [Glassdoor Google 前端软件工程师面试问题](https://www.glassdoor.sg/Interview/Google-Front-End-Software-Engineer-Interview-Questions-EI_IE9079.0,6_KO7,34.htm)、 [Google |前端工程师](https://leetcode.com/discuss/interview-question/271736/google-front-end-engineer-onsite-interview)、T5】*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/15.md

+# 亚马逊前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/Amazon-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/amazon-front-end-interview-questions/)
+
+<header>
+
+众所周知，亚马逊非常关注行为问题及其领导原则。因此，在非技术方面也要做好准备。
+
+## 琐事[](#trivia "Direct link to heading")
+
+*   CSS 盒子模型是什么？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/css/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
+*   什么是 JavaScript 闭包？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/what-is-a-closure-and-how-why-would-you-use-one)
+*   当你在浏览器中输入 URL 并按回车键时会发生什么？
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   实现`map`、`reduce`、`filter`、`sort`等`Array.prototype`功能。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/coding)
+*   给定一个对象和一个过滤函数，编写一个递归过滤该对象的函数，当用过滤函数调用时，只返回返回`true`的值(类似于`Array.prototype.filter`，但用于对象)。
+*   实现一个函数`getElementsByStyle(property, value)`,返回 DOM 中匹配该样式的所有元素。
+    *   例如`getElementsByStyle("color", "#fff")`会用白色文本返回 DOM 中的所有元素。
+*   许诺一个功能。
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   使用 HTML/CSS 和 JavaScript 通过搜索和排序从一组对象中实现一个数据表。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/data-selection)
+*   实现自动建议的材料用户界面芯片。当发送电子邮件时，自动推荐人，并把他们转换成一个芯片，他们的头像在右边
+*   实现一个 Like 按钮。[来源](https://leetcode.com/discuss/interview-question/1719943/Amazon-or-Phone-Screen-or-FEE-L5-or-Like-Button)
+*   编写一个分页的地址小部件。想象一下，你是一个卖家，有一个地址列表，你需要查看他们每页 5 个地址，并有可能去上一页和下一页。[来源](https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer)
+*   使用 HTML，CSS 和 JavaScript 实现一个搜索栏。
+*   实现一个星级小部件。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/user-interface/star-rating)
+*   实施井字游戏。
+*   使用 flexbox 重新创建自适应布局。确保无障碍。
+*   用可移动的棋子实现棋盘。
+*   如何在横幅图像上呈现文本？
+*   给定一个嵌套的 JSON 对象，呈现一个目录树。
+
+## 系统设计[](#system-design "Direct link to heading")
+
+*   设计一个餐馆列表应用程序，用户可以通过添加额外的东西，如浇头，沙拉等来订购和定制他们的订单。[来源](https://leetcode.com/discuss/interview-question/1984996/Amazon-Virtual-Onsite-April-2022-FrontEnd-Engineer-II-(L5)Vancouver-Offer)
+*   设计一个手风琴组件。
+
+## 算法[](#algorithm "Direct link to heading")
+
+亚马逊确实会通过问 LeetCode 式的问题来评估你的计算机科学基础。一定要做好准备。
+
+*来源: [Glassdoor 亚马逊前端工程师面试问题](https://www.glassdoor.sg/Interview/Amazon-Front-End-Engineer-Interview-Questions-EI_IE6036.0,6_KO7,25.htm)*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/16.md

+# Microsoft 前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/Microsoft-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/microsoft-front-end-interview-questions/)
+
+<header>
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   使用普通 JavaScript、HTML 和 CSS 实现井字游戏。
+*   创建一个像微软团队一样的聊天界面。
+*   用 OOP 实现一个象棋游戏。
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   创建一个类似微软团队的通知界面
+*   图像滑块实现。
+
+## 琐事[](#trivia "Direct link to heading")
+
+*   什么是原型？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/explain-how-prototypal-inheritance-works)
+*   什么是终结？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/what-is-a-closure-and-how-why-would-you-use-one)
+*   `let`、`const`、`var`有什么区别？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/what-are-the-differences-between-variables-created-using-let-var-or-const)
+*   什么是 DOM？
+
+## 系统设计[](#system-design "Direct link to heading")
+
+*   设计一个类似微软 Outlook 的电子邮件客户端。
+
+*来源: [Glassdoor 微软前端开发者面试问题](https://www.glassdoor.sg/Interview/Microsoft-Front-End-Developer-Interview-Questions-EI_IE1651.0,9_KO10,29.htm)*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/17.md

+# 苹果前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/apple-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/apple-front-end-interview-questions/)
+
+<header>
+
+人们对苹果公司的前端面试流程知之甚少。
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   使用 JavaScript 自己实现`Array.prototype`方法(`flat`、`map`、`reduce`、`concat`)。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/coding)
+*   你如何按顺序执行一系列承诺？
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   用普通的 JS 实现一个简单的图片订购工具，没有库。
+
+## 琐事[](#trivia "Direct link to heading")
+
+*   如何构建 npm 包？
+*   CSS 中的复合层是什么？
+
+## 算法[](#algorithm "Direct link to heading")
+
+*   给定一个数组，返回一个数组，其中每个值是下两项的乘积:例如`[3, 4, 5]`->-T1】
+
+*来源: [Glassdoor 苹果前端开发者面试问题](https://www.glassdoor.sg/Interview/Apple-Front-End-Developer-Interview-Questions-EI_IE1138.0,5_KO6,25.htm)*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/18.md

+# Airbnb 前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/Airbnb-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/airbnb-front-end-interview-questions/)
+
+<header>
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   写一个简单的承诺。
+*   实现一个添加键/值对并监听键的值变化的`StoreData`类。[来源](https://leetcode.com/discuss/interview-question/348436/Airbnb-or-Phone-Screen-or-Implement-StoreData-class)
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   给定一个输入和一个返回 JSON 列表的端点，结果是，扩展它以在更改时自动完成，处理结果中的键导航。
+*   给定一个嵌入在表单中的星星小部件，编写代码来选择星星，并通过正常的表单操作提交正确的值。使多星部件可重复使用。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/user-interface/star-rating)
+
+*来源: [Glassdoor Airbnb 前端工程师面试问题](https://www.glassdoor.sg/Interview/Airbnb-Front-End-Engineer-Interview-Questions-EI_IE391850.0,6_KO7,25.htm)*
+
+## 算法[](#algorithm "Direct link to heading")
+
+Airbnb 确实会通过问 LeetCode 式的问题来评估你的计算机科学基础。一定要做好准备。
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/19.md

+# 字节舞/titok 前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/字节跳动-tiktok-前端-面试-问题/](https://www.frontendinterviewhandbook.com/companies/bytedance-tiktok-front-end-interview-questions/)
+
+<header>
+
+字节跳动/抖音的前端采访在采访形式方面相当平衡。
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   执行`Promise.all`。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/promise-all)
+*   实现一个扩展`Array.prototype`的函数。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/coding)
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   实现一个下拉组件。
+
+## 琐事[](#trivia "Direct link to heading")
+
+*   `localStorage`和饼干的区别。
+
+## 算法[](#algorithm "Direct link to heading")
+
+*   合并两个排序的整数数组，删除重复项。
+*   你有一个网页上的图像，写 css 和 js，以便当鼠标在图像上时，它旋转 180 度，1 秒钟的动画。
+*   给定一列点，找出其中任意四个点是否构成正方形。如果可能，返回“真”，否则返回“假”。
+    *   例子:`[[0, 0], [2, 0], [1, 1], [0, -1], [-1, -1], [0, 2], [0, 1], [1,0]]`->-T1】
+*   检查字符串中的平衡括号。
+*   给定两个节点，返回这两个节点之间的树的部分。
+*   在陆地和海洋的网格中找到这些岛屿。
+
+*来源: [Glassdoor 字节跳动前端开发者面试问题](https://www.glassdoor.sg/Interview/ByteDance-Front-End-Developer-Interview-Questions-EI_IE1624196.0,9_KO10,29.htm)*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/20.md

+# Dropbox 前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/Dropbox-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/dropbox-front-end-interview-questions/)
+
+<header>
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   实现 [`getByClassName()`和`getByClassnameHierarchy()`](https://leetcode.com/discuss/interview-question/427896/Dropbox-or-Phone-Screen-or-Implement-getByClassName-and-getByClassnameHierarchy)
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name)
+*   基于面向对象的班级管理系统。
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   使用 JavaScript，HTML，CSS 建立一个图库。
+*   从手机键盘组词。
+*   构建一个 UI，从与设计规范相匹配的天气 API 中获取数据。
+*   构建一个与 Dropbox 主页上某个页面的设计规范相匹配的 UI。
+
+## 系统设计[](#system-design "Direct link to heading")
+
+*   设计谷歌日历。
+
+## 算法[](#algorithm "Direct link to heading")
+
+*   你想记录一个网站的点击数。实现两个函数，`log_hit()`在记录点击时被调用，而`get_hits_in_last_five_minutes()`返回最近五分钟内的点击总数。
+
+*来源: [Glassdoor Dropbox 前端开发者面试问题](https://www.glassdoor.sg/Interview/Dropbox-Front-End-Developer-Interview-Questions-EI_IE415350.0,7_KO8,27.htm)， [Glassdoor Dropbox Web 开发者面试问题](https://www.glassdoor.sg/Interview/Dropbox-Web-Developer-Interview-Questions-EI_IE415350.0,7_KO8,21.htm?filter.jobTitleFTS=Web+Developer)，*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/21.md

+# LinkedIn 前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/LinkedIn-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/linkedin-front-end-interview-questions/)
+
+<header>
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   写一个`getElementsByClassName`函数。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name)
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   创建工具提示组件。
+*   创建跨浏览器 Linkedin 顶部导航栏。
+
+## 琐事[](#trivia "Direct link to heading")
+
+*   CSS `padding`和`margin`的区别。
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/css/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
+*   承诺和回拨的区别？
+*   事件冒泡和捕获的区别？
+*   JavaScript 中回调和闭包的区别？
+*   使用预处理器有什么好处？例如 Sass，Stylus，Less。
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/css/what-are-the-advantages-disadvantages-of-using-css-preprocessors)
+*   什么是事件委托？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/explain-event-delegation)
+
+## 算法[](#algorithm "Direct link to heading")
+
+*   反转双向链表。
+
+*来源: [Glassdoor 链接前端软件工程师面试问题](https://www.glassdoor.sg/Interview/LinkedIn-Front-End-Software-Engineer-Interview-Questions-EI_IE34865.0,8_KO9,36.htm)*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/22.md

+# Lyft 前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/lyft-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/lyft-front-end-interview-questions/)
+
+<header>
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   执行`Promise.all`。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/promise-all)
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   实现自动完成。
+
+*来源: [Glassdoor Lyft 前端工程师面试问题](https://www.glassdoor.sg/Interview/Lyft-Frontend-Engineer-Interview-Questions-EI_IE700614.0,4_KO5,22.htm)*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/23.md

+# Salesforce 前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/sales force-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/salesforce-front-end-interview-questions/)
+
+<header>
+
+对 Salesforce 的前端面试流程了解不多。
+
+## 编码[](#coding "Direct link to heading")
+
+*   展平嵌套数组。
+    *   [大前端练习题](https://www.greatfrontend.com/questions/javascript/flatten)
+
+## 琐事[](#trivia "Direct link to heading")
+
+*   什么是事件循环？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue)
+*   什么是终结？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/what-is-a-closure-and-how-why-would-you-use-one)
+*   CSS 中的定位。
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/css/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element)
+
+*来源: [Glassdoor Salesforce UI 开发者面试问题](https://www.glassdoor.sg/Interview/Salesforce-UI-Developer-Interview-Questions-EI_IE11159.0,10_KO11,23.htm)*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/24.md

+# Twitter 前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/Twitter-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/twitter-front-end-interview-questions/)
+
+<header>
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   实现一个提前类型。[来源](https://leetcode.com/discuss/interview-question/1220887/Twitter-Frontend-Phone-Screen)
+*   为井字游戏添加功能。
+
+## 琐事[](#trivia "Direct link to heading")
+
+*   `Array.prototype.map`和`Array.prototype.forEach`有什么区别？
+    *   [在大前端阅读答案](https://www.greatfrontend.com/questions/quiz/javascript/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other)
+
+*来源: [Glassdoor Twitter 前端开发者面试问题](https://www.glassdoor.sg/Interview/Twitter-Front-End-Developer-Interview-Questions-EI_IE100569.0,7_KO8,27.htm)*
+
+</header>
\ No newline at end of file

docs/fe-inter-hb/25.md

+# 优步前端面试问题
+
+> 原文:[https://www . frontendinterviewhandbook . com/companies/Uber-front-end-interview-questions/](https://www.frontendinterviewhandbook.com/companies/uber-front-end-interview-questions/)
+
+<header>
+
+人们对优步的前端面试过程知之甚少。
+
+## JavaScript[](#javascript "Direct link to heading")
+
+*   在 API 端点之上实现速率限制器属性/修饰/注释。滚动窗口每分钟最多 N 个请求。[源 A](https://leetcode.com/discuss/interview-question/2409192/Uber-or-Phone-Screen-or-Senior-Front-End-Engineer) 和[源 B](https://leetcode.com/discuss/interview-question/124880/Rate-Limiter)
+
+## 用户界面编码[](#user-interface-coding "Direct link to heading")
+
+*   创建一个按钮，单击该按钮会在页面上添加一个进度条。进度条会在给定的时间内填满(大概 3 到 5 秒)。如果你通过了第一部分，你将被要求调节一次可以运行多少个进度条。例如，如果限制为 3 个进度条，并且用户点击按钮 4 次，则第四个进度条仅在第一个进度条完成后开始。[来源](https://leetcode.com/discuss/interview-question/1064199/uber-front-end-phone-screen-reject)
+*   重叠圈 app。[信号源](https://leetcode.com/discuss/interview-question/1784074/Uber-or-Phone-or-Overlapping-circles-app-or-Reject)80/限速器)
+
+</header>
\ No newline at end of file