i18n: translate
This commit is contained in:
Yangshun
parent
147d338bf9
commit
87aaf941b9
|
|
@ -0,0 +1,142 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "b30d86a3",
|
||||||
|
"description": "1006d4c4",
|
||||||
|
"seo_title": "407dfda6",
|
||||||
|
"seo_description": "996df42a",
|
||||||
|
"social_title": "bd82dd8e"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"3a9a8d18",
|
||||||
|
"593c6899",
|
||||||
|
"e3e74d45",
|
||||||
|
"63d3ac26",
|
||||||
|
"22934b89",
|
||||||
|
"cf56d450",
|
||||||
|
"1180e08",
|
||||||
|
"1f5b64bd",
|
||||||
|
"650a9faa",
|
||||||
|
"8f2809c3",
|
||||||
|
"35fe945d",
|
||||||
|
"1ad0280c",
|
||||||
|
"d57689f8",
|
||||||
|
"24bae375",
|
||||||
|
"5da12a67",
|
||||||
|
"19793788",
|
||||||
|
"1ad0280c",
|
||||||
|
"ea808f8",
|
||||||
|
"24bae375",
|
||||||
|
"fc22cf33",
|
||||||
|
"bd456ea8",
|
||||||
|
"f6bafdb3",
|
||||||
|
"317f3605",
|
||||||
|
"11324be4",
|
||||||
|
"b35c194c",
|
||||||
|
"9944dec7",
|
||||||
|
"6d49362f",
|
||||||
|
"c62a00b2",
|
||||||
|
"76b53359",
|
||||||
|
"f844bbb5",
|
||||||
|
"af0875ae",
|
||||||
|
"ad2643d",
|
||||||
|
"3f0165d9",
|
||||||
|
"9f11b2f4",
|
||||||
|
"65deb670",
|
||||||
|
"a5c46cf3",
|
||||||
|
"d2dd9bf5",
|
||||||
|
"803a242f",
|
||||||
|
"f1217e62",
|
||||||
|
"4f2a9533",
|
||||||
|
"8e2e4103",
|
||||||
|
"bdaf5e0",
|
||||||
|
"2f54a44c",
|
||||||
|
"1fff8c49",
|
||||||
|
"fdc098ae",
|
||||||
|
"5a595fe5",
|
||||||
|
"cb011c33",
|
||||||
|
"c36bdde0",
|
||||||
|
"a84a02f1",
|
||||||
|
"6561df72",
|
||||||
|
"ab7a7ed3",
|
||||||
|
"fcfd2fed",
|
||||||
|
"3ab47db1",
|
||||||
|
"d3f12e28",
|
||||||
|
"895ba725",
|
||||||
|
"c3ca1bc9",
|
||||||
|
"c6983f94",
|
||||||
|
"cf831a72",
|
||||||
|
"99d32457",
|
||||||
|
"ff45d4b0",
|
||||||
|
"6c44e86f"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"3a9a8d18",
|
||||||
|
"593c6899",
|
||||||
|
"e3e74d45",
|
||||||
|
"63d3ac26",
|
||||||
|
"22934b89",
|
||||||
|
"cf56d450",
|
||||||
|
"1180e08",
|
||||||
|
"1f5b64bd",
|
||||||
|
"650a9faa",
|
||||||
|
"8f2809c3",
|
||||||
|
"35fe945d",
|
||||||
|
"1ad0280c",
|
||||||
|
"d57689f8",
|
||||||
|
"24bae375",
|
||||||
|
"5da12a67",
|
||||||
|
"19793788",
|
||||||
|
"1ad0280c",
|
||||||
|
"ea808f8",
|
||||||
|
"24bae375",
|
||||||
|
"fc22cf33",
|
||||||
|
"bd456ea8",
|
||||||
|
"f6bafdb3",
|
||||||
|
"317f3605",
|
||||||
|
"11324be4",
|
||||||
|
"b35c194c",
|
||||||
|
"9944dec7",
|
||||||
|
"6d49362f",
|
||||||
|
"c62a00b2",
|
||||||
|
"76b53359",
|
||||||
|
"f844bbb5",
|
||||||
|
"af0875ae",
|
||||||
|
"ad2643d",
|
||||||
|
"3f0165d9",
|
||||||
|
"9f11b2f4",
|
||||||
|
"65deb670",
|
||||||
|
"a5c46cf3",
|
||||||
|
"d2dd9bf5",
|
||||||
|
"803a242f",
|
||||||
|
"f1217e62",
|
||||||
|
"4f2a9533",
|
||||||
|
"8e2e4103",
|
||||||
|
"bdaf5e0",
|
||||||
|
"2f54a44c",
|
||||||
|
"1fff8c49",
|
||||||
|
"fdc098ae",
|
||||||
|
"5a595fe5",
|
||||||
|
"cb011c33",
|
||||||
|
"c36bdde0",
|
||||||
|
"a84a02f1",
|
||||||
|
"6561df72",
|
||||||
|
"ab7a7ed3",
|
||||||
|
"fcfd2fed",
|
||||||
|
"3ab47db1",
|
||||||
|
"d3f12e28",
|
||||||
|
"895ba725",
|
||||||
|
"c3ca1bc9",
|
||||||
|
"c6983f94",
|
||||||
|
"cf831a72",
|
||||||
|
"99d32457",
|
||||||
|
"ff45d4b0",
|
||||||
|
"6c44e86f"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,203 +1,206 @@
|
||||||
---
|
---
|
||||||
title: 回答 "告诉我什么时候...... "的协作技能
|
title: 回答协作行为问题
|
||||||
description: 学习如何回答针对前端/网络开发人员/软件工程师的协作行为问题，包括沟通和团队工作。 参考样本答案。
|
description: 了解如何回答用于评估您的协作技能的“告诉我一个时间……”风格的问题。
|
||||||
|
seo_title: 协作问题 | 行为面试手册
|
||||||
|
seo_description: 了解如何回答协作行为面试问题，适用于前端工程师。参考示例答案。
|
||||||
|
social_title: 协作行为问题 | GreatFrontEnd
|
||||||
---
|
---
|
||||||
|
|
||||||
正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**合作**是需要准备的 8 大类问题中的一类。
|
正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，**协作**是需要准备的 8 个主要问题类别之一。
|
||||||
|
|
||||||
合作问题可能是前端行为面试中最常见的行为问题，因为它们包含了大量相关的特征，为了便于故事/项目的准备，可以将其分组。
|
协作问题可能是前端行为面试中最常见的行为问题，因为它们包含大量相关的特质，这些特质可以分组以便于故事/项目准备。
|
||||||
|
|
||||||
在本指南中，您将学习如何处理这些问题：
|
在本指南中，您将学习如何解决这些问题：
|
||||||
|
|
||||||
1. 详细的评价标准
|
1. 详细的评估标准
|
||||||
2. 将可能的问题抽象为共同的主题
|
2. 将可能的问题抽象成常见主题
|
||||||
3. 建议的答案框架
|
3. 建议的答案框架
|
||||||
4. 一个很好的样本故事示例
|
4. 一个好的示例故事
|
||||||
5. 后续问题的可能性质
|
5. 追问的可能性质
|
||||||
6. 问题和回答示例
|
6. 示例问题和答案
|
||||||
|
|
||||||
## 详细的评价标准
|
## 详细的评估标准
|
||||||
|
|
||||||
在对这一类别的候选人进行评级时，面试者常常考虑以下标准：
|
在对该类别下的候选人进行评分时，面试官通常会关注以下标准：
|
||||||
|
|
||||||
- 处理分歧
|
* 处理分歧
|
||||||
- 团队合作
|
* 团队合作
|
||||||
- 与具有不同性格和技能的人合作
|
* 与不同个性和技能的人合作
|
||||||
- 简单地传达复杂的概念
|
* 简单地传达复杂的想法
|
||||||
- 提出有建设性的反馈意见。
|
* 给予建设性的反馈
|
||||||
- 积极倾听
|
* 积极倾听
|
||||||
|
|
||||||
## 抽象合作问题
|
## 抽象协作问题
|
||||||
|
|
||||||
正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为**类似的主题**，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。
|
正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，为每个现有的行为问题专门准备答案是不切实际的。但是，通过将特定问题归入**相似的主题**并准备涵盖大量问题要求的故事情节，我们可以将需要准备的故事数量减少到大约 3-5 个故事。
|
||||||
|
|
||||||
合作是这样一个主题，它可以将沟通、团队工作、适应性和指导性等子要求组合起来。 对于每个子要求，我们总结了常见的问题，也抽象出了**面试官在这些问题中所关注的特征**：
|
协作是这样一个主题，它可以将沟通、团队合作、适应性和可教练性等子要求组合在一起。对于每个子要求，我们总结了常见问题，并抽象出了**面试官在这些问题中寻找的特质**：
|
||||||
|
|
||||||
### 沟通
|
### 沟通
|
||||||
|
|
||||||
#### 问题示例
|
#### 示例问题
|
||||||
|
|
||||||
- 你能描述一下你不得不向非技术性听众有效传达技术信息的时候，以及你是如何处理的吗？
|
* 您能否描述一下您必须有效地向非技术受众传达技术信息以及您如何处理这种情况？
|
||||||
- 您能否描述一下你不得不调整您的通信风格以便与具有不同背景或观点的人进行有效地沟通的时候？
|
* 您能否描述一下您必须调整您的沟通方式才能有效地与具有不同背景或观点的人进行沟通的情况？
|
||||||
- 你能举出一个例子，说明你曾在时间紧迫或高度紧张的情况下，不得不沟通重要信息？
|
* 您能否举例说明您必须在时间压力或高压情况下传达重要信息的情况？
|
||||||
- 你如何确保你的信息被受众理解并得到很好的接受？
|
* 您如何确保您的信息被受众理解和接受？
|
||||||
|
|
||||||
#### 面试官看重的特质
|
#### 面试官寻找的特质
|
||||||
|
|
||||||
- 简单地传达复杂的概念
|
* 简单地传达复杂的想法
|
||||||
- 积极倾听
|
* 积极倾听
|
||||||
|
|
||||||
### 团队合作
|
### 团队合作
|
||||||
|
|
||||||
#### 示例问题
|
#### 示例问题
|
||||||
|
|
||||||
- 您能否描述过去的一个项目，在这个项目中，您必须与困难的利益攸关方或团队合作，以及如何处理它？
|
* 您能否描述一个您不得不与难以相处的利益相关者或队友合作的过去项目，以及您是如何处理的？
|
||||||
- 你能告诉我，你有什么时候需要向团队成员或同事提供建设性的反馈吗？
|
* 您能否告诉我您不得不向团队成员或同事提供建设性反馈的经历？
|
||||||
- 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
|
* 您如何与未能按时完成任务或履行职责的队友一起工作？
|
||||||
- 你能提供一个例子，当你不得不与一个团队一起工作时，成员之间存在分歧？
|
* 您能否提供一个您不得不与团队合作的例子，团队成员之间存在分歧？
|
||||||
- 您如何处理与具有不同技能组合和个性的团队合作？
|
* 您如何处理与拥有不同技能和个性的团队成员一起工作？
|
||||||
- 你能举一个例子，说明你为了成功完成一个项目而不得不适应团队成员的工作风格吗？
|
* 您能否举例说明您不得不适应团队成员的工作方式才能成功完成项目的情况？
|
||||||
- 您如何确保在小组讨论中听取所有团队成员的意见，并考虑他们的想法？
|
* 您如何确保所有团队成员都能被听到，他们的想法在小组讨论中得到考虑？
|
||||||
- 你能否举一个例子说明你必须在一个团队项目上工作不得不与他人妥协以达成解决方案？
|
* 您能否举例说明您不得不参与团队项目并与他人妥协以达成解决方案的情况？
|
||||||
- 你能描述一下你不得不与来自不同部门或组织的人合作完成一个项目的时候吗？
|
* 您能否描述一下您不得不与来自不同部门或组织的人员合作以完成项目的情况？
|
||||||
|
|
||||||
#### 面试官看重的特质
|
#### 面试官寻找的特质
|
||||||
|
|
||||||
- 作为一个团队工作
|
* 团队合作
|
||||||
- 与不同的工作风格、技能和个性工作
|
* 与不同的工作方式、技能和个性合作
|
||||||
- 处理分歧(他人的和自己的)
|
* 处理分歧（他人和自己）
|
||||||
- 提出有建设性的反馈意见。
|
* 提供建设性反馈
|
||||||
|
|
||||||
## 建议的答案框架
|
## 建议的回答框架
|
||||||
|
|
||||||
一如既往，[STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
|
与往常一样，我们推荐 [STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 作为构建您故事的最简单、最有效的框架。
|
||||||
|
|
||||||
根据上述抽象，我们可以看到，面试官正在为每一项子要求寻找具体特点。 我们为了展示这些理想特征的建议方法已经创建了一个快速的小册子。
|
基于上述抽象，我们可以看到，面试官正在寻找每个子要求的特定特征。我们创建了一个快速备忘单，用于建议展示这些期望特征的方法。
|
||||||
|
|
||||||
理想的情况是，你应该选择能够尽可能多地涵盖以下特征的故事，这样你就不必记住太多的故事。
|
理想情况下，您应该选择能够涵盖尽可能多的以下特征的故事，这样您就不必记住太多的故事。
|
||||||
|
|
||||||
### 简单地传达复杂的概念
|
### 简单地传达复杂的想法
|
||||||
|
|
||||||
1. 首先了解你的受众的知识水平。 设身处地为他们着想，用他们的语言解释。
|
1. 首先了解您的听众的知识水平。设身处地为他们着想，用他们的语言解释。
|
||||||
2. 了解他们需要知道(和想要知道)什么，优先考虑关键要点。
|
2. 了解他们需要知道（和想要知道）什么，并确定关键要点的优先级。
|
||||||
3. 仅在适当的地方深入挖掘重要细节。
|
3. 仅在适当的时候深入研究重要细节。
|
||||||
4. 将想法分解成各个组成部分。
|
4. 将想法分解成组成部分。
|
||||||
5. 使用视觉辅助工具，如示意图或图表。
|
5. 使用视觉辅助工具，例如图表或图表。
|
||||||
6. 举例说明。
|
6. 举例说明。
|
||||||
|
|
||||||
注意：对于沟通，像简单传达复杂的想法和积极倾听这样的特质，可以通过你的实际面试表现来评估--例如，你是否打断了面试官，你是否正确地倾听和理解了他们的问题，你是否以一种易于消化的方式传达了你的思考过程。
|
注意：对于沟通，像简单地传达复杂想法和积极倾听这样的特征可以通过您实际的面试表现来评估——例如，您是否打断面试官，您是否倾听并正确理解他们的问题，您是否以易于理解的方式传达您的思维过程。
|
||||||
|
|
||||||
### 积极倾听
|
### 积极倾听
|
||||||
|
|
||||||
1. 侧重于理解而不是答复。
|
1. 专注于理解而不是回复。
|
||||||
2. 在对方说完之前，暂不做判断。
|
2. 在对方说完之前不要评判。
|
||||||
3. 使用非语言线索来显示你的参与。
|
3. 使用非语言提示来表明您正在参与。
|
||||||
4. 用你自己的话来总结和重复一遍。
|
4. 用您自己的话总结并重复。
|
||||||
5. 提出澄清的问题。
|
5. 提出澄清问题。
|
||||||
6. 永远不要打断。
|
6. 永远不要打断。
|
||||||
|
|
||||||
### 作为一个团队工作
|
### 团队合作
|
||||||
|
|
||||||
1. 设定明确的目标并确保每个人都能理解它们。 积极主动地寻求一致和观点。
|
1. 设定明确的目标，并确保每个人都理解它们。主动寻求一致性和观点。
|
||||||
2. 指派和交流角色和责任。 合作和授权。
|
2. 分配和沟通角色和职责。协作和委派。
|
||||||
3. 设置定期的进度检查和地址拦截器。 始终让适当的利益攸关方参与进来，并与他们及时分享信息。
|
3. 建立定期的进度检查并解决障碍。始终包括适当的利益相关者，并及时与他们分享信息。
|
||||||
4. 衡量影响并认可成就。
|
4. 衡量影响并认可成就。
|
||||||
|
|
||||||
### 与不同的工作风格、技能和个性工作
|
### 与不同的工作方式、技能和个性合作
|
||||||
|
|
||||||
1. 公开认可每个团队成员可以带来的独特观点和技能。
|
1. 公开承认每个团队成员可以带来的独特观点和技能。
|
||||||
2. 鼓励公开和诚实地沟通，并积极听取意见。
|
2. 鼓励公开和诚实的沟通以及积极的倾听。
|
||||||
3. 创造一个欢迎和支持的环境，即使是对不同的意见。 把它们当作成长的机会。
|
3. 即使对于意见分歧，也要创造一个受欢迎和支持的环境。将它们用作成长的机会。
|
||||||
4. 积极主动地将各种观点和意见纳入决策。
|
4. 主动在决策中纳入各种观点和声音。
|
||||||
5. 为每个团队成员提供平等机会，包括获得渠道、资源和支助。
|
5. 为每个团队成员提供平等的机会，包括访问渠道、资源和支持。
|
||||||
|
|
||||||
### 处理分歧
|
### 处理分歧
|
||||||
|
|
||||||
1. 促进有关各方之间公开和富有成效的沟通。
|
1. 促进相关方之间的开放和富有成效的沟通。
|
||||||
2. 将冲突作为加强团队合作和改善当前解决方案的一种方式。
|
2. 将冲突构建为增强团队合作和改进当前解决方案的一种方式。
|
||||||
3. 澄清冲突的根源（以及是否确实存在冲突）
|
3. 澄清冲突的根源（以及是否真的存在冲突）
|
||||||
4. 让每一方有平等的时间发表自己的看法和担忧而不作出判断(假定是积极的意图)。 如果需要设置基本规则来培养积极的倾听和理解。 将对话从情绪中引向解决方案。 巧妙地解决无益的对话。
|
4. 给每一方同等的时间来表达他们的观点和担忧，而无需评判（假设积极的意图）。如果需要，设置基本规则以培养积极的倾听和理解。将对话从情绪转移到解决方案。巧妙地处理无效的对话。
|
||||||
5. 总结和验证各方的立场，反思他们的观点。
|
5. 总结并验证每一方的立场，并向他们反映。
|
||||||
6. 确定不同立场之间冲突的根本原因。
|
6. 找出立场之间的潜在冲突根源。
|
||||||
7. 集思广益，捋顺现有的选项，以最好地满足共同目标。 (找到共同基础的技巧和逻辑)。 使用数据和事实与他人一起驱动解析，权衡利弊，而不是仅仅依靠意见。
|
7. 集思广益并运行可用的选项，以最好地实现共同目标。（展示在寻找共同点方面的技能和逻辑）。使用数据和事实来推动与他人的解决方案，权衡利弊，而不是仅仅依赖于意见。
|
||||||
8. 商定最佳解决办法，并确定每一方的责任。 召集有关各方支持决议。
|
8. 同意最佳解决方案并确定每一方的责任。引入相关方以支持解决方案。
|
||||||
|
|
||||||
### 提出有建设性的反馈意见。
|
### 提供建设性反馈
|
||||||
|
|
||||||
1. 私下给出反馈意见。
|
1. 在私下提供反馈。
|
||||||
2. 提醒他们你已经欣赏他们的东西。
|
2. 提醒他们您已经欣赏他们的内容。
|
||||||
3. 描述直接观察到的（而不是推断的）、可以改变的具体行为，例如 "没有研究文件 "与 "没有准备"。
|
3. 描述直接观察到的（而不是推断的）并且可以改变的具体行为，例如“没有研究文档”与“未准备好”。
|
||||||
4. 描述上述行为的影响。
|
4. 描述上述行为的影响。
|
||||||
5. 指出它是一个成长的机会，而不是一个错误。
|
5. 将其指出为成长的机会，而不是错误。
|
||||||
6. 提供解决方案。
|
6. 提供解决方案。
|
||||||
|
|
||||||
### 示例故事
|
### 案例故事
|
||||||
|
|
||||||
虽然看起来有大量的所需特征，但你可以用工程团队中非常常见的情况来覆盖其中的 90%：
|
尽管似乎有大量所需的特质，但您可以通过工程团队中非常常见的情况来涵盖其中的 90%：
|
||||||
|
|
||||||
- 你必须在一个跨职能的团队中工作（例如与商业利益相关者或产品经理或设计师），在一个高压的情况下，优先事项和要求迅速变化。
|
* 您必须在一个跨职能团队（例如，与业务利益相关者或产品经理或设计师）中处理高压情况，在这种情况下，优先级和需求变化很快。
|
||||||
- 商业/设计和工程之间存在利益冲突，例如商业/设计推动（要求）更严格的最后期限，而从工程的角度来看，急于追求这些最后期限将导致大量的技术债务。
|
* 业务/设计和工程之间存在利益冲突，例如业务/设计推动（要求）更紧的截止日期，而从工程角度来看，为了这些截止日期而仓促行事将导致大量的技术债务。
|
||||||
- 你必须就这个问题向商业/设计提供建设性的反馈。
|
* 您必须向业务/设计提供关于该问题的建设性反馈。
|
||||||
- 在这样做时，你需要将技术概念传达给非技术受众。
|
* 在这样做时，您需要向非技术受众传达技术概念。
|
||||||
- 此外，你还征求了他们的反馈意见，以了解工程如何能够更好地合作，避免再次出现这个问题。 这样做， 你定期与他们一起讨论需求或要求的清单，以查看是否可以放弃任何需求以加快工程交付。 此外，你通过提供定期更新，满足了他们对时间轴问责制的需求。
|
* 此外，您向他们征求反馈意见，以了解工程部门如何更好地协作以避免再次出现此问题。 在这样做时，您定期浏览需求或要求的列表，看看是否可以删除任何需求以加快工程交付速度。 此外，您还满足了他们对时间线问责制的需求，提供了定期更新。
|
||||||
|
|
||||||
根据您的情况在具体细节中添加。
|
根据您的情况添加具体细节。
|
||||||
|
|
||||||
#### 情况
|
#### 情境
|
||||||
|
|
||||||
- 在我目前作为开办阶段的前端工程师的工作中，我不得不领导一个非常紧迫的营销项目的发展。 在功能上与营销和设计相交叉。
|
* 在我目前作为一家初创公司的前端工程师的工作中，我必须领导一个高度紧急的营销项目的开发，与营销和设计部门进行跨职能合作。
|
||||||
- 在某种程度上，市场部曾预计该功能将在下周内发货，但由于对合作伙伴的 API 团队的依赖，工程部出现了重大障碍，该团队的交付成果由于最近两名高级成员的离职而被推迟。
|
* 在某个时候，营销部门预计该功能将在下周内发布，但由于依赖于合作伙伴 API 团队，工程部门遇到了重大障碍，该团队的交付由于最近两名高级成员的离职而延迟。
|
||||||
- 这种情况变得更加激烈，因为市场部不理解工程部所面临的障碍。
|
* 这种情况变得激烈，因为营销部门不了解工程部门面临的障碍。
|
||||||
|
|
||||||
#### 任务
|
#### 任务
|
||||||
|
|
||||||
- 我必须解决这个误解，以确保两个团队之间的工作关系顺利。
|
* 我必须解决误解，以确保两个团队之间的工作关系顺利。
|
||||||
|
|
||||||
#### 行动
|
#### 行动
|
||||||
|
|
||||||
- 为了这样做，我私下和市场部谈过，让他们有时间清楚地解释紧迫性以及市场部对工程部可能存在的担忧或误解。
|
* 为了做到这一点，我私下与营销部门进行了交谈，并给他们时间清楚地解释营销部门可能对工程部门的紧迫性、担忧或误解。
|
||||||
- 然后，我解释了合作伙伴团队的作用，特别关注他们对该功能的影响，而不是复杂的技术信息。
|
* 然后，我解释了合作伙伴团队的作用，重点是他们对该功能的影响，而不是复杂的技术信息。
|
||||||
- 在这样做的过程中，我们能够集思广益，想出不同的方法，即使没有外部的依赖性，我们也可以交付这个功能。
|
* 在这样做时，我们能够集思广益，讨论即使没有外部依赖关系，我们也可以发布该功能的各种方法。
|
||||||
- 同时， 我还与伙伴小组的经理谈到该项目对公司的重要性以及重新安排其工作的优先次序以帮助我们解除障碍的可能性。
|
* 与此同时，我还与合作伙伴团队的经理讨论了该项目对公司的重要性以及重新调整其工作优先级的可能性，以帮助我们解除障碍。
|
||||||
- 除此之外，我还征求了关于工程部如何能够更好地与市场部合作的反馈意见，以避免今后发生这种误解。
|
* 除此之外，我还征求了关于工程部门如何更好地与营销部门合作以避免将来出现此类误解的反馈意见。
|
||||||
|
|
||||||
#### 结果
|
#### 结果
|
||||||
|
|
||||||
- 由于工程部和市场部之间的紧密合作，我们能够及时地交付该功能。
|
* 由于工程部门和营销部门之间的紧密合作，我们能够及时发布该功能。
|
||||||
- 随着市场营销对时间表和问责制的优先考虑，我们开始定期提供更新，并讨论了每一个潜在的阻碍因素的替代方案。
|
* 由于营销部门优先考虑时间表和问责制，我们开始提供定期更新，并讨论了每个潜在障碍的替代方案。
|
||||||
- 有了这一点，每项功能都在之后成功地顺利交付。
|
* 这样，此后每个功能都成功顺利地交付了。
|
||||||
|
|
||||||
## 后续问题的可能性质
|
## 可能的后续问题性质
|
||||||
|
|
||||||
正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中所提到的，鼓励面试官更多地依靠后续问题来真正了解候选人的思维过程和动机，这些问题通常属于这些类别：
|
正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中所暗示的那样，鼓励面试官更多地依赖后续问题来真正了解候选人的思维过程和动机，这些通常属于以下类别：
|
||||||
|
|
||||||
- 你为什么认为你做了(行为)？
|
* 你认为你为什么做了（插入动作）？
|
||||||
- 你为什么不做(行为)？
|
* 你为什么没有做（插入动作）？
|
||||||
- 事后看，你会如何以不同的方式做事？
|
* 事后看来，你会如何做不同的事情？
|
||||||
|
|
||||||
对于有关合作的问题，面试官很可能会探询一些问题，以帮助他们了解更多的情况：
|
对于关于协作的问题，面试官很可能会探究问题，以帮助他们更多地了解：
|
||||||
|
|
||||||
- **了解某些利益攸关方是否以及为何参与或不参与**
|
* **了解某些利益相关者是否参与以及原因**
|
||||||
- 哪些利益攸关方参与了讨论，以及为什么？
|
* 哪些利益相关者参与了讨论，为什么？
|
||||||
- 为什么某些利益攸关方如(某某) 被排除在群组之外？
|
* 为什么某些利益相关者（如（插入利益相关者））被排除在小组之外？
|
||||||
- **了解群组动态以及它如何影响处理群组的策略**
|
* **了解群体动态及其如何影响处理该群体的策略**
|
||||||
- 小组中存在哪些个性，它是如何影响动态的？ 这种理解是否影响了你驾驭小组讨论的策略？
|
* 小组中存在哪些个性，它如何影响动态？ 这种理解是否影响了您驾驭小组讨论的策略？
|
||||||
- **理解候选人对冲突的心态**
|
* **了解候选人对冲突的心态**
|
||||||
- 你认为这样的冲突如何影响到工作环境？ 你想要避免他们吗？
|
* 您认为这样的冲突如何影响工作环境？ 您是否更愿意避免它们？
|
||||||
- **了解决议是如何产生的；候选人是否只是服从他人，而不是依赖事实和数据？**
|
* **了解解决方案是如何产生的； 候选人是仅仅听从他人，而不是依赖事实和数据？**
|
||||||
- 在做决定时，是否有任何数据和信息被利用？
|
* 在做出决定时，是否利用了任何数据和信息？
|
||||||
- 是否对每一种解决办法的利弊进行过分析？
|
* 是否对每个解决方案的优缺点进行了分析？
|
||||||
|
|
||||||
## 合作问题和答案示例
|
## 协作示例问题和答案
|
||||||
|
|
||||||
上面的故事样本已经回答了上面的大部分（12 个）例子问题。 需要稍加修改的问题将在下文阐述。 如果你还没有，请查看我们的[面试处置技巧](/behavioral-interview-guidebook)，以增加你给人留下好印象的机会。
|
上面的示例故事已经回答了上面大多数（12 个）示例问题。 需要稍作修改的问题将在下面介绍。 如果您尚未这样做，请查看我们的 [关于面试倾向的提示](/behavioral-interview-guidebook)，以增加您留下良好印象的机会。
|
||||||
|
|
||||||
### 你如何确保你的信息被受众理解并得到很好的接受？
|
### 您如何确保您的信息被受众理解和接受？
|
||||||
|
|
||||||
你可以在回答这个问题时对样本故事稍作修改，重点放在技术信息的解释上：
|
你可以稍微修改一下示例故事来回答这个问题，重点解释技术信息：
|
||||||
|
|
||||||
> 为了确保我的信息被充分理解，在解释之后，我会提供一些例子来说明我的观点，同时也会向听众提出一些问题，以确认他们的理解。 在我几个月前做的一个项目中，我不得不向业务团队解释为什么一个紧急功能被外部团队的 API 延迟了，以及如何延迟的。 为了做到这一点，我把重点放在企业需要的关键收获上--也就是该功能是如何被这种延迟所影响的，并利用视觉辅助工具以及使用简单清晰的语言。 我还举了一些例子，同时提出问题以确定他们对我的解释的理解。 这使得业务团队能够很好地理解依赖性，从而集思广益，即使没有外部依赖，也能够交付功能。
|
> 为了确保我的信息被很好地理解，在解释之后，我将提供一些例子来说明我的观点，并向听众提出一些问题来确认他们的理解。 在几个月前的一个项目中，我不得不向业务团队解释为什么以及如何由于外部团队的 API 延迟而导致紧急功能被延迟。 为此，我重点关注了业务团队需要了解的关键内容——即该功能如何受到这种延迟的影响，并利用视觉辅助工具以及简单明了的语言。 我还举例说明，同时提出问题以确定他们对我的解释的理解程度。 这使得业务团队能够很好地理解依赖关系，从而即使没有依赖关系，也能集思广益地交付该功能。
|
||||||
|
|
||||||
### 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
|
### 你如何与未能按时完成任务或履行职责的队友一起工作？
|
||||||
|
|
||||||
> 一旦发现他们的行为可能构成一种令人担忧的模式，我会及时让他们知道。 例如，我在一个项目中的一个队友经常错过修复错误的时间，一旦发生了多次，我就安排与他私下会面，与他们讨论这个问题。 我把重点放在把谈话框定在对他来说是一个成长的机会，在他们已经被赞赏的基础上，也就是他作为一个高级开发人员的知识和指导作用。 而不是描述诸如“过迟”之类的一般行为，我提到了被遗漏的具体票据和遗漏票据所产生的影响，以及对团队士气的影响。 然后我提供了一些解决方案，例如在渠道内为即将到期的票据制定一个新的提醒机器人。 他能够理解我的想法，在那之后，我们的团队能够更好地满足我们的最后期限。
|
> 一旦明确他们的行为可能构成令人担忧的模式，我就会及时让他们知道。 例如，我有一个项目团队成员经常错过修复错误的期限，一旦发生多次，我就会安排与他进行私人会议，与他们谈论此事。 我侧重于将谈话框定为他在他已经受到赞赏的方面（即他作为高级开发人员的知识和指导）之上的一个成长机会。 我没有描述诸如“迟到”之类的普遍行为，而是提到了错过的具体票证以及错过它们所产生的影响，以及它对团队士气的影响。 然后，我提供了一些解决方案，例如在渠道内制定一个新的提醒机器人，用于即将到期的票证。 他能够理解我的出发点，并且在那之后，我们的团队能够更好地按时完成任务。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "4be5734f",
|
||||||
|
"description": "a0cbee39",
|
||||||
|
"seo_title": "59bc08de",
|
||||||
|
"seo_description": "37a2958a",
|
||||||
|
"social_title": "ebca470b"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"94995da9",
|
||||||
|
"e3e74d45",
|
||||||
|
"1da50bd5",
|
||||||
|
"22934b89",
|
||||||
|
"cf56d450",
|
||||||
|
"30d20fe",
|
||||||
|
"5f3ec4ef",
|
||||||
|
"3282dad3",
|
||||||
|
"ef3cbb47",
|
||||||
|
"74535a44",
|
||||||
|
"91fbdfb4",
|
||||||
|
"c2710b5",
|
||||||
|
"1a8a698b",
|
||||||
|
"bd456ea8",
|
||||||
|
"f6bafdb3",
|
||||||
|
"f7c2150b",
|
||||||
|
"25da941b",
|
||||||
|
"7f59658a",
|
||||||
|
"ff3ffa0d",
|
||||||
|
"55d93ebf",
|
||||||
|
"779695ae",
|
||||||
|
"fc118514",
|
||||||
|
"3806bdb5",
|
||||||
|
"7ac75694",
|
||||||
|
"27617dea",
|
||||||
|
"31276d96",
|
||||||
|
"9f1726c5",
|
||||||
|
"10099f1e",
|
||||||
|
"b234533b",
|
||||||
|
"27d3bc20",
|
||||||
|
"2274d67f",
|
||||||
|
"7ceacd8c",
|
||||||
|
"ad0bed10"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"94995da9",
|
||||||
|
"e3e74d45",
|
||||||
|
"1da50bd5",
|
||||||
|
"22934b89",
|
||||||
|
"cf56d450",
|
||||||
|
"30d20fe",
|
||||||
|
"5f3ec4ef",
|
||||||
|
"3282dad3",
|
||||||
|
"ef3cbb47",
|
||||||
|
"74535a44",
|
||||||
|
"91fbdfb4",
|
||||||
|
"c2710b5",
|
||||||
|
"1a8a698b",
|
||||||
|
"bd456ea8",
|
||||||
|
"f6bafdb3",
|
||||||
|
"f7c2150b",
|
||||||
|
"25da941b",
|
||||||
|
"7f59658a",
|
||||||
|
"ff3ffa0d",
|
||||||
|
"55d93ebf",
|
||||||
|
"779695ae",
|
||||||
|
"fc118514",
|
||||||
|
"3806bdb5",
|
||||||
|
"7ac75694",
|
||||||
|
"27617dea",
|
||||||
|
"31276d96",
|
||||||
|
"9f1726c5",
|
||||||
|
"10099f1e",
|
||||||
|
"b234533b",
|
||||||
|
"27d3bc20",
|
||||||
|
"2274d67f",
|
||||||
|
"7ceacd8c",
|
||||||
|
"ad0bed10"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,129 +1,132 @@
|
||||||
---
|
---
|
||||||
title: 回答 "告诉我什么时候...... "的成长心态
|
title: 回答成长型思维行为问题
|
||||||
description: 学习如何回答关于成长心态的行为问题，针对前端/网络开发者/软件工程师。 参考样本答案。
|
description: 了解如何回答“告诉我一个时间……”风格的问题，以评估您是否具有强大的成长型思维。
|
||||||
|
seo_title: 成长型思维问题 | 行为面试手册
|
||||||
|
seo_description: 了解如何回答成长型思维行为面试问题，适用于前端工程师。参考示例答案。
|
||||||
|
social_title: 成长型思维行为问题 | GreatFrontEnd
|
||||||
---
|
---
|
||||||
|
|
||||||
正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**成长心态**是需要准备的 8 大类问题中的一类。
|
正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，**成长型思维**是准备的 8 个主要问题类别之一。
|
||||||
|
|
||||||
在本指南中，您将学习如何处理这些问题：
|
在本指南中，您将学习如何解决它们：
|
||||||
|
|
||||||
1. 详细的评价标准
|
1. 详细的评估标准
|
||||||
2. 将可能的问题抽象为共同的主题
|
2. 将可能的问题抽象成共同主题
|
||||||
3. 建议的答案框架
|
3. 建议的答案框架
|
||||||
4. 问题和回答示例
|
4. 示例问题和答案
|
||||||
|
|
||||||
## 详细的评价标准
|
## 详细的评估标准
|
||||||
|
|
||||||
在对这一类别的候选人进行评级时，面试者常常考虑以下标准：
|
在对该类别下的候选人进行评分时，面试官通常会关注以下标准：
|
||||||
|
|
||||||
- 对优势和发展领域有自我意识。
|
* 了解自己的优势和发展领域。
|
||||||
- 积极征求他人的反馈意见，并创建反馈循环。
|
* 积极征求他人的反馈并创建反馈循环。
|
||||||
- 很好地利用反馈和挫折，把它们看作是机会。
|
* 很好地接受反馈和挫折，将其视为机会。
|
||||||
- 对失败承担个人责任。
|
* 对失败承担个人责任。
|
||||||
- 反思、示范最佳做法并将经验教训应用于新的情况。
|
* 反思、建模最佳实践并将经验教训应用于新情况。
|
||||||
- 通过设定和努力实现具有挑战性的目标而感到兴奋。
|
* 对设定和努力实现具有挑战性的目标充满活力。
|
||||||
- 积极学习新技能并应用于工作。
|
* 积极学习新技能并应用于工作。
|
||||||
|
|
||||||
## 抽象成长心态问题
|
## 抽象成长型思维问题
|
||||||
|
|
||||||
### 常见问题
|
### 常见问题
|
||||||
|
|
||||||
- 你认为最大的改进领域是什么？
|
* 您认为自己最大的改进领域是什么？
|
||||||
- 你能告诉我一个你在收到批评或反馈后改进工作的例子吗?
|
* 您能否告诉我您在收到批评或反馈后改进工作的经历？
|
||||||
- 告诉我一个你为自己设定一个困难目标并实现了它的例子。
|
* 告诉我您为自己设定了一个困难的目标并实现了它的经历。
|
||||||
- 告诉我一个你在工作之外学习了新技能并将其应用到你的工作中的例子。
|
* 告诉我您在工作之外学习了一项新技能并将其应用于工作的经历。
|
||||||
- 告诉我你在观察其他人利用它取得巨大成功后学习了一项新技能的情况。
|
* 告诉我您在观察他人利用它取得巨大成功后学习了一套新技能的经历。
|
||||||
- 您如何不断更新最新的前端技术和技巧？
|
* 您如何及时了解最新的前端技术和技术？
|
||||||
- 你能提供一个例子说明你不得不适应一个新的技术环境或框架？
|
* 您能否提供一个您必须适应新的技术环境或框架的例子？
|
||||||
- 想象一下你需要实现一个你没有太多经验的新系统。 你会采取哪些措施来收集资料并确保成功执行？
|
* 假设您需要实施一个您没有太多经验的新系统。您采取哪些步骤来收集信息并确保成功执行？
|
||||||
|
|
||||||
### 确定的主题
|
### 确定的主题
|
||||||
|
|
||||||
正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为类似的主题，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。
|
正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，为每个现有的行为问题专门准备答案是不切实际的。但是，通过将特定问题归入类似的主题并准备涵盖大量问题要求的故事情节，我们可以将要准备的故事数量减少到大约 3-5 个故事。
|
||||||
|
|
||||||
这些是似乎反复出现的主题：
|
这些是似乎反复出现的主题：
|
||||||
|
|
||||||
- 接收和管理反馈信息。
|
* 接收和管理反馈。
|
||||||
- 对挑战和扩展目标的心态。
|
* 对待挑战和具有挑战性的目标的思维方式。
|
||||||
- 持续学习
|
* 持续学习。
|
||||||
|
|
||||||
## 建议的答案框架
|
## 建议的答案框架
|
||||||
|
|
||||||
一如既往，[STAR 法则](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
|
与往常一样，[STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique)是我们推荐用于构建故事的最简单、最有效的框架。
|
||||||
|
|
||||||
以下是我们为每个已确定的主题推荐的方法，你可以用这些方法构建你的故事：
|
以下是我们为每个已确定的主题推荐的方法，您可以使用这些方法来构建您的故事：
|
||||||
|
|
||||||
### 接受和管理反馈/挫折
|
### 接收和管理反馈/挫折
|
||||||
|
|
||||||
1. 在可能的情况下，积极征求他人的反馈意见，例如在每个大型项目之后。
|
1. 尽可能积极地征求他人的反馈，例如在每个大型项目之后。
|
||||||
2. 对错误承担个人责任，并制定一个行动计划来解决这些问题。
|
2. 对错误承担个人责任，并制定行动计划来解决这些错误。
|
||||||
3. 对反馈/挫折抱有健康的心态。
|
3. 对反馈/挫折保持健康的思维模式
|
||||||
1. 把它们视作提升自己的机会
|
1. 将它们视为提高自己的机会
|
||||||
2. 注重建设性和解决办法而不是情绪驱动的解决办法。
|
2. 专注于建设性和以解决方案为导向，而不是情绪驱动。
|
||||||
4. 采取措施反思过去的经验，以便对最佳实践进行建模，并在下一个相关情况下将其付诸实践。
|
4. 采取措施反思过去的经验，以便为最佳实践建模，并在下一个相关情况下将它们付诸行动。
|
||||||
|
|
||||||
### 对挑战和扩展目标的心态。
|
### 对待挑战/拓展目标的思维模式
|
||||||
|
|
||||||
1. 从设定和努力实现扩展目标中获得能量，将其视为成长的机会。
|
1. 从设定和努力实现拓展目标中获得能量，将它们视为成长的机会。
|
||||||
2. 在贯彻执行详细计划方面表现出一致性和纪律性。
|
2. 在执行详细计划时表现出一致性和纪律性。
|
||||||
|
|
||||||
### 持续学习
|
### 持续学习
|
||||||
|
|
||||||
一个好的答案是结合一致的时间表和对学习的努力，以及如何积极主动地将学习应用于工作。 例如：“我了解了 X，因为我在做 Y。 这影响了我在工作中处理 Z 问题的方式，因为这使我意识到 W 和 V”。
|
一个好的答案结合了持续的时间表和投入到学习中的努力，以及如何主动将学习应用于工作。例如：“我学习了 X，因为我做了 Y。这影响了我处理工作中的 Z 的方式，因为它让我意识到 W 和 V”。
|
||||||
|
|
||||||
以下几点是你可以围绕技术学习构建答案的关键想法；但是，你仍然应该加入你实际参与过的活动、通讯或社区的具体例子，以展示你紧跟潮流的意愿。
|
以下几点是您可以围绕技术学习构建答案的关键想法；但是，您仍然应该添加您实际参与的活动、新闻通讯或社区的具体示例，以展示您紧跟潮流的意愿。
|
||||||
|
|
||||||
1. 关注涵盖前端技术和技技巧最新发展的相关博客、新闻通讯和播客。 给出一些例子（你确实关注了的）以及他们提供的内容或技术。
|
1. 关注涵盖前端技术和技术的最新发展的相关博客、新闻通讯、播客。举一些例子（您实际关注的）以及它们提供的内容或技术。
|
||||||
1. 推特影响者
|
1. Twitter 影响者
|
||||||
1. [Dan Abramov](https://twitter.com/dan_abramov) — Redux 的共同创造者，React 核心团队。
|
1. [Dan Abramov](https://twitter.com/dan_abramov) — Redux 联合创始人，React 核心团队。
|
||||||
2. [Evan You](https://twitter.com/youyuxi) — Vue.js 和 Vite 的创建者。
|
2. [Evan You](https://twitter.com/youyuxi) — Vue.js 和 Vite 的创建者。
|
||||||
3. [Rich Harris](https://twitter.com/Rich_Harris) — Svelte 和 Rollup 的创作者。
|
3. [Rich Harris](https://twitter.com/Rich_Harris) — Svelte 和 Rollup 的创建者。
|
||||||
4. [Kent C. Dodds](https://twitter.com/kentcdodds) — Popular React 生态系统课程创建者。
|
4. [Kent C. Dodds](https://twitter.com/kentcdodds) — 热门 React 生态系统课程创建者。
|
||||||
5. [Josh W. Comeau](https://twitter.com/JoshWComeau) — 流行前端课程创建者。
|
5. [Josh W. Comeau](https://twitter.com/JoshWComeau) — 热门前端课程创建者。
|
||||||
2. 博客和杂志
|
2. 博客和杂志
|
||||||
1. [CSS-Tricks](https://css-tricks.com/)
|
1. [CSS-Tricks](https://css-tricks.com/)
|
||||||
2. [ui.dev](https://ui.dev/)
|
2. [ui.dev](https://ui.dev/)
|
||||||
3. [JavaScript Weekly](https://javascriptweekly.com/)
|
3. [JavaScript Weekly](https://javascriptweekly.com/)
|
||||||
4. [Best of JavaScript](https://bestofjs.org/)
|
4. [Best of JavaScript](https://bestofjs.org/)
|
||||||
3. 播客
|
3. 播客
|
||||||
1. [Syntax](https://syntax.fm/)
|
1. [Syntax](https://syntax.fm/)
|
||||||
2. [JS Party](https://changelog.com/jsparty)
|
2. [JS Party](https://changelog.com/jsparty)
|
||||||
3. [The Changelog](https://changelog.com/podcast)
|
3. [The Changelog](https://changelog.com/podcast)
|
||||||
2. 参加技术会议和聚会，学习新的发展，建立网络，并获得最新工具和技术的实践经验。
|
2. 参加技术会议和聚会，学习新的发展，建立人脉，并获得最新工具和技术的实践经验。
|
||||||
3. 使用最新技术和技巧实验和构建项目。 这可能需要自行构建小型项目或帮助开源项目。
|
3. 使用最新的技术和技术进行实验和构建项目。这可能涉及自己构建小型项目或为开源项目做出贡献。
|
||||||
4. 通过参与在线论坛，关注相关的 Twitter 账户和标签，以及加入当地的用户组或聚会，与更广泛的前端开发社区保持联系。
|
4. 通过参与在线论坛、关注相关的 Twitter 帐户和标签，以及加入当地用户组或聚会，与更广泛的前端开发社区保持互动。
|
||||||
|
|
||||||
## 问题和答案
|
## 示例问题和答案
|
||||||
|
|
||||||
### 您如何不断更新最新的前端技术和技巧？
|
### 您如何及时了解最新的前端技术和技术？
|
||||||
|
|
||||||
> 过去两年来我一直在一家大型科技公司工作，该公司将外部和内部技术混合用于我们的前端堆栈。 因为我们有一个巨大的代码库和既定的做事方法，所以我们往往不会经常升级库和改变我们的技术选择。 工作一年后，我才意识到，我在自己的岗位上太舒服了，因为我已经完全夯实了代码基础，在过去一年里没有学到任何新东西。 就在那时，我决定我必须积极主动地学习，以保持我的技能的敏锐性和相关性。
|
> 在过去的两年里，我一直在一家大型科技公司工作，该公司使用外部和内部技术的混合来构建我们的前端堆栈。由于我们拥有庞大的代码库和既定的做事方式，我们倾向于不经常升级库和更改我们的技术选择。直到工作一年后，我才意识到我一直对自己的角色感到太舒服了，因为我已经完全掌握了代码库，并且在过去的一年里没有学到任何新东西。正是在那时，我决定必须积极主动地学习，以保持我的技能敏锐和相关。
|
||||||
>
|
>
|
||||||
> 前端生态系统发展得非常快，有一个笑话说每天都有新的 JavaScript 库出现。 值得庆幸的是，与 2015/2016 年新一波前端工具首次出现时相比，现在的生态系统更加稳定。 为了让自己保持更新而不受 JavaScript 疲劳之苦， 我每个月都会花一个周末浏览前端新闻通讯，如“React 中的这个星期”和“JavaScript 周刊”，并阅读工程博客。 如果我看到有趣的东西或与我的工作有关，我会通过尝试小的例子和在我公司的代码库中建立小的原型来深入研究它们。 例如，我最近发现了 React Query，它是 React 的一个数据获取库，使用声明式范式来获取数据，并试图将其纳入我的工作中。 我最近还发现了 tRPC，一个在客户端和服务器边界之间执行类型安全的库，这是一个给我们带来一些错误的问题。
|
> 前端生态系统发展非常快，有一个笑话是每天都会出现一个新的 JavaScript 库。值得庆幸的是，与 2015/2016 年首次出现新一波前端工具时相比，生态系统更加稳定。为了让自己保持更新，而不会遭受 JavaScript 疲劳，我每个月都会花一个周末浏览前端新闻通讯，例如“本周 React”和“JavaScript Weekly”，并阅读工程博客。如果我看到一些有趣或与我的工作相关的内容，我将通过尝试小例子并在我公司的代码库中构建小型原型来更深入地研究它们。例如，我最近发现了 React Query，这是一个用于 React 的数据获取库，它使用声明式范例来获取数据，并且正在尝试将其整合到我的工作中。我还最近发现了 tRPC，这是一个在客户端和服务器边界之间强制类型安全的库，这个问题给我们带来了一些错误。
|
||||||
>
|
>
|
||||||
> 为了使学习过程更加有趣和协作，我在公司内创建了一个前端社交俱乐部，创建了一个新的 Slack 频道，并邀请了一些志同道合的同事加入。 任何人都可以在那里分享他们认为有趣的前端新闻并讨论前端技术。 它的反响相当好，目前有 30 多人在这个频道，几乎每天都有活动。 这项举措的一个副作用是，人们也开始就他们在工作中面临的前端问题提出问题。 我们创建了另一个 Slack 渠道，让人们在前端问题上获得帮助。 反馈迄今确实是正面的！
|
> 为了让这个学习过程更有趣和协作性，我通过创建一个新的 Slack 频道并邀请一些志同道合的同事加入，在我公司内部创建了一个前端社交俱乐部。任何人都可以分享他们认为有趣的前端新闻并在那里讨论前端技术。它受到了很好的欢迎，目前频道中有 30 多人，几乎每天都有活动。这项计划的一个副作用是，人们也开始询问他们工作中遇到的前端问题，我们创建了另一个 Slack 频道，供人们获得有关前端问题的帮助。到目前为止，反馈一直非常积极！
|
||||||
|
|
||||||
这个答案以一种微妙的方式使用了 STAR 技术，并展示了面试官希望在候选人身上看到的许多品质：
|
这个答案以一种微妙的方式使用了 STAR 技术，并展示了面试官希望在候选人身上看到许多品质：
|
||||||
|
|
||||||
- **激情**：热衷于学习更多关于前端领域的知识。
|
* **热情**：渴望了解更多关于前端领域的信息。
|
||||||
- **成长**：确定了缺乏成长将是一个问题。
|
* **成长**：确定缺乏成长会成为一个问题。
|
||||||
- **倡议**：对缺乏增长的问题采取了行动。
|
* **主动性**：针对缺乏成长的问题采取行动。
|
||||||
- **问题解决**：想出解决缺乏成长的方法，并付诸行动。
|
* **解决问题**：思考解决缺乏成长的方法，并执行。
|
||||||
- **建立友情**：为了一个共同的目标，召集志同道合的人。
|
* **建立友情**：团结志同道合的人为共同的事业而奋斗。
|
||||||
- **帮助提升他人**：创建 Slack 频道，分享知识和支持他人。
|
* **帮助改善他人**：创建 Slack 频道以分享知识和支持他人。
|
||||||
|
|
||||||
### 你能提供一个例子说明你不得不适应一个新的技术环境或框架？
|
### 您能否提供一个您必须适应新的技术环境或框架的例子？
|
||||||
|
|
||||||
> 当我在 2019 年加入现在的公司时，我刚从大学毕业，对公司使用的前端堆栈没有经验，他们的前端堆栈使用 React、Apollo、Styled Components、TypeScript，后端使用 Django + GraphQL。 在大学时，我主要使用 Vue.js 进行前端开发，因为它是 web 开发课上教授的 JavaScript 框架的首选，之前没有使用过 GraphQL。
|
> 当我于 2019 年加入我现在的公司时，我刚从大学毕业，对公司正在使用的前端堆栈一无所知，该公司使用 React、Apollo、Styled Components、TypeScript 作为其前端堆栈，并使用 Django + GraphQL 作为后端。在大学时，我主要使用 Vue.js 进行前端开发，因为它是网络开发课程中选择的 JavaScript 框架，并且以前从未使用过 GraphQL。
|
||||||
>
|
>
|
||||||
> 一开始，这对我来说绝对是一个巨大的学习曲线，我真的害怕由于对技术栈的不熟悉而表现不佳。 值得庆幸的是，我有一个导师，他在技术堆栈方面给了我很多指导，并提出了一些入职任务，这些任务逐渐变得越来越难。 我第一次花了几天时间阅读技术的文档网站，并试用他们网站上的例子。 我特意去了解这些库所解决的问题，以及它们是如何比现有技术更好的，因为我认为了解这些对充分欣赏库和使用正确的工具进行正确的工作是很重要的。 我还寻找了一些将 Vue.js 与 React 相比较的资源，因为它们非常类似，但有一些差异。 这有助于我更快地了解 React(虽然完全掌握 React 钩子还是花了我一些时间)。 当我在晚上或周末有时间时，我会探索使用这些新技术建立小项目，也会使用 Gatsby 重建我的个人博客（因为它同时使用 React 和 GraphQL）。
|
> 对我来说，一开始绝对是一个巨大的学习曲线，由于我对技术堆栈不熟悉，我真的很害怕表现不佳。值得庆幸的是，我有一位导师，他在技术堆栈方面给了我很多指导，并提出了一些逐渐变得更难的入职任务。我首先花几天时间阅读这些技术的文档网站，并在他们的网站上试用示例。我把它作为重点来理解这些库正在解决的问题以及它们如何优于现有技术，因为我认为了解这一点对于充分欣赏该库并为正确的工作使用正确的工具非常重要。我还查阅了一些将 Vue.js 与 React 进行比较的资源，因为它们非常相似，但也有一些差异。这帮助我更快地学习 React（尽管完全掌握 React 钩子仍然花了我一些时间）。当我在晚上或周末有时间时，我会探索使用这些新技术构建小型项目，并使用 Gatsby 重建我的个人博客（因为它同时使用了 React 和 GraphQL）。
|
||||||
>
|
>
|
||||||
> 在两个月内，我觉得自己学到了很多东西，对大部分的代码库都很熟悉。 我可以在没有导师指导的情况下建立端到端的功能。 为了帮助未来可能面临同样入职挑战的新员工，我在我们的内部维基中记下了我的学习成果，以及学习该主题的最佳资源链接。 我的经理对这一举措感到惊讶，并为此表扬了我。 今天，它是我们官方工程入职资源的一部分，我每隔一段时间就会更新它。 一些新加入者还感谢我我在维基上分享的知识，并使他们的入职过程更加顺利。
|
> 在两个月内，我觉得我学到了很多东西，并且对大部分代码库感到满意。我可以在没有导师太多指导的情况下构建端到端的功能。为了帮助未来可能面临相同入职挑战的新员工，我将我的学习记录在我们的内部 wiki 中，并附上了一些用于学习该主题的最佳资源的链接。我的经理对这项主动性感到惊讶，并为此表扬了我。今天，它已成为我们官方的工程入职资源的一部分，我时不时地更新它。一些新加入者也感谢我在 wiki 中分享我的知识并使他们的入职过程更顺畅。
|
||||||
|
|
||||||
对答案的分析：
|
答案分析：
|
||||||
|
|
||||||
- **可辅导的**：遵从导师的指导/建议。
|
* **可指导**：遵循导师的指导/建议。
|
||||||
- **问题解决**：想出了一些方法来帮助他们更快地上岗。
|
* **解决问题**：想出了一些方法来帮助自己更快地入职。
|
||||||
- **主动性**：主动启动维基。
|
* **主动性**：启动 wiki 的主动性。
|
||||||
- **同理心**：看到其他人可能面临同样的问题并启动了 wiki。
|
* **同理心**：看到其他人可能面临相同的问题并启动了 wiki。
|
||||||
- **帮助提升他人**：新加入者从维基中受益。
|
* **帮助改善他人**：新加入者受益于 wiki。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,186 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "4617f06d",
|
||||||
|
"description": "7943bb42",
|
||||||
|
"seo_title": "d05dcc71",
|
||||||
|
"social_title": "d80461ec",
|
||||||
|
"seo_description": "1d73abcf"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"d69bf5a",
|
||||||
|
"2589d6c0",
|
||||||
|
"8ff69314",
|
||||||
|
"dbff582d",
|
||||||
|
"647b765e",
|
||||||
|
"36f069b9",
|
||||||
|
"d65dfdbf",
|
||||||
|
"51c65a99",
|
||||||
|
"f2b57489",
|
||||||
|
"ff91322c",
|
||||||
|
"34ead88e",
|
||||||
|
"bd006acd",
|
||||||
|
"4872f499",
|
||||||
|
"154000a3",
|
||||||
|
"904ad9cb",
|
||||||
|
"c84a600e",
|
||||||
|
"ee02e149",
|
||||||
|
"80a251c",
|
||||||
|
"c37bb57c",
|
||||||
|
"c11cee6e",
|
||||||
|
"913a8b08",
|
||||||
|
"f3d74108",
|
||||||
|
"89542105",
|
||||||
|
"1c13e511",
|
||||||
|
"1180e08",
|
||||||
|
"9d1ba802",
|
||||||
|
"c558e06f",
|
||||||
|
"63b64124",
|
||||||
|
"b0f73bf4",
|
||||||
|
"df108c8b",
|
||||||
|
"fb529cb",
|
||||||
|
"42bfe402",
|
||||||
|
"ddfa57f3",
|
||||||
|
"437907cc",
|
||||||
|
"df1e8198",
|
||||||
|
"8060798f",
|
||||||
|
"b378b240",
|
||||||
|
"d6e6a4b5",
|
||||||
|
"15372437",
|
||||||
|
"b5b6df43",
|
||||||
|
"f98af47f",
|
||||||
|
"ed10d92e",
|
||||||
|
"1a998640",
|
||||||
|
"9b4550c7",
|
||||||
|
"f1b4c45f",
|
||||||
|
"b84c79db",
|
||||||
|
"5da98e7c",
|
||||||
|
"2e0d6b84",
|
||||||
|
"3d06e73d",
|
||||||
|
"c6e0bd60",
|
||||||
|
"833146e3",
|
||||||
|
"176a21b7",
|
||||||
|
"37f87e9f",
|
||||||
|
"9894bdac",
|
||||||
|
"6be0af14",
|
||||||
|
"fafb0b1e",
|
||||||
|
"405448ca",
|
||||||
|
"845f7b54",
|
||||||
|
"d37f7719",
|
||||||
|
"bdaf5e0",
|
||||||
|
"78b74f1",
|
||||||
|
"1fff8c49",
|
||||||
|
"7857b1bb",
|
||||||
|
"5a595fe5",
|
||||||
|
"b942362b",
|
||||||
|
"c36bdde0",
|
||||||
|
"5b9dd803",
|
||||||
|
"7694c6b7",
|
||||||
|
"f02e9e24",
|
||||||
|
"d8a415f5",
|
||||||
|
"f68f4ae7",
|
||||||
|
"da4055f4",
|
||||||
|
"bb7c4a7d",
|
||||||
|
"5eb07228",
|
||||||
|
"c8095f5e",
|
||||||
|
"6aa75a6f",
|
||||||
|
"4dfe624a",
|
||||||
|
"34a2cb41",
|
||||||
|
"19ece7e1",
|
||||||
|
"9af4343b",
|
||||||
|
"e201f1d2",
|
||||||
|
"3ac7ebb1",
|
||||||
|
"8ec4aae8"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"d69bf5a",
|
||||||
|
"2589d6c0",
|
||||||
|
"8ff69314",
|
||||||
|
"dbff582d",
|
||||||
|
"647b765e",
|
||||||
|
"36f069b9",
|
||||||
|
"d65dfdbf",
|
||||||
|
"51c65a99",
|
||||||
|
"f2b57489",
|
||||||
|
"ff91322c",
|
||||||
|
"34ead88e",
|
||||||
|
"bd006acd",
|
||||||
|
"4872f499",
|
||||||
|
"154000a3",
|
||||||
|
"904ad9cb",
|
||||||
|
"c84a600e",
|
||||||
|
"ee02e149",
|
||||||
|
"80a251c",
|
||||||
|
"c37bb57c",
|
||||||
|
"c11cee6e",
|
||||||
|
"913a8b08",
|
||||||
|
"f3d74108",
|
||||||
|
"89542105",
|
||||||
|
"1c13e511",
|
||||||
|
"1180e08",
|
||||||
|
"9d1ba802",
|
||||||
|
"c558e06f",
|
||||||
|
"63b64124",
|
||||||
|
"b0f73bf4",
|
||||||
|
"df108c8b",
|
||||||
|
"fb529cb",
|
||||||
|
"42bfe402",
|
||||||
|
"ddfa57f3",
|
||||||
|
"437907cc",
|
||||||
|
"df1e8198",
|
||||||
|
"8060798f",
|
||||||
|
"b378b240",
|
||||||
|
"d6e6a4b5",
|
||||||
|
"15372437",
|
||||||
|
"b5b6df43",
|
||||||
|
"f98af47f",
|
||||||
|
"ed10d92e",
|
||||||
|
"1a998640",
|
||||||
|
"9b4550c7",
|
||||||
|
"f1b4c45f",
|
||||||
|
"b84c79db",
|
||||||
|
"5da98e7c",
|
||||||
|
"2e0d6b84",
|
||||||
|
"3d06e73d",
|
||||||
|
"c6e0bd60",
|
||||||
|
"833146e3",
|
||||||
|
"176a21b7",
|
||||||
|
"37f87e9f",
|
||||||
|
"9894bdac",
|
||||||
|
"6be0af14",
|
||||||
|
"fafb0b1e",
|
||||||
|
"405448ca",
|
||||||
|
"845f7b54",
|
||||||
|
"d37f7719",
|
||||||
|
"bdaf5e0",
|
||||||
|
"78b74f1",
|
||||||
|
"1fff8c49",
|
||||||
|
"7857b1bb",
|
||||||
|
"5a595fe5",
|
||||||
|
"b942362b",
|
||||||
|
"c36bdde0",
|
||||||
|
"5b9dd803",
|
||||||
|
"7694c6b7",
|
||||||
|
"f02e9e24",
|
||||||
|
"d8a415f5",
|
||||||
|
"f68f4ae7",
|
||||||
|
"da4055f4",
|
||||||
|
"bb7c4a7d",
|
||||||
|
"5eb07228",
|
||||||
|
"c8095f5e",
|
||||||
|
"6aa75a6f",
|
||||||
|
"4dfe624a",
|
||||||
|
"34a2cb41",
|
||||||
|
"19ece7e1",
|
||||||
|
"9af4343b",
|
||||||
|
"e201f1d2",
|
||||||
|
"3ac7ebb1",
|
||||||
|
"8ec4aae8"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,242 +1,245 @@
|
||||||
---
|
---
|
||||||
title: 行为面试-综述与准备指南
|
title: 前端工程师行为面试指南
|
||||||
description: 前端/网络开发人员/软件工程师的行为面试指南，由FAANG的前面试官撰写。 了解大科技公司的评估标准，准备的有效策略，以及顶级行为面试问题。
|
description: 了解大科技公司的评估标准、高效的准备策略以及顶级的行为面试问题。
|
||||||
|
seo_title: 行为面试指南 | 针对前端工程师
|
||||||
|
social_title: 前端工程师行为面试指南 | GreatFrontEnd
|
||||||
|
seo_description: 前端工程师行为面试的权威指南。由前 FAANG 面试官撰写。了解期望和准备方法。
|
||||||
---
|
---
|
||||||
|
|
||||||
行为面试是面试中最被忽视的环节之一，特别是对于软件工程师的面试。 技术面试非常复杂，并需要大量的时间进行准备，然而行为面试的重要性却不容小觑。
|
行为面试是最容易被忽视的面试环节之一，尤其是在软件工程师面试中。虽然技术面试很复杂，需要花费大量时间准备，但行为面试的重要性怎么强调都不为过。
|
||||||
|
|
||||||
然而，准备行为面试时面临的一些常见挑战有：
|
然而，在准备行为面试时，会遇到一些常见的挑战：
|
||||||
|
|
||||||
1. 如何准备面试的各种问题？由于面试官可以问任何他们想要问的问题，因此准备任何行为问题都是不可能的。 但是，我们可以将常见的问题分类为几个主题，并采用方法论来解决它们。
|
1. **当可能出现如此多不同类型的问题时，如何准备？** 确实，不可能完全准备好可能出现的任何行为问题，因为面试官可以问任何他们想问的问题。但是，我们可以将最常见的问题归类为几个主要主题，并以系统的方式解决它们。
|
||||||
2. 如何展现自己的"适应性"？许多候选人在面试时都难以让自己显得可爱，并与面试官取得联系。 我们将根据我们的经验提供一些应对策略。
|
2. **展示“契合度”的最佳方式是什么？** 许多候选人在面试环境中难以表现得令人喜欢，也难以与面试官建立联系。我们将根据我们的经验，介绍一些解决此问题的技巧。
|
||||||
|
|
||||||
本文将介绍：
|
在本文中，我们将介绍：
|
||||||
|
|
||||||
1. 行为面试信号和评估标准。
|
1. 行为面试信号和评估标准。
|
||||||
2. 推荐的准备策略。
|
2. 推荐的准备策略。
|
||||||
3. 如何在实际面试中展现自己。
|
3. 在实际面试中表现自己的最佳方式。
|
||||||
|
|
||||||
## 行为面试信号和评估标准
|
## 行为面试信号和评估标准
|
||||||
|
|
||||||
在大型科技公司进行结构化行为面试时，面试官通常接受特定方式的行为面试培训。
|
在进行结构化行为面试的大型科技公司中，面试官通常会接受特定方式的培训以进行行为面试。
|
||||||
|
|
||||||
他们会提供具体的指南，包括：
|
他们会获得具体的指导方针，通常包括：
|
||||||
|
|
||||||
1. 评估标准：通常分为特定的主要类别，如沟通、主动性等，需要他们对候选人进行评估。 每个类别通常还包括有关如何将候选人评为好、差、一般等的具体指导。
|
1. **评估标准**：通常分为几个主要类别，例如沟通、主动性等，他们需要在这些方面对候选人进行评估。每个类别通常还包括关于如何将候选人评为好、差、一般等的具体指导。
|
||||||
2. 级别期望：面试官通常被要求在面试完候选人后提供期望级别。 为确保面试官之间的一致性，还提供了级别指南。
|
2. **级别期望**：面试官通常被要求在面试完候选人后提供一个期望的级别。为了确保面试官之间的一致性，还会提供一个级别指南。
|
||||||
|
|
||||||
以下是典型的行为面试评估标准和大多数公司的典型级别期望。 推荐的准备策略提供了基于这些标准如何进行准备的建议。
|
下面，我们介绍了典型的行为面试评估标准以及大多数公司的典型级别期望。推荐的准备策略提供了关于您如何根据这些标准进行准备的建议。
|
||||||
|
|
||||||
### 面试官的角度
|
### 面试官的视角
|
||||||
|
|
||||||
行为面试官通常需要对几个广泛的类别，如合作、积极性等进行评分。 对于每个评估类别，他们会提供有关好评或差评的标准。 评级通常采用 5 分评级尺度，例如非常好/好/达标/差/非常差之一。
|
行为面试官通常需要对几个广泛的类别进行评分，例如协作、主动性等。对于每个评估类别，他们都会获得标准，以确定什么构成良好或不良的评分。评分通常采用 5 分制，例如非常好/好/足够/差/非常差。
|
||||||
|
|
||||||
除此之外，面试官还可以标记是否没有足够的信息来做出判断，或者是否没有时间问及特定的信号。
|
除此之外，如果面试官没有足够的信息来做出判断，或者由于时间用完而未能提出涉及特定信号的问题，他们也可以标记。
|
||||||
|
|
||||||
评分必须考虑到情境的复杂性。 对于处理得当的更加困难或复杂的情况，通常会获得更高的评分和级别建议。
|
评分必须根据情况的复杂性进行。处理得当的更困难或复杂的情况通常会获得更高的评分和级别推荐。
|
||||||
|
|
||||||
在面试结束后，面试官需要协调所有评分和定性反馈，以决定：
|
在面试结束时，他们会协调所有评分和定性反馈，以决定：
|
||||||
|
|
||||||
- 是否通过或不通过候选人
|
* 是否通过或未通过候选人
|
||||||
- 如果通过，候选人应该获得什么级别
|
* 如果通过，候选人应该获得什么级别
|
||||||
|
|
||||||
以上的影响是我们通常可以期望大型科技公司的行为面试有一定的结构性，因为面试官会尝试询问至少一个类别的问题来评估候选人。
|
上述内容意味着我们通常可以期望大型科技公司的行为面试具有一定的结构，因为面试官会尝试从每个类别中提问至少一个问题来评估候选人。
|
||||||
|
|
||||||
此外，重要的是候选人在一道问题上冗长的陈述可能会导致面试官没有足够的时间。 差的沟通或者没有理解问题的要点也可能构成不足的信号。
|
此外，对于候选人来说，避免长时间喋喋不休地回答一个问题也很重要，因为面试官可能会耗尽时间。沟通不畅或没有抓住问题的重点也可能构成信号不足。
|
||||||
|
|
||||||
除此之外，面试官通常鼓励利用跟进问题深入了解候选人的实际动机和理解其表面行动背后的原因。
|
除此之外，通常鼓励面试官利用后续问题来更深入地挖掘候选人对其表面行为背后的实际动机和理解。:
|
||||||
|
|
||||||
1. 您认为您为什么会这样做？
|
1. 你认为你为什么做了（插入动作）？
|
||||||
2. 你为什么不那样做？
|
2. 你为什么没有做（插入动作）？
|
||||||
3. 你会怎么在后见之明中改变事情？
|
3. 事后看来，你会如何做不同的事情？
|
||||||
|
|
||||||
因此，候选人还应准备对每种行动方式的利与弊有扎实的了解，并反思自己的内在动机。
|
因此，候选人还应为每种替代行动模式的优势、劣势做好充分的准备，并反思其内在动机。
|
||||||
|
|
||||||
### 典型的行为面试评估标准
|
### 典型的行为面试评估标准
|
||||||
|
|
||||||
以下是我们在大型科技公司为软件工程师开展行为面试时的常见评估类别和标准：
|
以下是我们根据在大型科技公司为软件工程师进行行为面试的经验总结出的常见评估类别和标准：
|
||||||
|
|
||||||
#### 1. 合作
|
#### 1. 协作
|
||||||
|
|
||||||
- 处理分歧
|
* 处理分歧
|
||||||
- 团队合作
|
* 团队合作
|
||||||
- 处理各种个性和技能的人
|
* 与不同个性和技能的人合作
|
||||||
- 以简单的方式传达复杂的思想
|
* 简单地传达复杂的想法
|
||||||
- 给予建设性反馈
|
* 给予建设性的反馈
|
||||||
- 积极倾听
|
* 积极倾听
|
||||||
|
|
||||||
#### 2. 实现结果和解决问题
|
#### 2. 推动结果和解决问题
|
||||||
|
|
||||||
- 影响力导向的心态
|
* 结果导向的心态
|
||||||
- 在遇到障碍或路障时积极推进进展
|
* 尽管存在障碍或障碍，仍积极主动地取得进展
|
||||||
- 影响他人实现目标
|
* 影响他人实现目标
|
||||||
- 在分析和果断行动之间平衡
|
* 平衡分析与果断行动
|
||||||
- 辨别最佳解决方案并付诸实施
|
* 确定最佳解决方案并执行
|
||||||
- 辨别正确的问题
|
* 确定正确的问题
|
||||||
- 辨别最关键的目标
|
* 确定最关键的目标
|
||||||
- 具备资源节约的思维和数据驱动的心态
|
* 足智多谋和数据驱动的心态
|
||||||
- 创意和创新
|
* 创造力和创新
|
||||||
- 辨别权衡和可持续的解决方案
|
* 确定权衡和可持续的解决方案
|
||||||
- 量化结果，迭代并跟进
|
* 衡量结果、迭代和跟进
|
||||||
|
|
||||||
#### 3. 成长心态
|
#### 3. 成长心态
|
||||||
|
|
||||||
- 自我意识和发展领域
|
* 了解自身优势和发展领域
|
||||||
- 积极征求来自他人的反馈并建立反馈循环
|
* 积极征求他人的反馈并创建反馈循环
|
||||||
- 良好地接受反馈和挫折，将其视为机会
|
* 很好地接受反馈和挫折，将它们视为机会
|
||||||
- 对失败承担个人责任
|
* 对失败承担个人责任
|
||||||
- 反思，模拟最佳实践并将经验应用于新情境
|
* 反思、模拟最佳实践并将经验教训应用于新情况
|
||||||
- 通过设置和努力追求具有挑战性的目标而充满活力
|
* 通过设定和努力实现具有挑战性的目标来获得能量
|
||||||
|
|
||||||
#### 4. 适应能力和灵活性
|
#### 4. 适应性和灵活性
|
||||||
|
|
||||||
- 在不确定性中表现出色
|
* 在不确定性中表现良好
|
||||||
- 保持冷静和专注，为他人提供稳定的存在
|
* 保持冷静和专注，为他人提供稳定的存在
|
||||||
- 灵活并迅速适应意外情况
|
* 灵活且快速适应意外情况
|
||||||
|
|
||||||
### 典型的行为面试职级期望
|
### 典型的行为面试分级期望
|
||||||
|
|
||||||
行为面试是一种面试格式，面试官可以根据求职者讲述的故事、其回答和制定的决策来评估其成熟度，从初级软件工程师到极其高级的职位不等。 工作经验的年限并不一定等同于特定的职级，因为有些人比其他人成熟得更快。 通常，职级的指导意见是考虑到工作经验的年限和职级期望而制定的。 下面提到的职级是基于谷歌和 Facebook 的职级，其中 L3 相当于初级软件工程师/应届毕业生。
|
行为面试是面试形式之一，面试官可以通过这种形式评估候选人的成熟度——从初级软件工程师到非常高级的职位，这取决于他们讲述的故事、他们的回应和所做的决定。 实际工作年限不一定等同于特定级别，因为有些人比其他人更成熟。 级别指导通常是在考虑实际经验年限和级别期望的情况下制定的。 下面提到的级别基于 Google 和 Facebook 的级别，其中 L3 等同于初级软件工程师/应届毕业生。
|
||||||
|
|
||||||
了解通常定义的工程师职级的预期行为，并精心设计您的回答，确保它们与您当前的职级或您所针对的职级相匹配。
|
了解为常用工程级别定义的预期行为，并根据您的回答确保它们与您当前的级别或您所针对的级别相符。
|
||||||
|
|
||||||
#### 初级软件工程师（L3）
|
#### 初级软件工程师 (L3)
|
||||||
|
|
||||||
- 从经理和/或团队高级成员那里接受指导。
|
* 听从经理和/或团队高级成员的指示。
|
||||||
- 在没有太多指导的情况下执行明确定义的任务。
|
* 在没有太多指导的情况下执行定义明确的任务。
|
||||||
- 主要改进自己的技能和技艺。
|
* 主要提高自己的技能和工艺。
|
||||||
|
|
||||||
#### 软件工程师（L4）
|
#### 软件工程师 (L4)
|
||||||
|
|
||||||
- 理解项目目的并帮助实现团队的目标。
|
* 了解项目目的并帮助实现团队的目标。
|
||||||
- 将分配给他们的较大项目（通常是特性工作）拆分成较小的任务以便及时执行。
|
* 将分配给他们的大型项目（通常是功能工作）分解为较小的任务，以便及时执行。
|
||||||
- 适当平衡委派任务和自己执行任务。
|
* 适当地平衡委派任务和自己执行任务。
|
||||||
- 在可能指导更初级的成员、实习生或新员工时提升他们自己的技能。
|
* 提高自己的技能，同时可能指导更初级的成员、实习生或新员工。
|
||||||
- 在高级团队成员的指导下开展跨职能合作。
|
* 在团队高级成员的指导下进行跨职能协作。
|
||||||
|
|
||||||
#### 高级软件工程师（L5）
|
#### 高级软件工程师 (L5)
|
||||||
|
|
||||||
- 在团队内领导复杂任务和项目的开发。
|
* 领导团队内复杂任务和项目的开发。
|
||||||
- 辨别经过深思熟虑的对于范围较大的模糊项目的解决方案
|
* 确定针对范围广泛的模糊项目的深思熟虑的解决方案
|
||||||
- 将解决方案拆分成较小的项目并将其中的一些委派给团队成员。
|
* 将解决方案分解为较小的项目，并将其中一些项目委派给团队成员。
|
||||||
- 积极寻求新的想法和方向，以更好地构建产品。
|
* 积极寻求新想法和方向，以更好地构建产品。
|
||||||
- 指导多个团队成员并作为榜样帮助他们提高。
|
* 指导团队中的多名初级成员，并通过成为榜样来帮助他们进步。
|
||||||
- 独立开展跨职能合作并推动复杂、模糊的讨论。
|
* 独立地进行跨职能工作，并推动复杂、模糊的讨论。
|
||||||
|
|
||||||
#### 高级职员软件工程师（L6）
|
#### 资深软件工程师 (L6)
|
||||||
|
|
||||||
- 理解业务目标并建议经理和组织领导实现目标。
|
* 了解业务目标，并建议经理和组织领导者实现这些目标。
|
||||||
- 领导一队工程师的方向。
|
* 领导或极大地影响工程师团队的方向。
|
||||||
- 展示领域专业知识，受到其他工程师的钦佩。
|
* 展现领域专业知识，并受到其他工程师的敬仰。
|
||||||
- 在团队/组织内开展清晰的长期规划并推动一致。
|
* 在团队/组织内进行清晰、长期的规划，并推动共识。
|
||||||
- 指导技术组长和团队的初级成员。
|
* 指导技术负责人和团队初级成员。
|
||||||
- 开展需要与多个团队的工程师和跨职能合作伙伴互动的项目。
|
* 从事需要与多个团队的工程师和跨职能合作伙伴互动的项目。
|
||||||
|
|
||||||
#### 高级职员软件工程师（L7）及以上
|
#### 资深资深软件工程师 (L7) 及以上
|
||||||
|
|
||||||
- 拥有组织/全公司业务/工程目标并实现这些目标。
|
* 拥有组织/公司范围内的业务/工程目标并交付成果。
|
||||||
- 在组织/公司内影响或领导产品和工程路线图。
|
* 影响或领导组织/公司内的产品和工程路线图。
|
||||||
- 在高度复杂和模糊的领域领导解决方案开发和交付。
|
* 领导高度复杂和模糊领域的解决方案开发和交付。
|
||||||
|
|
||||||
## 推荐的准备策略
|
## 推荐的准备策略
|
||||||
|
|
||||||
如前所述，根据评估标准，我们通常可以预期大型科技公司的行为面试具有一定的结构，因为面试官会尝试从每个类别中至少询问一个问题以评估候选人。
|
如上所述，根据评估标准，我们可以预期大型科技公司的行为面试会具有一定的结构，因为面试官会尝试**从每个类别中至少提问 1 个问题**来评估候选人。
|
||||||
|
|
||||||
除了这些问题，我们还可以期望一般但常见的问题，例如“介绍一下自己”或“为什么加入这个公司”。
|
除了这些问题之外，我们还可以期待一些常见但常见的问题，例如“介绍一下你自己”或“为什么加入这家公司”。
|
||||||
|
|
||||||
问题的问法非常多样化。 虽然为所有问题做准备很耗时间，但我们可以将最常见的 80％问题分类主题，并按照以下指南系统地解决这些问题：
|
可以提出的问题有很多变化。虽然为所有问题做准备太耗时，但我们可以将 80% 最常见的问题归类为主题，并按照我们的以下指南有条不紊地解决它们：
|
||||||
|
|
||||||
1. [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
|
1. [“介绍一下你自己……”](/behavioral-interview-guidebook/self-introduction)
|
||||||
2. “让我来看一下你的简历…”
|
2. “请带我了解你的简历……”
|
||||||
3. [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here)
|
3. [“为什么加入这个团队或公司？”](/behavioral-interview-guidebook/why-work-here)
|
||||||
4. [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask)
|
4. [“你有什么问题要问我吗？”](/behavioral-interview-guidebook/questions-to-ask)
|
||||||
5. "当你...... 的时候告诉我" （分类为以下主题）
|
5. “告诉我你什么时候……”（分为以下主题）
|
||||||
- [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
|
* [取得成果和解决问题](/behavioral-interview-guidebook/problem-solving)
|
||||||
- [合作](/behavioral-interview-guidebook/collaboration)
|
* [协作](/behavioral-interview-guidebook/collaboration)
|
||||||
- [成长心态](/behavioral-interview-guidebook/growth-mindset)
|
* [成长心态](/behavioral-interview-guidebook/growth-mindset)
|
||||||
- 应变能力和灵活性
|
* 适应性和灵活性
|
||||||
|
|
||||||
### 根据常见主题准备几个好故事
|
### 根据常见主题准备一些好的、通用的故事
|
||||||
|
|
||||||
面对不同的“当你...... 的时候告诉我”类型的问题，解决问题的一般策略是准备 3-5 个通用的，经过深思熟虑的故事，可以用来解答多个需要的特征。 例如，与他人广泛合作的经验可以展示您的沟通，团队合作，领导能力，冲突管理等特点。 每当面试官问你一个问题时，你可以运用已准备好的故事并根据特定问题进行适当的调整。
|
解决“告诉我你什么时候……”问题的总体策略是准备 3-5 个通用的、经过深思熟虑的故事，这些故事可用于解决多个所需特征。例如，与他人广泛合作的经验可以展示您在沟通、团队合作、领导力、冲突管理等方面的特质。每当面试官问你一个问题时，你都可以浏览你准备的故事，并根据具体问题进行调整。
|
||||||
|
|
||||||
以下是一些选择和准备好项目经验作为故事的技巧：
|
以下是选择和准备好的项目经验作为故事的一些技巧：
|
||||||
|
|
||||||
- 根据上面的评估标准检查并尝试选择广泛经验，可以用来解决多个标准。 然后，写下简短的要点，说明您展示了满足所需特质的行为。
|
* 检查上述评估标准，并尝试选择可用于解决多个标准的广泛经验。然后，写下简短的要点，说明您如何表现出满足所需特征的行为。
|
||||||
- 选择展示您期望水平的经验。 例如，如果您正在申请高级软件工程师职位，则确保您的经验展示了您对整个团队方向的影响力。
|
* 选择展示您的期望水平的经验。例如，如果您申请的是资深软件工程师职位，请确保您的经验展示了您对整个团队方向的影响。
|
||||||
- 不要在同一轮面试中重复使用相同的故事。 面试官往往会讨论候选人的表现，因此过度使用相同的故事可能会被视为重复和经验不足。
|
* 不要在一个面试循环中过多地重复使用相同的故事。面试官倾向于一起讨论候选人的表现，因此过度使用相同的故事可能会显得重复且经验不足。
|
||||||
- 如上所述，面试官往往优先考虑后续问题以了解候选人真正的心理，动机和理解。 对于每个故事，请准备对每种替代操作的优缺点有一个扎实的理解，并反思您的内在动机。
|
* 如上所述，面试官倾向于优先考虑后续问题，以了解候选人的真实心理、动机和理解。对于每个故事，准备好对每种替代行动模式的优缺点有扎实的了解，并反思您的内在动机。
|
||||||
|
|
||||||
### 用 STAR 框架结构初始答案
|
### 使用 STAR 框架构建初始答案
|
||||||
|
|
||||||
准备一个您可以使用的故事后，在回答具体问题时需要将其结构化。 面试官总是被要求关注候选人在面试期间实际的沟通能力（而不是他们声称的能力），评估方式如下：
|
准备好一个你可以使用的故事后，你需要很好地构建它们，以便回答具体问题。面试官总是被要求注意的一个要求是候选人在面试期间实际的沟通能力（而不是他们声称的），评估如下：
|
||||||
|
|
||||||
- 有条理，易于理解的思维过程
|
* 组织良好，易于理解的思维过程
|
||||||
- 对哪些细节应该详细说明以及哪些细节应该保持简单有良好的直觉
|
* 善于判断哪些细节应该详细阐述，哪些应该简单化
|
||||||
- 使他人对目的和行动清晰
|
* 让其他人清楚目标和行动
|
||||||
- 展示积极倾听
|
* 展现积极的倾听
|
||||||
|
|
||||||
为了实现以上目标，您需要在回答问题时将答案结构化，确保它简洁明了，时间不超过 3 分钟。 您可以使用例如 STAR 的框架作为大致指导：
|
为了达到上述目标，你需要很好地组织你的答案，以确保它简洁明了，并在 3 分钟内切中要点。你可以使用一个像 STAR 这样的粗略指南：
|
||||||
|
|
||||||
- **情境**：介绍场景的基本细节，足够了解您所面临的挑战。 （不要花太多时间）
|
* **情境**：呈现场景的基本细节，足以理解你所处的挑战。（不要花太多时间在这上面）
|
||||||
- **任务**：您在情况下需要实现或完成什么？ （不要花太多时间）
|
* **任务**：你需要在场景中实现或做什么？（不要花太多时间在这上面）
|
||||||
- **行动**：您采取了什么行动？ 这是您根据解决挑战或情况所采取的方法展示所需特质的地方。
|
* **行动**：你做了什么？这是你根据你为解决挑战或情境所采取的方法展示所需特质的地方。
|
||||||
- **结果**：您的行动的结果是什么？
|
* **结果**：你的行动的结果是什么？
|
||||||
|
|
||||||
以下是将 STAR 应用于回答行为面试问题“告诉我一个您曾经不得不管理多个相互冲突的优先事项以及您如何处理它”的示例：
|
以下是将 STAR 应用于回答行为面试问题的一个例子：“请告诉我你曾经不得不管理多个相互冲突的优先级以及你如何处理它的情况”：
|
||||||
|
|
||||||
#### 情境
|
#### 情境
|
||||||
|
|
||||||
在创业公司任职的前端工程师职位上，我曾经面临过一种局面，即在非常短的时间内履行几个重要的电子商务活动特点，因为当时不同的团队都在提出特点请求。
|
在我目前作为一家初创公司的前端工程师的工作中，我曾经遇到过一种情况，我必须在很短的时间内交付几个重要的电子商务活动功能，因为当时不同的团队都在提出功能请求。
|
||||||
|
|
||||||
#### 任务
|
#### 任务
|
||||||
|
|
||||||
正如我所认识到的那样，我不可能在好的质量和及时的情况下完成它们所有。 我不得不找到一种方法来消除它们之间的冲突。
|
因为我意识到我不可能以高质量且及时的方式实现所有目标。我必须找到一种方法来解决他们的优先级冲突。
|
||||||
|
|
||||||
#### 行动
|
#### 行动
|
||||||
|
|
||||||
- 我所做的是与所有相关的产品和工程相关人员安排快速会议，共同确定优先顺序并分配适当的资源以支持此项目。
|
* 我所做的是与所有相关的产品和工程利益相关者安排了一次快速会议，共同确定优先级，并分配适当的资源来支持这个项目。
|
||||||
- 我列出了每个团队提出的特点，并与所有相关人员一起工作，以确定每个特点对业务目标的贡献，同时对每个特点的工程工作量进行大致估计。
|
* 我列出了每个团队请求的功能，并与所有相关的利益相关者一起确定每个功能对业务目标的贡献，同时也大致估算了每个功能的工程工作量。
|
||||||
- 这帮助我们将工程工作量很高但对目标贡献很小的特征降低优先级。
|
* 这帮助我们降低了那些工程工作量很大但对目标贡献很小的功能的优先级。
|
||||||
- 对于在时限内无法实现的项目，我们能够协商获得更多的工程资源并将这些特征工作委托给其他特定人员。
|
* 对于那些无法在时间范围内实现的项目，我们能够协商更多的工程资源，将这些功能工作委托出去。
|
||||||
- 之后，为确保自己的时间表得以实现，我将我的特点分解为较小的任务，并计划每天和每周的里程碑，与团队定期审查我的进展。
|
* 之后，为了确保我自己的时间表得到满足，我将我的功能分解成更小的任务，并将它们规划到每日和每周的里程碑中，定期与团队一起审查我的进度。
|
||||||
|
|
||||||
#### 结果
|
#### 结果
|
||||||
|
|
||||||
通过这种共同确定优先顺序和规划的努力，我能够按照规定的时间表实现所需的所有特点。
|
通过这种共同确定优先级和规划的努力，我能够在规定的时间表内实现所有所需的功能。
|
||||||
|
|
||||||
### 答案的重要警告
|
### 关于你的答案的重要警告
|
||||||
|
|
||||||
最后的注记——为了让面试官能够跟进您的思维过程或理解您的解决方案有多么出色，他们非常重要的是理解内容，目的和情境。 问题或情境应该被清晰地描述，并且不应该假设有任何先前的理解。 许多候选人会陷入这样一个陷阱，认为面试官可以在没有给出足够背景信息的情况下跟进他们的故事，特别是当问题是领域特定的，例如金融科技或区块链。 在这种情况下，面试官可能会将您标记为沟通不好，或将分类标记为信号不足的不足。
|
最后说明——为了让面试官能够理解你的思维过程或理解你的解决方案有多么出色，让他们理解背景、目的和情境是非常重要的。应该非常清楚地描述问题或情境，并且不应该假设任何先前的理解。许多候选人陷入了假设面试官可以在没有提供足够背景的情况下理解他们的故事的陷阱，尤其是在问题是特定于领域的，例如金融科技或区块链。在这种情况下，面试官最终可能会认为你沟通不畅，或者将该类别评为信号不足。
|
||||||
|
|
||||||
### 熟能生巧
|
### 熟能生巧
|
||||||
|
|
||||||
在准备好您的故事并大致了解 STAR 之后，请使用准备好的故事和 STAR 格式回答我们列出的 50 个常见行为面试问题。 与其记忆答案，最好每次都练习口头回答。 这样可以使您巩固故事并熟悉 STAR。
|
在准备好你的故事并对 STAR 有一个大致的了解后，使用你准备好的故事和 STAR 格式来回答我们列出的 50 个常见的行为面试问题。不要死记硬背答案，每次都练习口头回答。这可以让你巩固你的故事并熟悉 STAR。
|
||||||
|
|
||||||
## 行为面试中如何表现最佳
|
## 如何在行为面试中表现得最好
|
||||||
|
|
||||||
### 理解面试官的意图
|
### 了解面试官的意图
|
||||||
|
|
||||||
一些候选人将行为面试视为考试或考试，您必须学习或记忆才能获得正确的得分或答案。 这不是面试官正在寻找的。 为了了解面试官自己的感受，尝试想象自己正在面试加入您实际正在从事的项目的某个人。 也就是说，将自己置于招聘经理的位置。
|
一些候选人将行为面试视为一种测试或考试，你必须学习或记忆才能获得正确的要点或答案。这并不是面试官所寻找的。为了了解面试官自己的感受，试着想象一下你正在面试某人加入你目前实际参与的项目。也就是说，把自己放在招聘经理的位置上。
|
||||||
|
|
||||||
在技术细节轮次完成后通常会进行行为面试。 已通过技术社区的候选人被认为在技术上很有能力。 然而，作为经理，您几乎完全不了解这个陌生人（候选人）。 面试是一种谈话方式，可以让您了解作为一个人的陌生人。 这就像是在社交环境中的典型聊天，有点像速度约会，除了面试官需要足够了解您，以决定您是否能够很好地工作。
|
行为面试通常在技术环节完成后进行。通过技术环节的候选人被认为在技术上是有能力的。但是，作为一名经理，你几乎不认识这个陌生人（候选人）。面试是你了解这个陌生人作为个人的对话。这就像社交场合中的典型聊天，有点像快速约会，只是面试官需要足够了解你，才能决定你是否能很好地工作。
|
||||||
|
|
||||||
可以理解的是，作为面试官，您应该尝试筛选出：
|
可以理解的是，作为面试官，你通常会试图筛选出：
|
||||||
|
|
||||||
- 此候选人是否会成为**较差的表现者**？ 例如经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不良，不能很好地接受反馈。 他们是否在简历中撒谎或夸大其词？
|
* 这个候选人会成为一个**表现不佳者**吗？例如，经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不畅，不善于接受反馈。他们是否在简历上撒谎或夸大其词？
|
||||||
- 候选人是否会成为**超级明星，有动力的队友**？ 例如善于沟通，有解决问题的资源和独立性，能够管理利益相关者，积极并努力实施新举措以推动团队前进。
|
* 候选人会成为一个**超级明星，有动力的队友**吗？例如，沟通良好，善于解决问题，能够管理利益相关者，积极主动，努力工作以推动团队前进。
|
||||||
- 候选人是否会**容易管理**？ 例如，他很好地接受反馈，受人欢迎，善于社交，不会给您带来问题。
|
* 候选人会**容易管理**吗？例如，善于接受反馈，讨人喜欢，善于交际，不会给你带来麻烦。
|
||||||
|
|
||||||
如果一个候选人将答案背诵回去或看起来冷漠而无动于衷，您会雇用他们加入您的团队吗？ 可能不会。 对于面试官来说，与您的真正原始自我见面，能够了解到您的思维过程是否与他们的目标相一致同等重要。
|
如果一个候选人背诵答案或表现得冷漠和无动于衷，你会聘用他们进入你的团队吗？可能不会。对于面试官来说，了解你的真实、自然的自我，就像了解你的思维过程是否与他们的目标一致一样重要。
|
||||||
|
|
||||||
### 通用适用
|
### 一种适合大多数人的方法
|
||||||
|
|
||||||
面试官总是将团队“适合性”视为评估您的标准之一。 但是，那么多不同的团队存在-您如何知道如何表现自己以展现合适性？
|
面试官总是提到团队“契合度”作为评估你的一个标准。但是，外面有这么多不同的团队——你如何知道如何表现自己来展示契合度呢？
|
||||||
|
|
||||||
一种方法是询问招聘人员或先前轮次的面试官进行行为轮次之前的问题。 通常，在开始简历筛选/面试过程之前，招聘经理会在新候选人中内部对关键标准进行对齐。 例如，他们可能正在寻找更有主动精神的人，因为他们希望团队中有更多的独立驱动者。 因此，面试官将倾向于寻找那些具体的特质，并提出问题以筛选出这些特质。
|
一种方法是向招聘人员或其他面试官询问行为轮之前的轮次。通常，在开始简历筛选/面试过程之前，招聘经理会在内部就他们在新候选人中寻找的关键标准达成一致。例如，他们可能正在寻找一个更积极主动的人，因为他们希望团队中有更多独立的驱动者。因此，面试官会倾向于寻找这些特定的特质，并提出问题以筛选出这些特质。
|
||||||
|
|
||||||
但是，一些绝佳的通用提示可供您使用
|
然而，一些万无一失的、通用的行为技巧
|
||||||
|
|
||||||
1. **友好和积极**：友好和积极的人往往在任何团队中都表现良好。
|
1. **友好和积极**：友好和积极的人往往能很好地融入任何团队。
|
||||||
2. **主动和有动力**：奋斗者与更高绩效相关。
|
2. **积极主动和有动力**：进取者与更高的绩效相关。
|
||||||
3. **热情**：展示明确的兴趣，关于角色，团队和公司。
|
3. **热情**：表现出对角色、团队和公司的明确兴趣。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "bd54da7c",
|
||||||
|
"description": "d9ced7a2",
|
||||||
|
"seo_title": "750ad3fa",
|
||||||
|
"seo_description": "ea22a3f7",
|
||||||
|
"social_title": "350895b"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"af1f8326",
|
||||||
|
"e3e74d45",
|
||||||
|
"7600c370",
|
||||||
|
"22934b89",
|
||||||
|
"7490f979",
|
||||||
|
"cf56d450",
|
||||||
|
"9eceb0d4",
|
||||||
|
"b2e363a2",
|
||||||
|
"91fbdfb4",
|
||||||
|
"5b389685",
|
||||||
|
"2d6550b8",
|
||||||
|
"282a375",
|
||||||
|
"bd456ea8",
|
||||||
|
"f6bafdb3",
|
||||||
|
"ecda695e",
|
||||||
|
"10606194",
|
||||||
|
"8c19b9e6",
|
||||||
|
"5c29402e",
|
||||||
|
"a27e5807",
|
||||||
|
"bd63cd0c",
|
||||||
|
"803a242f",
|
||||||
|
"bdaf5e0",
|
||||||
|
"3b4a337b",
|
||||||
|
"1fff8c49",
|
||||||
|
"2c5804df",
|
||||||
|
"5a595fe5",
|
||||||
|
"22fe778c",
|
||||||
|
"4e0c45a9",
|
||||||
|
"1414db05",
|
||||||
|
"a93ed022",
|
||||||
|
"86f1e552",
|
||||||
|
"29cf6c9f",
|
||||||
|
"7e2dee",
|
||||||
|
"9cd4490b",
|
||||||
|
"139cf0fb",
|
||||||
|
"2f266bdb",
|
||||||
|
"c36bdde0",
|
||||||
|
"88aa0040",
|
||||||
|
"6561df72",
|
||||||
|
"ab7a7ed3",
|
||||||
|
"fcfd2fed",
|
||||||
|
"be70e0d2",
|
||||||
|
"41bb777",
|
||||||
|
"979d6eb9",
|
||||||
|
"84701297",
|
||||||
|
"dea4aeba",
|
||||||
|
"840be5e0"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"af1f8326",
|
||||||
|
"e3e74d45",
|
||||||
|
"7600c370",
|
||||||
|
"22934b89",
|
||||||
|
"7490f979",
|
||||||
|
"cf56d450",
|
||||||
|
"9eceb0d4",
|
||||||
|
"b2e363a2",
|
||||||
|
"91fbdfb4",
|
||||||
|
"5b389685",
|
||||||
|
"2d6550b8",
|
||||||
|
"282a375",
|
||||||
|
"bd456ea8",
|
||||||
|
"f6bafdb3",
|
||||||
|
"ecda695e",
|
||||||
|
"10606194",
|
||||||
|
"8c19b9e6",
|
||||||
|
"5c29402e",
|
||||||
|
"a27e5807",
|
||||||
|
"bd63cd0c",
|
||||||
|
"803a242f",
|
||||||
|
"bdaf5e0",
|
||||||
|
"3b4a337b",
|
||||||
|
"1fff8c49",
|
||||||
|
"2c5804df",
|
||||||
|
"5a595fe5",
|
||||||
|
"22fe778c",
|
||||||
|
"4e0c45a9",
|
||||||
|
"1414db05",
|
||||||
|
"a93ed022",
|
||||||
|
"86f1e552",
|
||||||
|
"29cf6c9f",
|
||||||
|
"7e2dee",
|
||||||
|
"9cd4490b",
|
||||||
|
"139cf0fb",
|
||||||
|
"2f266bdb",
|
||||||
|
"c36bdde0",
|
||||||
|
"88aa0040",
|
||||||
|
"6561df72",
|
||||||
|
"ab7a7ed3",
|
||||||
|
"fcfd2fed",
|
||||||
|
"be70e0d2",
|
||||||
|
"41bb777",
|
||||||
|
"979d6eb9",
|
||||||
|
"84701297",
|
||||||
|
"dea4aeba",
|
||||||
|
"840be5e0"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,191 +1,183 @@
|
||||||
---
|
---
|
||||||
title: 标题：回答“告诉我一个时间...”对于解决问题的技能和实现结果
|
title: 解答解决问题行为面试问题
|
||||||
description: 描述：学习如何回答有关前端/网络开发人员/软件工程师的解决问题技能和实现结果的行为问题。 参考示例答案。
|
description: 了解如何回答“告诉我一个时间……”风格的问题，以评估您的解决问题的能力。
|
||||||
|
seo_title: 解决问题 | 行为面试手册
|
||||||
|
seo_description: 了解如何回答解决问题的行为面试问题，适用于前端工程师。参考示例答案。
|
||||||
|
social_title: 解决问题行为问题 | GreatFrontEnd
|
||||||
---
|
---
|
||||||
|
|
||||||
正如我们在[行为面试准备概述]中提到的，**解决问题和实现结果的驱动力**是 8 个主要问题类型之一。
|
正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，**解决问题和追求结果**是需要准备的 8 个主要问题类别之一。
|
||||||
|
|
||||||
在本指南中，您将学习如何处理它们：
|
在本指南中，您将学习如何解决它们：
|
||||||
|
|
||||||
1. 详细评估标准
|
1. 详细的评估标准
|
||||||
2. 将可能的问题抽象为常见主题
|
2. 将可能的问题抽象成常见主题
|
||||||
3. 建议的答案框架
|
3. 建议的答案框架
|
||||||
4. 可能的后续问题的本质
|
4. 后续问题的可能性质
|
||||||
5. 样品问题和答案
|
5. 示例问题和答案
|
||||||
|
|
||||||
## 详细评估标准
|
## 详细的评估标准
|
||||||
|
|
||||||
解决问题和实现结果被归为一类，因为它们具有高度相关性。 当描述一个人解决问题经验或实现某些结果/目标时，可以推断出他们的思维方式或动力。
|
解决问题和追求结果被归为一类，因为它们本质上高度相关。在描述解决问题或实现某些结果/目标方面的经验时，也可以推断出他们的心态或这样做的动力。
|
||||||
|
|
||||||
在这个类别下评估候选人时，面试官通常会关注以下标准：
|
在对该类别下的候选人进行评分时，面试官通常会关注以下标准：
|
||||||
|
|
||||||
- 确定最佳解决方案并执行它们
|
* 确定最佳解决方案并执行
|
||||||
- 确定正确的问题
|
* 确定正确的问题
|
||||||
- 确定最关键的目标
|
* 确定最关键的目标
|
||||||
- 资源能力和数据驱动思维方式
|
* 足智多谋和数据驱动的思维方式
|
||||||
- 创造力和创新性
|
* 创造力和创新
|
||||||
- 确定折衷和可持续的解决方案
|
* 确定权衡和可持续的解决方案
|
||||||
- 测量结果，迭代和跟进
|
* 衡量结果、迭代和跟进
|
||||||
- 以结果为导向的思维方式
|
* 结果导向的心态
|
||||||
- 在面对障碍或路障时积极取得进展
|
* 尽管存在障碍或障碍，仍积极主动地取得进展
|
||||||
- 影响他人实现目标
|
* 影响他人实现目标
|
||||||
- 在决策行动中找到分析与果断平衡点
|
* 平衡分析与果断行动
|
||||||
|
|
||||||
## 将可能的问题抽象为常见主题
|
## 将可能的问题抽象成常见主题
|
||||||
|
|
||||||
正如我们在[行为面试准备概述]中提到的，为每个行为问题制定答案是不切实际的。 然而，通过将特定问题分批次到相似的主题中，并准备涵盖大量问题要求的故事，我们可以将要准备的故事数量减少到约 3-5 个故事。
|
正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中提到的，为那里出现的每个行为问题专门准备答案是不切实际的。但是，通过将特定问题归入类似的主题，并准备涵盖大量问题要求的故事情节，我们可以将要准备的故事数量减少到大约 3-5 个故事。
|
||||||
|
|
||||||
在这个类别下有太多类型的解决问题和实现结果的行为问题，例如：
|
可以提出的解决问题和追求结果的行为问题类型实在太多了，例如：
|
||||||
|
|
||||||
- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
|
* 您能否告诉我您曾经**使用数据来驱动工程决策**的经历？
|
||||||
- 你可以提供一次你在项目中必须解决和修复复杂问题的例子吗？
|
* 您能否提供一个您必须在项目中**排除故障并修复复杂问题**的例子？
|
||||||
- 你能描述一次你创造性地解决了工程问题或实现了有意义的指标改进的经验吗？
|
* 您能否描述一下您曾经**创造性地解决了**一个工程问题或实现了有意义的指标改进的经历？
|
||||||
- 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
|
* 您能否描述一下您曾经必须做出重要的工程决策以及您如何在**权衡之间**做出决定的经历？
|
||||||
|
|
||||||
然而，当我们查看此类别下 80％的问题时，通常会要求解决问题的过程或有效解决问题所需的特定特征，例如创意性、使用数据或者权衡评估。 从这些问题的答案中也可以推断问题或目标的来源，以及候选人是否能够在面对障碍时保持弹性。
|
但是，当我们查看该类别下的 80% 的问题时，问题通常会询问如何解决问题或有效解决问题所需的特定特质，例如创造力、使用数据或权衡评估。问题的根源或目标，以及候选人在面对障碍时是否具有韧性，也可以从对这些问题的回答中推断出来。
|
||||||
|
|
||||||
## 建议的答案框架
|
## 建议的答案框架
|
||||||
|
|
||||||
像往常一样，我们推荐使用 STAR 格式来构建故事，它是最简单和最有效的框架。
|
和往常一样，我们推荐使用 [STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 作为最简单、最有效的框架来构建你的故事。
|
||||||
|
|
||||||
尽管问题可能很多，但我们可以通过考虑一个强大的解决问题过程来抽象出所有解决问题行为问题的要求：
|
尽管问题可能性很多，但我们可以通过思考一个稳健的解决问题的过程来抽象出所有解决问题行为问题的要求：
|
||||||
|
|
||||||
1. **问题识别**：从表层症状中识别出正确的根本原因或问题。
|
1. **问题识别**：从表面症状中识别出要关注的正确根本原因或根本问题。
|
||||||
2. **指标/目标设定**：确定在解决问题方面成功的关键指标（如果有）。
|
2. **指标/目标设定**：确定解决问题（如果有）时表示成功的关键指标。
|
||||||
3. **信息收集**：从不同来源收集信息以及数据驱动的思维方式（使用数据驱动决策）的资源能力。
|
3. **信息收集**：从不同来源收集信息的足智多谋和数据驱动的思维方式（使用数据来驱动决策）。
|
||||||
4. **解决方案头脑风暴**：创意地产生解决根本原因的解决方案。
|
4. **解决方案头脑风暴**：创造性地生成解决根本原因的解决方案
|
||||||
5. **解决方案评估**：评估每个解决方案的权衡折衷并选择最优解决方案。
|
5. **解决方案评估**：评估每个解决方案的权衡，并选择最佳方案
|
||||||
6. **监测和调整**：通过测量关键指标监测解决方案的有效性。 如有必要，调整策略。
|
6. **监控和调整**：通过衡量关键指标来监控解决方案的有效性。如果需要，调整策略。
|
||||||
|
|
||||||
因此，您只需确保您至少准备的一个[故事或项目]涵盖了以上所有步骤。 这样做将使该故事可重复用于解决问题方面的所有相关特征，如数据驱动的思维方式、资源能力、创造力以及从用户反馈中工作。
|
因此，你只需要确保你至少有 1 个 [准备好的故事或项目](/behavioral-interview-guidebook) 涵盖了以上所有步骤。 这样做的话，这个故事可以重复用于解决问题下的所有相关特质，例如数据驱动思维、足智多谋、创造力以及接受用户反馈。
|
||||||
|
|
||||||
当然，您可能需要定制故事的细节以便于专注于特定问题的特定方面。
|
当然，你可能需要根据故事的细节来侧重于特定问题中提出的具体方面。
|
||||||
|
|
||||||
我们还建议您选择可以通过以下方式获取信号的问题解决故事。
|
我们建议你选择解决问题的故事，这些故事也可以用来获取以下方面的信号
|
||||||
|
|
||||||
- **积极性/主动性**：您已经采取主动措施解决问题，收集信息并解决问题。
|
* **主动性/积极性**：你主动调查问题、收集信息并解决问题。
|
||||||
- **领导能力**：您带领了解决问题的过程。
|
* **领导力**：你主导了解决问题的过程
|
||||||
- **团队协作**：您必须作为团队的一员来解决问题。
|
* **团队合作精神**：你必须作为团队的一员来解决问题
|
||||||
|
|
||||||
### 实例故事
|
### 案例故事
|
||||||
|
|
||||||
#### 情境
|
#### 情境
|
||||||
|
|
||||||
- 我是一家销售奢侈品的电商网站的技术主管。 该网站是一个 Angular 1.5 的单页面应用程序。
|
* 我是一家销售奢侈品的电子商务网站的技术负责人。 该网站是作为 Angular 1.5 单页应用程序构建的。
|
||||||
- 近年来，该产品显得有点老了——开发体验不佳，网站性能不佳。 初始加载速度超过 3 秒，转化率约为 0.8％。
|
* 近年来，该产品已经显现出它的老化——开发人员的体验并不好，而且网站的性能也很差。 初始加载速度超过 3 秒，转化率约为 0.8%。
|
||||||
|
|
||||||
#### 任务
|
#### 任务
|
||||||
|
|
||||||
- 我的任务是改进网站的性能和转化率。
|
* 我的任务是提高网站的性能和转化率。
|
||||||
|
|
||||||
#### 行动
|
#### 行动
|
||||||
|
|
||||||
**1. 问题识别**
|
**1. 问题识别**
|
||||||
|
|
||||||
- 转化率与性能和用户体验相关。
|
* 转化与性能和用户体验相关。
|
||||||
- 过去几年，网站性能逐渐下降。
|
* 过去几年，网站的性能一直在逐渐下降。
|
||||||
- 用户体验值得检查。 [改进措辞]
|
* 用户体验已经有一段时间没有被关注了。 \[改进措辞]
|
||||||
|
|
||||||
**2. 信息收集**
|
**2. 信息收集**
|
||||||
|
|
||||||
- 查看过去一年中的错误性质，根据它们的根本原因对它们进行分类，以确定故障热点和主要问题区域。
|
* 查看了过去一年中错误的性质，根据其根本原因进行分类，以确定热点和主要问题领域。
|
||||||
- 收集来自团队的反馈，并确定改进的范围和重点。
|
* 收集了团队关于改进领域方面的反馈。
|
||||||
- 与团队进行头脑风暴会议，以想出改进的方法。
|
* 与团队一起集思广益，思考改进方法。
|
||||||
- 为了改进，首先需要知道我们的表现如何。
|
* 为了改进，首先我们需要知道我们做得怎么样。
|
||||||
- 确认我们的性能和转化跟踪是否正常工作。
|
* 再次检查我们的性能和转化跟踪是否正常工作。
|
||||||
- 开始从 Lighthouse 和 Core Web Vitals 跟踪新指标。
|
* 开始跟踪来自 Lighthouse 和 Core Web Vitals 的新指标。
|
||||||
- 与数据科学家合作创建性能和转化的仪表板，并获得一些见解：
|
* 与数据科学家合作，提出了性能和转化的仪表板，并获得了一些见解：
|
||||||
- 确定某些国家的转化率较低。
|
* 确定一些国家的转化率较低。
|
||||||
- 移动用户与桌面用户相比具有较低的转化率。
|
* 与桌面用户相比，移动用户的转化率较低。
|
||||||
- 与 UX 设计师和 UX 研究人员合作，识别网站上的 end-to-end 购物体验问题。
|
* 与用户体验设计师和用户体验研究人员合作，以确定网站上端到端购物体验中的问题。
|
||||||
- UI 元素之间间隔太大，需要大量滚动，影响了跳出率，因为一些用户不愿滚动。
|
* 用户界面元素之间的间距太大，需要大量滚动，这影响了跳出率，因为一些用户懒得滚动。
|
||||||
|
|
||||||
**3. 解决方案头脑风暴**
|
**3. 解决方案头脑风暴**
|
||||||
|
|
||||||
- **用户界面**：服务器端呈现对于其性能和 SEO 的好处至关重要。 做出良好选择。
|
* **用户界面**：服务器端渲染对其性能和 SEO 优势至关重要。 围绕良好的性能做出选择。
|
||||||
- **View**：从 Angular.js 1.6 迁移到 Angular 13 是一个巨大的任务，而停留在 Angular 上没有太大的时间节省效益。
|
* **视图**：从 Angular.js 1.6 迁移到 Angular 13 是一项巨大的工程，而且留在 Angular 上并没有节省多少时间。
|
||||||
- **Next.js**：我们的一些开发人员具有使用 React 和 Next.js 作为用于构建 SSR 应用程序的元框架的经验，这种 SSR 应用程序的快速初始载入和应用程序行为非常有吸引力。 我们真的渴望 Next.js 提供的快速初始加载和类似应用程序的行为。
|
* **Next.js**：我们的一些开发人员有使用 React 和 Next.js 作为构建 SSR 应用程序的元框架的经验，并且它正在迅速普及。 我们真的希望 Next.js 能够提供快速的初始加载和类似应用程序的行为。
|
||||||
- **Svelte**：响应模型很吸引人，并且相对于 React 的编程模型更容易理解。
|
* **Svelte**：反应式模型很有吸引力，而且编程模型比 React 的更容易理解，但是生态系统很小，而且没有那么多库。
|
||||||
- **样式**：由于多年来添加了许多类并且难以删除，因此样式表变得非常臃肿。
|
* **样式**：由于多年来添加了许多类并且很难删除，样式表变得非常臃肿。
|
||||||
- **Tailwind CSS**：Tailwind CSS 是最热门的 CSS 方法之一，其原子 CSS 方法可扩展适用于不断增长的代码库。
|
* **Tailwind CSS**：Tailwind CSS 是最热门的 CSS 方法之一，其原子 CSS 方法可以很好地扩展到不断增长的代码库。
|
||||||
- **Styled Components**：CSS in JS 是我们也在考虑的东西，但 Styled Components 与 React 有关，并且运行时样式注入对性能不利。
|
* **Styled Components**：CSS-in-JS 也是我们正在关注的，但 Styled Components 与 React 绑定，并且运行时样式注入对性能不利。
|
||||||
- **以性能为中心的思维方式**。 阅读了许多关于 web.dev 和其他电子商务公司的工程博客的性能案例研究，收集了一个重要的性能技术和流程列表：
|
* **以性能为中心的思维模式**。 阅读了 web.dev 和其他电子商务公司的工程博客上的许多性能案例研究，收集了一份重要的性能技术和流程列表：
|
||||||
- 设置每个页面的性能预算（低于 300 kb）。
|
* 为每个页面设置性能预算（低于 300kb）。
|
||||||
- 在合并拉取请求之前运行性能基准测试。
|
* 在合并拉取请求之前运行性能基准测试。
|
||||||
- 惰性加载非关键组件，惰性加载屏幕下方内容。
|
* 延迟加载非关键组件 延迟加载低于折叠的内容。
|
||||||
- 在页面级别上拆分 JavaScript，而不是单独的包（由 Next.js 处理）。
|
* 在页面级别而不是单个捆绑包上拆分 JavaScript（由 Next.js 处理）。
|
||||||
- 对图片使用 WebP 格式。
|
* 对图像使用 WebP 格式。
|
||||||
- 将图片托管在 CDN 上，Adaptive 加载图片，因此移动设备加载较小的图片，合并重复的 JavaScript 库（data-fns 和 moment.js），切换到 lodash-es，删除了所有 jQuery 的用法-查看数据以识别不常用的功能并将其从产品详细信息页的代码中删除，JS 大小减少了 200 个+ kb。
|
* 在 CDN 上托管图像，而不是自适应加载图像，以便移动设备加载较小的图像 整合重复的 JavaScript 库（data-fns 和 moment.js），切换到 lodash-es，删除所有 jQuery 的用法 - 查看数据以识别较少使用的功能并将其从代码中删除，从而减少产品详细信息页面上的 JS 大小 200+kb。
|
||||||
- **搜索引擎优化（SEO）**
|
|
||||||
- 使用 SEO 工具（例如 Ahrefs）持续监测 SEO。
|
|
||||||
- 与营销团队合作，确保营销内容包含 Ahrefs 显示的重要关键字。
|
|
||||||
- 调整页面 URL 以包括 SEO 关键字
|
|
||||||
- 用户体验的改进
|
|
||||||
- 只需单击一个页面即可付款，而不是使用两个页面付款，从而减少了点击次数。
|
|
||||||
- 减小了许多 UI 元素的高度。
|
|
||||||
- 固定检查按钮，这样就不会错过。
|
|
||||||
- 付款方式改进
|
|
||||||
- 分析了 Stripe 结账，并实施了特定国家的地址栏。
|
|
||||||
- 最初只有一种可用的付款方式：信用卡。 得到了数据科学家的帮助，以评估新的支付方式是否受欢迎，以及它们是否值得添加。 我们后来还增加了 PayPal、谷歌支付和苹果支付等支付方式。
|
|
||||||
|
|
||||||
**4. 解决方案评估**
|
**4. 解决方案评估**
|
||||||
|
|
||||||
- **View 和渲染**：选择 Next.js，因为它由 Vercel 支持，拥有最大的社区。 React 也是最流行的 UI 库，最容易为之招聘。
|
* **视图和渲染**：选择 Next.js，因为它有 Vercel 的支持，并且拥有最大的社区。 React 也是最流行的 UI 库，并且也最容易找到工作。
|
||||||
- **样式**：Tailwind，因为它是相当可靠和未来可靠的选择。
|
* **样式**：Tailwind，因为它是一个相当可靠且面向未来的选择。
|
||||||
|
|
||||||
**5. 监控和调整**
|
**5. 监控和调整**
|
||||||
|
|
||||||
- 在 2 个月的时间内监控性能和转化率，并在 A/B 测试中推出新网站。
|
* 在为期 2 个月的 A/B 测试中推出了新网站，同时监控了性能和转化率。
|
||||||
- 以前转换率较低的国家，其转换率提高了近 50%。
|
* 此前转化率较低的国家/地区，转化率提高了近 50%。
|
||||||
|
|
||||||
#### 结果
|
#### 结果
|
||||||
|
|
||||||
- Lighthouse 分数已提高到 92。
|
* Lighthouse 分数提高到 92。
|
||||||
- 加载速度提高至 1.5 秒
|
* 加载速度提高到 1.5 秒
|
||||||
- 转化率提高至 2.5％
|
* 转化率提高到 2.5%
|
||||||
- 在最近的调查中，开发人员的速度已经提高，现在更容易将更多人招聘到团队中，因为更多人了解 React 而不是其他框架。
|
* 在最近的调查中，开发人员的速度有所提高，现在更容易招聘人员加入团队，因为更多的人比其他框架更了解 React。
|
||||||
|
|
||||||
## 可能的后续问题的本质
|
## 可能的后续问题性质
|
||||||
|
|
||||||
正如我们在[行为面试准备概述]中所提到的，面试官鼓励依靠后续问题更多地了解候选人的思考过程和动机，这些后续问题通常属于以下类别：
|
正如我们在 [行为面试准备概述](/behavioral-interview-guidebook) 中所暗示的那样，鼓励面试官更多地依赖后续问题来真正了解候选人的思维过程和动机，这些问题通常属于以下几类：
|
||||||
|
|
||||||
- 您认为您为什么会这样做？
|
* 你认为你为什么做了（插入操作）？
|
||||||
- 你为什么不那样做？
|
* 你为什么不做（插入操作）？
|
||||||
- 如果换成后见之明，你会如何做事情？
|
* 事后看来，你将如何做不同的事情？
|
||||||
|
|
||||||
在解决问题或实现结果的问题上，面试官最有可能探究这样的问题，以帮助他们更好地了解候选人：
|
对于解决问题或追求结果的问题，面试官很可能会探究问题，以帮助他们更多地了解：
|
||||||
|
|
||||||
- **任务/问题/目标的来源**（理解主动性和积极性的水平）：
|
* **任务/问题/目标的来源**（了解主动性和主动性）：
|
||||||
- 项目或任务是否由您发起的？ 以及在什么程度上？
|
* 该项目或任务是由您发起的吗？ 在什么程度上？
|
||||||
- 潜在的想法是来自你，还是只是执行的计划？
|
* 潜在的想法来自您，还是只是执行计划？
|
||||||
- 你是如何得到利益相关者的支持，甚至在这方面的工作？
|
* 您如何获得利益相关者的支持，甚至可以开展这项工作？
|
||||||
- **候选人的角色和实际贡献**：
|
* **候选人的角色和实际贡献**：
|
||||||
- 是否涉及问题解决的团队？
|
* 是否有一个团队参与解决问题或实现目标？
|
||||||
- 哪些措施是由自己主动采取或仅由自己做出贡献的？
|
* 您自己主动发起或完全由您贡献了哪些行动，其他人做了什么？
|
||||||
- **优先考虑解决的问题或目标**：
|
* **确定要实现的问题或目标**：
|
||||||
- 是否有理由将特定的问题或目标视为优先解决或有限时间内必须解决，而其他问题或根本目标存在更重要？
|
* 是否有原因说明为什么优先解决或完成此特定问题或目标而不是其他问题或目标？
|
||||||
- 这个问题或根本目标是否已被公司中的其他团队解决了？
|
* 是否有另一个问题或根本目标应该更重要？
|
||||||
- 这个问题不是已经由公司的另一个团队解决了吗？ 为什么要重新制定解决办法？
|
* 这个问题是否尚未由公司的另一个团队解决？ 为什么必须重新发明解决方案？
|
||||||
- **选择适当的度量标准或目标，以及是否在发布后进行了测量**：
|
* **选择适当的指标/目标，以及它们是否在发布后进行了衡量**：
|
||||||
- 是否设置了定量或定性的目标，以及如何决定的？
|
* 是否设定了任何定量或定性目标，以及如何决定？
|
||||||
- 它们是如何在发布后被测量的，结果如何？
|
* 它们在发布后是如何衡量的，结果如何？
|
||||||
- 如果问题已解决，那么将采取什么措施确保不再发生同样的问题？
|
* 如果问题得到解决，采取了哪些措施来确保不会再次发生同样的问题？
|
||||||
- **使用足够的信息驱动决策**：
|
* **使用足够的信息来推动决策**：
|
||||||
- 您依赖哪些研究或数据来进行决策/选择要解决的问题？
|
* 您依赖哪些类型的研究或数据来做出决策/选择要解决的问题？
|
||||||
- 您花费多少时间研究和收集信息？
|
* 您花了多少时间进行研究和收集信息？
|
||||||
- 您如何在收集信息/规划和执行计划之间保持平衡？
|
* 您如何在收集信息/计划和实际执行计划之间取得平衡？
|
||||||
- **选择正确的解决方案**：
|
* **选择正确的解决方案**：
|
||||||
- 考虑了哪些其他解决方案，各自的利弊如何？
|
* 考虑了哪些其他解决方案，以及每个解决方案的优缺点是什么？
|
||||||
- 为什么选择了最终的解决方案？
|
* 为什么选择最终的解决方案？
|
||||||
- 谁提出了解决方案的原始想法？ 他们是如何得出的？
|
* 解决方案最初的想法是谁提出的？ 它们是如何得出的？
|
||||||
|
|
||||||
## 样例解决问题的问题和答案
|
## 解决问题的示例问题和答案
|
||||||
|
|
||||||
将上述样本故事调整为回答特定问题。
|
根据上述示例故事定制答案以回答具体问题。
|
||||||
|
|
||||||
{/* TODO: Gina */}
|
{/* TODO: 吉娜 */}
|
||||||
|
|
||||||
- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
|
* 您能否告诉我您使用数据来驱动工程决策的经历？
|
||||||
- 你可以提供一个你必须解决和修复复杂问题的项目的例子吗？
|
* 您能否提供一个您必须对项目中的复杂问题进行故障排除和修复的示例？
|
||||||
- 你能描述一下你是如何创意地解决工程问题或实现有意义的指标改进的吗？
|
* 您能否描述一下您解决工程问题或实现有意义的指标改进的经历？
|
||||||
- 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
|
* 您能否描述一下您必须做出重要的工程决策以及您如何在权衡之间做出决定的经历？
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "2446dee0",
|
||||||
|
"description": "3717148a",
|
||||||
|
"seo_title": "5b8f16f7",
|
||||||
|
"seo_description": "dbb07feb",
|
||||||
|
"social_title": "6e02ca93"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"ede2bd47",
|
||||||
|
"55f978b2",
|
||||||
|
"ab56b39c",
|
||||||
|
"1b5c32e",
|
||||||
|
"bac07c80",
|
||||||
|
"8ae8f8dd",
|
||||||
|
"f5caf9ea",
|
||||||
|
"c40c20bd",
|
||||||
|
"c22426e6",
|
||||||
|
"c30eb869",
|
||||||
|
"a810dc72",
|
||||||
|
"f4c24d6b",
|
||||||
|
"f7a126b9",
|
||||||
|
"9f0aaf7c",
|
||||||
|
"861d8bcb",
|
||||||
|
"49f06657",
|
||||||
|
"3dbd00d7",
|
||||||
|
"8818cfeb",
|
||||||
|
"40200ead",
|
||||||
|
"6366bfde",
|
||||||
|
"d68ddeb",
|
||||||
|
"87ba9aa9",
|
||||||
|
"61e6f05d",
|
||||||
|
"ecf73b96",
|
||||||
|
"3befb21d",
|
||||||
|
"a180e4db",
|
||||||
|
"8e2b7468",
|
||||||
|
"667b27af",
|
||||||
|
"b14c4a73",
|
||||||
|
"24c8a4f5",
|
||||||
|
"eeb58dae",
|
||||||
|
"150a73d0",
|
||||||
|
"5a43b873",
|
||||||
|
"c8e84db8",
|
||||||
|
"6d6a0098",
|
||||||
|
"16f26f58",
|
||||||
|
"79bea09f",
|
||||||
|
"d905b6a8",
|
||||||
|
"f5b0ace8",
|
||||||
|
"4af8b5f6",
|
||||||
|
"f3602576",
|
||||||
|
"78fd55",
|
||||||
|
"97faea64",
|
||||||
|
"dc09fcf8",
|
||||||
|
"1a718cd5",
|
||||||
|
"95d454dd",
|
||||||
|
"61df4c1b",
|
||||||
|
"77f37db6",
|
||||||
|
"17861f37",
|
||||||
|
"defc0b3b",
|
||||||
|
"b9fd1401",
|
||||||
|
"15ecd443",
|
||||||
|
"f12ce49a",
|
||||||
|
"a9a99bb2",
|
||||||
|
"e09f04fb",
|
||||||
|
"4e1f5173",
|
||||||
|
"eba740a8",
|
||||||
|
"d0f6daf5",
|
||||||
|
"3a5732d2",
|
||||||
|
"e7721211",
|
||||||
|
"1736d727",
|
||||||
|
"ec3bfcee",
|
||||||
|
"77408461",
|
||||||
|
"8af5a8e9",
|
||||||
|
"ae8160b2",
|
||||||
|
"2a493cf4",
|
||||||
|
"e71bdbca",
|
||||||
|
"d9d7d69a",
|
||||||
|
"573ad095",
|
||||||
|
"1f5b00f1"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"ede2bd47",
|
||||||
|
"55f978b2",
|
||||||
|
"ab56b39c",
|
||||||
|
"1b5c32e",
|
||||||
|
"bac07c80",
|
||||||
|
"8ae8f8dd",
|
||||||
|
"f5caf9ea",
|
||||||
|
"c40c20bd",
|
||||||
|
"c22426e6",
|
||||||
|
"c30eb869",
|
||||||
|
"a810dc72",
|
||||||
|
"f4c24d6b",
|
||||||
|
"f7a126b9",
|
||||||
|
"9f0aaf7c",
|
||||||
|
"861d8bcb",
|
||||||
|
"49f06657",
|
||||||
|
"3dbd00d7",
|
||||||
|
"8818cfeb",
|
||||||
|
"40200ead",
|
||||||
|
"6366bfde",
|
||||||
|
"d68ddeb",
|
||||||
|
"87ba9aa9",
|
||||||
|
"61e6f05d",
|
||||||
|
"ecf73b96",
|
||||||
|
"3befb21d",
|
||||||
|
"a180e4db",
|
||||||
|
"8e2b7468",
|
||||||
|
"667b27af",
|
||||||
|
"b14c4a73",
|
||||||
|
"24c8a4f5",
|
||||||
|
"eeb58dae",
|
||||||
|
"150a73d0",
|
||||||
|
"5a43b873",
|
||||||
|
"c8e84db8",
|
||||||
|
"6d6a0098",
|
||||||
|
"16f26f58",
|
||||||
|
"79bea09f",
|
||||||
|
"d905b6a8",
|
||||||
|
"f5b0ace8",
|
||||||
|
"4af8b5f6",
|
||||||
|
"f3602576",
|
||||||
|
"78fd55",
|
||||||
|
"97faea64",
|
||||||
|
"dc09fcf8",
|
||||||
|
"1a718cd5",
|
||||||
|
"95d454dd",
|
||||||
|
"61df4c1b",
|
||||||
|
"77f37db6",
|
||||||
|
"17861f37",
|
||||||
|
"defc0b3b",
|
||||||
|
"b9fd1401",
|
||||||
|
"15ecd443",
|
||||||
|
"f12ce49a",
|
||||||
|
"a9a99bb2",
|
||||||
|
"e09f04fb",
|
||||||
|
"4e1f5173",
|
||||||
|
"eba740a8",
|
||||||
|
"d0f6daf5",
|
||||||
|
"3a5732d2",
|
||||||
|
"e7721211",
|
||||||
|
"1736d727",
|
||||||
|
"ec3bfcee",
|
||||||
|
"77408461",
|
||||||
|
"8af5a8e9",
|
||||||
|
"ae8160b2",
|
||||||
|
"2a493cf4",
|
||||||
|
"e71bdbca",
|
||||||
|
"d9d7d69a",
|
||||||
|
"573ad095",
|
||||||
|
"1f5b00f1"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,161 +1,164 @@
|
||||||
---
|
---
|
||||||
title: 在软件工程面试结束时问面试官的有用问题
|
title: 面试结束时要问的问题
|
||||||
description: 了解在前端开发/网站开发/软件工程面试中最好问的问题。 由大型科技公司的前面试官撰写。
|
description: 了解在前端面试结束时要问的最佳问题。
|
||||||
|
seo_title: 在前端面试结束时要问的有用问题
|
||||||
|
seo_description: 了解在前端面试结束时要问的最佳问题。由来自 Big Tech 的前面试官撰写。
|
||||||
|
social_title: 面试结束时要问的问题 | GreatFrontEnd
|
||||||
---
|
---
|
||||||
|
|
||||||
在焦急地寻找工作时，我们中的一些人可能会忘记与一个糟糕的团队合作可能比等待好机会更糟糕。 实际上，面试是候选人与实际在公司工作的人交谈并了解更多关于那里的实践的宝贵机会。 在加入工作之前，您应该评估有关工作的几个关键方面：
|
为了获得一份工作，我们中的一些人可能会忘记，加入一个糟糕的团队可能比等待一个好机会更糟糕。面试实际上是候选人与实际在该公司工作的人交谈并了解更多关于那里实践的宝贵机会。在加入之前，您应该评估关于一份工作的几个关键方面：
|
||||||
|
|
||||||
- 工作对您是否有趣？
|
* 这项工作对您来说会很有趣吗？
|
||||||
- 是否有职业发展的空间？
|
* 有职业发展的空间吗？
|
||||||
- 同事/您的经理是否合作并易于共同工作？
|
* 您的队友/您的经理是否乐于合作并且容易共事？
|
||||||
|
|
||||||
面试结束时问好问题可以帮助候选人实现两个目标：
|
在面试结束时提出的好问题可以帮助候选人实现 2 个目标 - 留下好印象并帮助候选人评估该公司是否真的适合他们。
|
||||||
|
|
||||||
在本文中，我们提供了一个有用问题的大型列表，您可以问询以实现此目的。 问题按面试官/面试轮次以及目标组织。
|
在本文中，我们提供了一份您可能提出的有用问题的长列表，以实现此目的。问题按面试官/面试轮次以及目标进行组织。
|
||||||
|
|
||||||
## 与人力资源/招聘专员的筛选轮次
|
## 与人力资源/招聘人员的筛选轮次
|
||||||
|
|
||||||
招聘专员通常不直接在雇用您的团队中工作。 因此，询问团队的日常或现场情况可能不够深入。 但是，您仍然可以了解到招聘人员会了解的信息，例如候选人评估标准或一般公司政策等内容。
|
招聘人员通常不会直接在招聘您的团队中工作。因此，询问有关团队的日常或实际情况的问题可能不太有见地。但是，您仍然可以找到招聘人员会知道的信息，例如候选人评估标准或一般公司政策。
|
||||||
|
|
||||||
### 了解招聘团队正在寻找的标准
|
### 了解招聘团队正在寻找的标准
|
||||||
|
|
||||||
这些问题非常有用，以了解招聘团队正在优先考虑的因素，他们可能已经与人力资源/招聘专员通信，以便他们可以相应地筛选候选人。
|
这些问题对于了解招聘团队正在优先考虑什么非常有用，他们可能已经事先与人力资源/招聘人员沟通，以便他们可以相应地帮助筛选候选人。
|
||||||
|
|
||||||
#### “团队在理想候选人中寻找的技能、特征或经历是什么？”
|
#### “团队在理想的候选人中寻找哪些技能、特征或经验？”
|
||||||
|
|
||||||
这些问题非常宝贵，因为您可以确定招聘团队在招聘中优先考虑的关键标准，这样可以让您在与招聘团队的下一轮面试中专门展示这些所需的技能，特征或经验。
|
这些非常有用，因为您将能够查明团队在招聘中优先考虑的关键标准，这使您能够在下一轮与招聘团队一起具体展示所需的技能、特征或经验。
|
||||||
|
|
||||||
这个问题非常有用，因为通常很难猜测面试官真正想找什么。 招聘通常是一个中的命中或失误，而招聘经理通常特别兴奋地发现那些似乎完全符合他们内部招聘标准的候选人。
|
这个问题非常有用，因为通常很难猜测面试官真正寻找的是什么。招聘通常是命中或错过，招聘经理通常特别兴奋地找到似乎完全符合其内部招聘标准的候选人。
|
||||||
|
|
||||||
#### “这个职位的预期开始日期是什么时候？”
|
#### “该职位的预计开始日期是什么时候？”
|
||||||
|
|
||||||
通常情况下，当必须迅速填补职位时，开始日期可能是一个重要的标准。 如果您有延迟的开始日期，可以在早期与招聘人员确认，以避免浪费时间和精力。
|
通常情况下，开始日期可能是在必须紧急填补职位时的关键标准。如果您有延迟的开始日期，您可以尽早与招聘人员核对，以避免浪费他们和您的时间。
|
||||||
|
|
||||||
### 更多了解招聘团队
|
### 了解更多关于招聘团队的信息
|
||||||
|
|
||||||
#### “我会有机会在面试过程中见到我潜在的经理或同事吗？”
|
#### "在面试过程中，我是否有机会见到我的潜在经理或同事？"
|
||||||
|
|
||||||
如果您要在过程中见到招聘团队，那么知道哪些是面试轮次，如果可能的话，是谁会很有帮助。 这将帮助您准备相关问题或事先进行背景检查。
|
如果你要在面试过程中见到招聘团队，最好知道是哪几轮，如果可能的话，知道都有谁。这将帮助你准备相关问题或事先进行背景调查。
|
||||||
|
|
||||||
#### “您能告诉我有关直接与我一起工作的团队的情况，包括我将向谁汇报以及团队的结构？”
|
#### "你能告诉我关于我将直接合作的团队的情况吗，包括我将向谁汇报以及团队的结构？"
|
||||||
|
|
||||||
这个问题可能有用，也可能没有，这取决于招聘人员对招聘团队的熟悉程度（有时根本不熟悉）。 但是，您仍然可能会获得有关团队结构或动态的有用见解。
|
这个问题可能有用也可能没用，这取决于招聘人员对招聘团队的熟悉程度（有时根本不熟悉）。但是，你仍然可以对团队的结构或动态获得很好的见解。
|
||||||
|
|
||||||
### 从公司的角度获得更多了解
|
### 从公司的角度了解更多
|
||||||
|
|
||||||
#### “公司当前专注于什么目标，团队如何支持实现这些目标？”
|
#### "公司目前关注的目标是什么，这个团队如何支持实现这些目标？"
|
||||||
|
|
||||||
这个问题为您提供有关团队在公司中的重要性和位置的见解，包括团队如何为公司的关键目标做出贡献。 这可以提供关键见解，有关团队的关键提供的内容和优先级以及相应的如何最好为团队服务。 在不好的时候，优先级较低的团队也可能被裁员。
|
这个问题让你了解团队在公司中的重要性和地位，包括团队如何为公司的关键目标做出贡献。这可以让你对团队的关键交付成果和优先事项有关键的见解，并相应地了解你如何才能最好地为团队服务。在不景气的时候，较低优先级的团队也可能被解雇。
|
||||||
|
|
||||||
#### “您能举几个公司文化最理想和最不理想的方面的例子吗？”
|
#### "你能给我举例说明公司文化中最理想和最不理想的方面吗？"
|
||||||
|
|
||||||
虽然人力资源/招聘可能不熟悉团队的日常工作，但他们很可能了解公司的政策和文化。 这可以给您提供一些有用的见解，这些见解也可能在下一次面试中出现。
|
虽然人力资源/招聘可能不熟悉团队的日常工作，但他们很可能了解公司的政策和文化。这可以给你一些有用的见解，这些见解也可以延续到下一次面试。
|
||||||
|
|
||||||
#### “在工作时间以外，员工多久会适时提供帮助？”
|
#### "员工们多久在工作时间之外的时间里出现"
|
||||||
|
|
||||||
在类似的范围内，我们想知道是否存在有关加班工作的总体公司文化（而不太明显）。 这对一些人来说可能是个问题，应该尽快解决。
|
同样，我们想知道是否有普遍的公司文化支持或反对加班（不要太明显）。这可能是一些人的一个决定性因素，应该尽快澄清。
|
||||||
|
|
||||||
## 与雇用团队/您将加入的团队的轮次
|
## 与招聘团队/你将加入的团队的轮次
|
||||||
|
|
||||||
对于前端开发人员/网站开发人员，与工程团队的轮次通常意味着与雇用团队本身的轮次。
|
作为前端开发人员/Web开发人员，与工程团队的轮次通常意味着与招聘团队本身的轮次。
|
||||||
|
|
||||||
这些轮次中提出的问题非常关键，以阐明您在实际加入团队时可能会遇到的体验（注： 向潜在经理提出问题的部分在下一节中）。
|
在这些轮次中要问的问题对于阐明你实际加入团队时可能获得的体验至关重要（注意：本节侧重于向你潜在的团队成员（经理除外）提出的问题。向你潜在的经理提出的问题在下一节中）。
|
||||||
|
|
||||||
### 检查工作的日常现实是否符合您的目标
|
### 检查工作的日常现实是否与你的目标一致
|
||||||
|
|
||||||
#### “您能向我展示我将要从事的项目示例以及我将使用的技术？ 我是在维护项目还是从头开始构建项目？”
|
#### "你能给我展示一下我将要参与的项目示例以及我将使用的技术吗？我将维护项目还是从头开始构建？"
|
||||||
|
|
||||||
这个问题有助于阐明您将要从事的具体工作以及使用的一些技术。 一般来说，有机会从零开始构建产品可能是更好的学习机会，而不是做小的渐进式特性。
|
这个问题有助于阐明你将要做的确切工作类型，以及使用的一些技术。一般来说，有机会从头开始构建产品可能比做小的、增量功能提供更好的学习机会。
|
||||||
|
|
||||||
所使用的技术类型也可能是一个标准，因为学习使用现代技术栈（并且具有精通该区域的导师）可能更有利于您的职业增长。
|
使用的技术类型也可能是一个标准，因为学习使用现代技术栈（并拥有精通该领域的导师）可能对你的职业发展更有利。
|
||||||
|
|
||||||
#### “您能描述团队开发人员的典型工作日或一周吗？” /“您能为典型项目的流程向我解释一下吗？”
|
#### "你能描述一下你们团队中开发人员的典型一天或一周吗？" / "你能带我了解一个典型项目的过程吗"
|
||||||
|
|
||||||
这个问题有助于澄清很多事情-开发人员可能需要完成的任务，您将与之合作的利益相关者，以及项目管理过程和生命周期。
|
这个问题有助于澄清很多事情——开发人员可能需要执行的任务类型、你将与之合作的利益相关者，以及项目管理流程和生命周期。
|
||||||
|
|
||||||
#### “您预计此职位的人员可能会面临哪些挑战？”
|
#### “你希望担任该职位的人面临哪些挑战？”
|
||||||
|
|
||||||
这个问题有助于揭示一些潜在的问题代码库或工作流程，这些问题可能成为某些人的断奶器。 它可能还揭示了功能紊乱的团队或流程。
|
这个问题有助于揭示代码库或工作流程中的一些潜在问题，这些问题可能对某些人来说是决定性的。它也可能揭示功能失调的团队或流程。
|
||||||
|
|
||||||
#### “在最繁忙和最困难的时期，这个角色是什么样的？”
|
#### “这个职位最忙和最艰难的时候是什么样子的？”
|
||||||
|
|
||||||
询问此问题可能有助于揭示角色的不合理高期望或压力，从而更详细地阐明工作与生活平衡的情况，而不需要明确询问这一点。
|
问这个问题可以帮助揭示对该职位不合理的高期望或压力，从而阐明更多关于工作与生活的平衡，而无需明确询问。
|
||||||
|
|
||||||
#### “是否有机会进行伸展任务，可以在其中学习和使用新技能？”
|
#### “我是否有机会进行拓展性任务，在那里我可以学习和使用新技能？”
|
||||||
|
|
||||||
如果您是那些寻求在角色中提高技能或组合作品的人，请务必问这个问题，以了解您是否有合理的自主权，以根据请求在更复杂的项目上工作。
|
如果您是希望在该职位上提升技能或作品集的人，请务必提出这个问题，以了解您是否有合理的自主权来根据要求处理更复杂的项目。
|
||||||
|
|
||||||
### 检查您的潜在经理的管理风格是否适合您的成长
|
### 检查您潜在经理的管理风格是否适合您的成长
|
||||||
|
|
||||||
#### 员工与公司分享哪些信息？ 收入，利润，支出范围，薪资等是否共享？
|
#### 与员工共享什么类型的信息？是否共享收入、利润、支出、工资范围等？
|
||||||
|
|
||||||
这个问题根据公司的透明度水平区分公司。 有些候选人可能会发现这很重要，因为信息可能很少，因此您的报酬和晋升时间表受到很少的控制。
|
这个问题通过公司的透明度水平来区分公司。一些候选人可能会觉得这很重要，因为信息很少，因此对您的薪酬和晋升计划的控制也很少，这可能会令人沮丧。
|
||||||
|
|
||||||
#### 我要向谁汇报？ 您能告诉我更多有关他们的监督方式吗？
|
#### 我将向谁汇报？您能告诉我更多关于他们的监督方式吗？
|
||||||
|
|
||||||
这个问题阐明了您的潜在经理是一个不干预还是需要查看您的工作细节的人。 这可能对您的工作经验产生很大的影响。
|
这个问题阐明了您潜在的经理是那种袖手旁观的人，还是倾向于深入研究您的工作细节。这可能会对您在工作中的体验产生很大影响。
|
||||||
|
|
||||||
### 了解更多有关团队动态和文化的信息
|
### 更多地了解团队动态和文化
|
||||||
|
|
||||||
#### “团队结构是什么样的，这个职位如何适应团队？”
|
#### “团队结构是什么，这个角色如何融入团队？”
|
||||||
|
|
||||||
这个问题非常有用，因为它可以帮助您在整个团队结构的上下文中描绘角色，团队有多大，团队的每个部分大致是做什么的。
|
这个问题很有用，因为它有助于您将角色与整体团队结构、团队规模以及团队每个部分大致做什么联系起来。
|
||||||
|
|
||||||
#### “这里的工作环境是什么样的-工作是否更具协作性还是更独立？”
|
#### “您如何描述这里的工作环境——工作通常是更协作还是更独立？”
|
||||||
|
|
||||||
这个问题间接阐明了团队的可能文化-人们是否在单独工作或是否经常彼此沟通。
|
这个问题间接阐明了团队可能的文化——人们是孤军奋战还是经常相互交流。
|
||||||
|
|
||||||
#### “您能举出团队文化中最理想和最不理想方面的例子吗？”
|
#### “您能给我举一些团队文化中最理想和最不理想方面的例子吗？”
|
||||||
|
|
||||||
另一个开放式问题，它允许您获得更多深入了解，这些深入了解可能无法从更一般的问题中出现。
|
另一个开放式、有用的问题，可以让你获得更多可能不会从更一般的提问中浮现出来的见解。
|
||||||
|
|
||||||
#### “团队成员多久会在工作时间以外提供帮助？”
|
#### “团队成员在工作时间之外多久会让自己有空？”
|
||||||
|
|
||||||
这个问题间接阐明了团队文化与工作生活平衡的关系。
|
这个问题间接阐明了团队在工作与生活平衡方面的文化。
|
||||||
|
|
||||||
## 与潜在经理的轮次
|
## 与潜在经理的会面
|
||||||
|
|
||||||
在这些轮次中，利用机会了解您的经理的管理风格，绩效审查过程/标准以及他/她对角色的期望（这可能让您对自己在工作中的表现有所了解）
|
在这些环节中，最好借此机会了解你的经理的管理风格、绩效考核流程/标准，以及他/她对该职位的期望（这可以让你了解你在这份工作中的表现）。
|
||||||
|
|
||||||
- “能告诉我您所提供的监督类型吗？”
|
* 你能告诉我你提供的监督类型吗？
|
||||||
- “回想一下您之前看到的人，他们在这项工作中表现良好和不好之间有什么区别？”
|
* 回顾一下你以前见过做这项工作的人，哪些人做得好，哪些人做得非常好？
|
||||||
- “在他们的前六个月和第一年内，您希望这个人会取得什么成就？”
|
* 你希望这个人能在最初的六个月和第一年完成什么？
|
||||||
- “过去一年，组织最大的成就是什么？”
|
* 过去一年中，该组织的主要成就是什么？
|
||||||
|
|
||||||
## 与团队之外的角色轮次（可能不知道具体的团队运营）
|
## 与团队之外的角色（可能不了解团队的具体运作）的会面
|
||||||
|
|
||||||
### 向创始人提问
|
### 要问创始人的问题
|
||||||
|
|
||||||
- “公司当前专注于什么目标，团队如何支持实现这些目标？”
|
* 公司目前关注的目标是什么，这个团队如何支持实现这些目标？
|
||||||
- “您认为未来几年公司的走向是什么？”
|
* 你认为这家公司在未来几年会走向何方？
|
||||||
- “公司整体当前的关注重点是什么？”
|
* 整个公司目前的重点领域是什么？
|
||||||
|
|
||||||
### 向团队的协作者提问
|
### 询问团队合作者的问题
|
||||||
|
|
||||||
通常情况下会与您没有直接工作的人进行面试。 在这些情况下，最好扩大范围，并询问有关一般公司政策或文化的问题。 如果他们是紧密合作伙伴，您仍然可以向他们询问有关您的团队的问题。
|
与你可能不会直接共事的人进行面试是很常见的。在这些情况下，最好撒下一张更大的网，询问有关一般公司政策或文化的问题。如果他们是密切的合作者，你仍然可以问他们关于你的团队的问题。
|
||||||
|
|
||||||
- “您在工作中偶尔或经常面临的挑战是什么？”
|
* 您在工作中偶尔或经常会面临哪些挑战？
|
||||||
- “您能告诉我要和我一起工作的团队吗？”
|
* 您能告诉我您将要与之共事的团队吗？
|
||||||
- “公司中有哪些学习和专业发展机会？”
|
* 公司有哪些学习和职业发展机会？
|
||||||
|
|
||||||
## 应该避免的问题
|
## 避免提出的问题
|
||||||
|
|
||||||
以下是一些您在面试结束时不应提出的问题的例子：
|
以下是一些在面试结束时不要问的问题的例子：
|
||||||
|
|
||||||
### 在早期避免询问薪水和福利问题
|
### 避免过早询问薪资和福利
|
||||||
|
|
||||||
只有在团队已经希望雇用您时（即在流程的最后），才开始讨论薪水，除非他们询问您的薪水要求。
|
只有当团队已经热衷于聘用你时（即在流程结束时），才开始讨论薪资，除非他们询问你的薪资要求。
|
||||||
|
|
||||||
- “初始薪水是多少？”
|
* 起薪是多少？
|
||||||
- “您能告诉我有关您的医疗保健保险的情况吗？”
|
* 你能告诉我你的健康保险吗？
|
||||||
- “您的带薪休假政策是什么？”
|
* 你们的带薪休假政策是什么？
|
||||||
- “如果我得到这份工作，我什么时候可以请假？”
|
* 如果我得到这份工作，我什么时候可以休假？
|
||||||
- 你们多长时间发放一次加薪？
|
* 你多久加一次薪？
|
||||||
- 你们多长时间发放一次奖金？
|
* 你多久发一次奖金？
|
||||||
- “我可以期望哪些福利和优惠？”
|
* 我能期待什么样的福利？
|
||||||
|
|
||||||
### 避免询问应该公开的问题
|
### 避免询问应公开的信息
|
||||||
|
|
||||||
- “这家公司是做什么的？”
|
* 这家公司是做什么的？
|
||||||
- “公司的办公室位于何处？”
|
* 公司的办公室在哪里？
|
||||||
- “公司的首席执行官是谁？”
|
* 公司的首席执行官是谁？
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "9b50d4e6",
|
||||||
|
"description": "12a0ec43",
|
||||||
|
"seo_title": "9b50d4e6",
|
||||||
|
"social_title": "9bd5fe4d",
|
||||||
|
"seo_description": "12a0ec43"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"ed63c694",
|
||||||
|
"60c2ed13",
|
||||||
|
"24aa233a",
|
||||||
|
"a80ffc1",
|
||||||
|
"61cd42e9",
|
||||||
|
"5acd00cd",
|
||||||
|
"46b091bd",
|
||||||
|
"c410b8f7",
|
||||||
|
"5827200e",
|
||||||
|
"e69de77e",
|
||||||
|
"95356240",
|
||||||
|
"98cc5dcb"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"ed63c694",
|
||||||
|
"60c2ed13",
|
||||||
|
"24aa233a",
|
||||||
|
"a80ffc1",
|
||||||
|
"61cd42e9",
|
||||||
|
"5acd00cd",
|
||||||
|
"46b091bd",
|
||||||
|
"c410b8f7",
|
||||||
|
"5827200e",
|
||||||
|
"e69de77e",
|
||||||
|
"95356240",
|
||||||
|
"98cc5dcb"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,56 +1,59 @@
|
||||||
---
|
---
|
||||||
title: 准备面试的最重要的行为面试问题
|
title: 准备面试的重要行为面试问题
|
||||||
description: 前端开发人员/网络开发人员/软件工程师应该练习的顶级行为面试问题。 包括针对有经验的工程师的额外问题。
|
description: 通过先解决最常问的问题，为你的行为面试做好充分准备
|
||||||
|
seo_title: 准备面试的重要行为面试问题
|
||||||
|
social_title: 重要的行为面试问题 | GreatFrontEnd
|
||||||
|
seo_description: 通过先解决最常问的问题，为你的行为面试做好充分准备
|
||||||
---
|
---
|
||||||
|
|
||||||
在本文中，我们将覆盖候选人在面试之前应该练习的顶级问题（按照高频率排列）。
|
在本文中，我们将介绍候选人在面试前应该练习的常见问题（按出现频率排序）。
|
||||||
|
|
||||||
正如[行为面谈准备概览](/behavioral-interview-guidebook/)中所提到的那样，大多数行为面谈问题可分为八个主题，以进行有效的准备工作。 我们建议候选人利用这一战略，然后请参阅下面的名单以供实践。
|
正如在 [行为面试准备概述](/behavioral-interview-guidebook/) 中所暗示的那样，大多数行为面试问题可以分为 8 个主要主题，以便有效准备。我们建议候选人使用此策略进行准备，然后参考下面的列表进行练习。
|
||||||
|
|
||||||
## 最常见的 16 个问题
|
## 前 16 个最常见的问题
|
||||||
|
|
||||||
1. 向我介绍你自己。
|
1. 介绍一下你自己。
|
||||||
2. 请告诉我你的简历经历。
|
2. 浏览一下你的简历。
|
||||||
3. 您为什么申请了这个角色和团队？
|
3. 你为什么申请这个职位和团队？
|
||||||
4. 你有什么问题要问我吗？ (面试结束)
|
4. 你有什么问题要问我吗？（面试结束）
|
||||||
5. 你能告诉我一个你在收到批评或反馈后改进工作的例子吗?
|
5. 你能告诉我你收到批评或反馈后改进工作的一次经历吗？
|
||||||
6. 您能否描述过去的一个项目，在这个项目中，您必须与困难的利益攸关方或团队合作，以及如何处理它？
|
6. 你能描述一个你必须与难相处的利益相关者或队友合作的过去的项目，以及你是如何处理的吗？
|
||||||
7. 你能描述一下你创造性地解决了一个工程问题或实现了有意义的指标改进的时间吗？
|
7. 你能描述一个你创造性地解决了工程问题或实现了有意义的指标改进的经历吗？
|
||||||
8. 你能描述一下你不得不做出一个重要的工程决定的时候，以及你是如何在各种权衡之间做出决定的吗？
|
8. 你能描述一个你必须做出重要的工程决策以及你如何在权衡利弊之间做出决定的经历吗？
|
||||||
9. 你能举出一个例子，说明你曾经不得不在一个团队项目中工作，并不得不与他人妥协以达成解决方案？
|
9. 你能举一个你必须在团队项目中工作并且必须与他人妥协以达成解决方案的例子吗？
|
||||||
10. 你认为你最需要改进的地方是什么？
|
10. 你认为你最大的改进领域是什么？
|
||||||
11. 描述一次你失败了，不得不改变路线并采用新的方法。 你怎么知道改变是必要的？
|
11. 描述一个你失败并不得不改变方向并采用新方法的时间。你如何知道改变是必要的？
|
||||||
12. 你能描述一下你不得不在紧迫的时间内工作，但却没有得到明确的工作方向的时候吗？
|
12. 你能描述一个你必须在紧张的时间表内工作但没有得到明确的如何进行指示的经历吗？
|
||||||
13. 你能描述一下你不得不适应不断变化的优先事项或要求的时候吗？
|
13. 你能描述一个你必须适应不断变化的优先级或要求的经历吗？
|
||||||
14. 请告诉我，你在工作之外学习了一项新技能，并将其应用到工作中。
|
14. 告诉我你学习了工作之外的新技能并将其应用于你的工作的一次经历。
|
||||||
15. 请告诉我，你是如何在观察到别人利用新技能获得巨大成功后学会了新技能的。
|
15. 告诉我你观察到其他人利用它取得巨大成功后学习了一套新技能的一次经历
|
||||||
16. 你能描述一下你不得不向非技术性听众有效传达技术信息的时候，以及你是如何处理的吗？
|
16. 你能描述一个你必须有效地向非技术受众传达技术信息以及你如何处理它的经历吗？
|
||||||
|
|
||||||
## 给领导（技术负责人或工程经理）的其他问题
|
## 领导者的附加问题（技术负责人或工程经理）
|
||||||
|
|
||||||
### 团队管理和领导
|
### 团队管理和领导力
|
||||||
|
|
||||||
17. 你如何对待为你的团队制定和实现目标的过程？
|
17. 你如何处理为你的团队设定和实现目标的过程？
|
||||||
18. 你能告诉我，有一次你不得不在预算紧张或资源有限的情况下工作，以实现一个目标？
|
18. 你能告诉我你必须在紧张的预算或有限的资源下实现目标的一次经历吗？
|
||||||
19. 你如何对待与你的团队和利益相关者的合作和沟通？
|
19. 你如何处理与你的团队和利益相关者的协作和沟通？
|
||||||
20. 描述一下你不得不处理一个表现不佳的团队成员的时候。
|
20. 描述一个你必须处理表现不佳的团队成员的经历。
|
||||||
21. 你能描述一下你不得不调整你的管理风格以适应你的团队的需要的时候吗？
|
21. 你能描述一个你必须调整你的管理风格以适应你的团队需求的经历吗？
|
||||||
|
|
||||||
### 跨职能部门的合作
|
### 跨职能协作
|
||||||
|
|
||||||
22. 你是如何对待收集并将用户或客户的反馈纳入你的工作的过程的？
|
22. 你如何处理收集用户或客户反馈并将其纳入你的工作流程？
|
||||||
23. 你能举个例子，说明你不得不在业务需求和工程复杂性之间取得平衡的时候吗？
|
23. 你能举一个你必须平衡业务需求和工程复杂性的一次经历吗？
|
||||||
|
|
||||||
## 练习的附加问题
|
## 额外的练习题
|
||||||
|
|
||||||
我们将最常见的行为问题归纳为 8 大主题。 在学习时查看更多的练习题：
|
我们将最常见的行为问题归纳为 8 个主要主题。在学习它们的同时，查看其他练习题：
|
||||||
|
|
||||||
- [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
|
* [“介绍一下你自己……”](/behavioral-interview-guidebook/self-introduction)
|
||||||
- “让我来看一下你的简历…”
|
* “浏览一下你的简历……”
|
||||||
- [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here)
|
* [“为什么加入这个团队或公司？”](/behavioral-interview-guidebook/why-work-here)
|
||||||
- [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask)
|
* [“你有什么问题要问我吗？”](/behavioral-interview-guidebook/questions-to-ask)
|
||||||
- "当你...... 的时候告诉我" （分类为以下主题）
|
* “告诉我一个时间……”（分为以下主题）
|
||||||
- [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
|
* [推动结果和解决问题](/behavioral-interview-guidebook/problem-solving)
|
||||||
- [合作](/behavioral-interview-guidebook/collaboration)
|
* [协作](/behavioral-interview-guidebook/collaboration)
|
||||||
- [成长心态](/behavioral-interview-guidebook/growth-mindset)
|
* [成长心态](/behavioral-interview-guidebook/growth-mindset)
|
||||||
- 适应能力和灵活性
|
* 适应性和灵活性
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "115c2b1d",
|
||||||
|
"description": "762b980b",
|
||||||
|
"seo_title": "8e5a4529",
|
||||||
|
"seo_description": "cc792019",
|
||||||
|
"social_title": "abfb9715"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"aac46f7a",
|
||||||
|
"a50d1fd4",
|
||||||
|
"82c95b25",
|
||||||
|
"f7f88325",
|
||||||
|
"592260e0",
|
||||||
|
"b300ca",
|
||||||
|
"55a681ab",
|
||||||
|
"4c8d2b2f",
|
||||||
|
"bddb8c4d",
|
||||||
|
"d761b0ba",
|
||||||
|
"cc5308c2",
|
||||||
|
"b1c5ec39",
|
||||||
|
"c5f1bc22",
|
||||||
|
"1f0e09d4",
|
||||||
|
"8714198c",
|
||||||
|
"7c5ec3df",
|
||||||
|
"7534ac72",
|
||||||
|
"ebc3664d",
|
||||||
|
"86f5f880",
|
||||||
|
"c93680ca",
|
||||||
|
"daa6bfc7",
|
||||||
|
"d7142007",
|
||||||
|
"c2a4a55d",
|
||||||
|
"2a26965a",
|
||||||
|
"e6276c98",
|
||||||
|
"b2442566",
|
||||||
|
"71677eb0",
|
||||||
|
"dea5a0b",
|
||||||
|
"51feaed8",
|
||||||
|
"20884d2e",
|
||||||
|
"2f0b803e",
|
||||||
|
"bd43d29b",
|
||||||
|
"7807f9a8",
|
||||||
|
"d8563046",
|
||||||
|
"4c9b8362",
|
||||||
|
"a6d801f3",
|
||||||
|
"81d2718a",
|
||||||
|
"1a8f1cd",
|
||||||
|
"de2fcc10",
|
||||||
|
"12828ca",
|
||||||
|
"6e936a03"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"aac46f7a",
|
||||||
|
"a50d1fd4",
|
||||||
|
"82c95b25",
|
||||||
|
"f7f88325",
|
||||||
|
"592260e0",
|
||||||
|
"b300ca",
|
||||||
|
"55a681ab",
|
||||||
|
"4c8d2b2f",
|
||||||
|
"bddb8c4d",
|
||||||
|
"d761b0ba",
|
||||||
|
"cc5308c2",
|
||||||
|
"b1c5ec39",
|
||||||
|
"c5f1bc22",
|
||||||
|
"1f0e09d4",
|
||||||
|
"8714198c",
|
||||||
|
"7c5ec3df",
|
||||||
|
"7534ac72",
|
||||||
|
"ebc3664d",
|
||||||
|
"86f5f880",
|
||||||
|
"c93680ca",
|
||||||
|
"daa6bfc7",
|
||||||
|
"d7142007",
|
||||||
|
"c2a4a55d",
|
||||||
|
"2a26965a",
|
||||||
|
"e6276c98",
|
||||||
|
"b2442566",
|
||||||
|
"71677eb0",
|
||||||
|
"dea5a0b",
|
||||||
|
"51feaed8",
|
||||||
|
"20884d2e",
|
||||||
|
"2f0b803e",
|
||||||
|
"bd43d29b",
|
||||||
|
"7807f9a8",
|
||||||
|
"d8563046",
|
||||||
|
"4c9b8362",
|
||||||
|
"a6d801f3",
|
||||||
|
"81d2718a",
|
||||||
|
"1a8f1cd",
|
||||||
|
"de2fcc10",
|
||||||
|
"12828ca",
|
||||||
|
"6e936a03"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,135 +1,141 @@
|
||||||
---
|
---
|
||||||
title: 在自我介绍中给人留下深刻的第一印象的技巧
|
title: 回答“介绍一下你自己”
|
||||||
description: 如何在不同的面试背景下有效地构建你的面试自我介绍，对于前端/网络开发者/软件工程师来说。 参照好的自我介绍的例子。
|
description: 一份关于如何在不同面试环境中有效回答自我介绍问题的指南，面向前端工程师。
|
||||||
|
seo_title: 如何回答“介绍一下你自己” | 行为面试
|
||||||
|
seo_description: 一份关于如何在不同面试环境中有效回答自我介绍问题的指南，面向前端工程师。由来自 Big Tech 的前面试官撰写。
|
||||||
|
social_title: 回答“介绍一下你自己” | GreatFrontEnd
|
||||||
---
|
---
|
||||||
|
|
||||||
自我介绍是你在面试中总是可以期望遇到的事情之一，无论面试形式如何。 因此，为其做准备的投资回报率是相当高的。 大多数时候，你的自我介绍应该短小精悍，用最少的文字给人留下好印象。
|
无论面试形式如何，自我介绍都是你总能遇到的事情之一。因此，为此做准备的投资回报率相当高。大多数时候，你的自我介绍应该简短扼要，用最少的字数传递良好的印象。
|
||||||
|
|
||||||
在这篇文章中，你会发现：
|
在本文中，你将找到：
|
||||||
|
|
||||||
1. 建议为不同的面试环境做准备
|
1. 针对不同面试场景的推荐准备
|
||||||
2. 1 分钟推销（自己）的话术方案
|
2. 1 分钟推介公式
|
||||||
3. 作品集或案例研究展示
|
3. 投资组合或案例研究展示
|
||||||
4. 好的自我介绍的例子
|
4. 好的自我介绍示例
|
||||||
5. 来自招聘经理的提示和故事
|
5. 来自招聘经理的提示和故事
|
||||||
|
|
||||||
## 建议的准备工作
|
## 推荐准备
|
||||||
|
|
||||||
从本质上讲，你应该始终准备一个自我介绍，几乎在所有情况下都要在**1 分钟之内**。
|
本质上，你应始终准备一个**在几乎所有情况下都不到 1 分钟**的自我介绍。
|
||||||
|
|
||||||
在面试之前，最好从招聘人员或招聘经理那里了解更多关于该轮面试的评估标准--特别是你是否会被评估为行为/适合方面，或者纯粹是技术标准。 在大型科技公司，编码回合可能完全不包括行为相关的标准，因此你的自我介绍很可能只是作为主要面试的 "热身"。
|
在面试之前，最好从招聘人员或招聘经理那里了解更多关于该轮的评估标准——特别是你是否会根据行为/适合度方面或纯粹的技术标准进行评估。在大型科技公司中，编码轮次可能完全排除与行为相关的标准，因此你的自我介绍很可能只是作为主要面试的“热身”。
|
||||||
|
|
||||||
然而，在行为面试或技术面试中，在创业公司或优先考虑实践经验而不是 LeetCode 式的面试的公司，你可能想把你的自我介绍扩展为**快速的投资组合展示**，或暗示你有一个项目组合，他们可以在面试后查看，或在面试结束时分配 5 分钟左右的时间来进行介绍。
|
但是，在行为面试或初创公司或更看重实践经验而非 LeetCode 风格面试的公司的技术面试中，你可能希望将你的自我介绍扩展到**快速展示你的作品集**，或者暗示你有一个项目组合，他们可以在面试后查看，或者在面试结束时分配大约 5 分钟的时间来浏览。
|
||||||
|
|
||||||
然而，请注意，无论在哪种情况下，如果你在这一轮做固定格式的编码面试，你应该保持自我介绍的简短，以确保你在实际的编码测试中有**多的时间**。 你花在自我介绍上的任何额外时间都会从你回答技术问题的时间中被剥夺。
|
但是，请注意，在任何情况下，如果你在该轮次中进行固定格式的编码面试，你应该保持你的自我介绍简短，以确保你有**更多时间进行实际的编码测试**。你在自我介绍上花费的任何额外时间都将从你回答技术问题的时间中扣除。
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th>面试格式</th>
|
<th>面试形式</th>
|
||||||
<th>公司类型</th>
|
<th>公司类型</th>
|
||||||
<th>时长</th>
|
<th>时长</th>
|
||||||
<th>内容</th>
|
<th>内容</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td rowSpan={2}>编程或技术面试</td>
|
<tr>
|
||||||
<td>大型科技公司，有固定评估标准</td>
|
<td rowSpan={2}>编码或技术面试</td>
|
||||||
<td>< 1 分钟</td>
|
<td>具有固定评估标准的大型科技公司</td>
|
||||||
<td>1 分钟自我介绍</td>
|
<td>\< 1 分钟</td>
|
||||||
</tr>
|
<td>1 分钟推介</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td className="px-2">其他类型，可能不太强调标准的 LeetCode 风格编程测试</td>
|
|
||||||
<td>约 1 分钟</td>
|
<tr>
|
||||||
<td>1 分钟自我介绍 + 展示作品集</td>
|
<td className="px-2">其他可能不太强调标准 LeetCode 风格的编码测试</td>
|
||||||
</tr>
|
<td>~1 分钟</td>
|
||||||
<tr>
|
<td>1 分钟推介 + 暗示作品集展示</td>
|
||||||
<td>行为或文化适配面试</td>
|
</tr>
|
||||||
<td>任何公司</td>
|
|
||||||
<td>约 1 分钟</td>
|
<tr>
|
||||||
<td>1 分钟自我介绍 + 展示作品集</td>
|
<td>行为或文化契合度面试</td>
|
||||||
</tr>
|
<td>任何</td>
|
||||||
|
<td>~1 分钟</td>
|
||||||
|
<td>1 分钟推介 + 暗示作品集展示</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
为了应对所有可能的情况，你应该准备一个 1 分钟的演讲和一个项目组合（建议但可选）。
|
为了应对所有可能的情况，你应该准备一个 1 分钟的推介和一份项目组合（推荐但可选）。
|
||||||
|
|
||||||
## 一分钟的推销话术
|
## 1 分钟推介
|
||||||
|
|
||||||
### 大局观
|
### 概览
|
||||||
|
|
||||||
大多数情况下，话术将涵盖这 4 项内容：
|
大多数时候，推介将涵盖这 4 个项目：
|
||||||
|
|
||||||
1. 工作经验的广度和深度
|
1. 工作经验的广度和深度
|
||||||
2. 最高成就
|
2. 顶级成就
|
||||||
3. 如果工作经验不足 5 年，教育背景
|
3. 如果工作经验少于 5 年，则为教育背景
|
||||||
4. 申请职位的动机
|
4. 申请该职位的动机
|
||||||
|
|
||||||
在制定你的推销方案时，要牢记目标--你要给人留下**好的第一印象**，成为这个职位的潜在理想人选。 要做到这一点，你应该在展示角色的关键要求的基础上，表现出自信、可亲。 想一想，如果你要雇用这个角色的候选人，你会注意些什么？
|
在开发你的推介时，请记住目标——你想给潜在的理想候选人留下**良好的第一印象**。为此，你应该表现得自信、讨人喜欢，并且掌握该职位的关键要求。想想如果你要为这个职位招聘候选人，你会注意什么？
|
||||||
|
|
||||||
不要试图讲得太深--专注于涵盖主要观点，并自信而流畅地阐述它们。 作为软件工程师，我们通过项目和代码来证明我们的能力。 过早地谈论太多，可能会让人觉得过于急切，而光说不练没有什么价值。
|
不要试图深入探讨——专注于涵盖要点，并自信流畅地阐述它们。作为软件工程师，我们通过项目和代码来证明我们的实力。过早地谈论过多可能会显得过于急切，而仅仅是言语本身并没有多大价值。
|
||||||
|
|
||||||
从本质上讲，对于招聘经理来说，自我介绍的作用是为他们回答这些关于候选人的问题：
|
从本质上讲，对于招聘经理来说，自我介绍是为了回答他们关于候选人的这些问题：
|
||||||
|
|
||||||
1. 这位候选人是否对前端/软件工程充满热情？
|
1. 这个候选人对前端/软件工程充满热情吗？
|
||||||
2. 他们能否以清晰简明的方式描述事情？
|
2. 他们能以清晰简洁的方式描述事物吗？
|
||||||
3. 他们是什么样的人？ 自信还是傲慢？
|
3. 他们是什么样的人？自信还是自负？
|
||||||
4. 我想和这个人一起工作吗？ 他们看起来适合被训练吗？
|
4. 我想和这个人一起工作吗？他们看起来容易被指导吗？
|
||||||
|
|
||||||
### 前端/网络开发人员的话术要点示例
|
### 前端/Web开发人员的示例推介要点
|
||||||
|
|
||||||
在特定角色的要求之上，如团队特定的框架和技术，前端招聘经理通常关注以下**4 个标准**：
|
除了特定于角色的要求（例如特定于团队的框架和技术）之外，前端招聘经理通常关注以下 **4 个标准**：
|
||||||
|
|
||||||
| 标准 | 例子 |
|
| 标准 | 示例 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| 了解前端的基本原理：HTML、CSS、JavaScript 和相关领域 | "我建立前端应用程序已经有几年了，也为 Lodash 和 jQuery 等流行的开源项目做出了贡献。" <br/><br/>"我是我的大学的网络开发课程的教学助理，指导学生从事涉及建立全栈 Web 应用的项目。" |
|
| 了解前端基础知识：HTML、CSS、JavaScript 和相关领域 | “我已经构建前端应用程序几年了，并且还为流行的开源项目（如 Lodash 和 jQuery）做出了贡献。” <br /><br />“我曾是大学 Web 开发课程的助教，并指导学生进行涉及构建全栈 Web 应用程序的项目。” |
|
||||||
| 候选人了解的前端技术的广度和深度 | "我使用 React、Tailwind、Next.js、Prisma 和 MySQL 建立一个 Twitter 克隆，作为我的软件工程团队项目的一部分。" |
|
| 候选人掌握的前端技术的广度和深度 | “我使用 React、Tailwind、Next.js、Prisma 和 MySQL 构建了一个 Twitter 克隆，作为我的软件工程团队项目的一部分。” |
|
||||||
| 主动跟上现代前端技术的步伐 | "我学习了 Astro，并使用它重建了我的个人博客，因为 Astro 对于建立内容驱动的网站非常好。" |
|
| 积极跟进现代前端技术 | “我学习了 Astro，并使用它重建了我的个人博客，因为 Astro 非常适合构建以内容为导向的网站。” |
|
||||||
| 候选人从事过的相关前端项目，这些项目的复杂性 | "在业余时间，我在 React 中建立了一个加密货币价格跟踪应用程序，以学习如何建立数据可视化重的客户应用程序，也解决了跟踪我的投资组合的个人痛点。" |
|
| 候选人参与的与前端相关的项目、这些项目的复杂性 | “在业余时间，我用 React 构建了一个加密货币价格跟踪应用程序，以学习如何构建数据可视化密集型客户端应用程序，并解决跟踪我的投资组合的个人痛点。” |
|
||||||
|
|
||||||
请参考下面好的自我介绍的例子。
|
请参考以下内容，了解良好的自我介绍示例。
|
||||||
|
|
||||||
## 作品集展示
|
## 作品集展示
|
||||||
|
|
||||||
如果你想要展示你的作品集，你需要确保你的作品集简洁易懂，在面试过程中能够快速地浏览。
|
如果要扩展到作品集的展示，您需要确保您的作品集简洁，并且在面试期间易于浏览
|
||||||
|
|
||||||
每个项目的描述应包括：
|
每个项目的描述应包括：
|
||||||
|
|
||||||
- 项目的目的：它为用户做什么
|
* 项目目的：它为用户做什么
|
||||||
- 使用的框架/技术
|
* 使用的框架/技术
|
||||||
- 涉及的技术复杂性
|
* 涉及的技术复杂性
|
||||||
|
|
||||||
请参考这篇文章，以更详细地了解如何进行作品集展示（即将推出）。
|
请参阅本文，以更详细地了解如何进行作品集展示（即将推出）。
|
||||||
|
|
||||||
## 好的自我介绍的例子
|
## 良好的自我介绍示例
|
||||||
|
|
||||||
### 对于经验丰富的工程师
|
### 对于经验丰富的工程师
|
||||||
|
|
||||||
> 我在 Airbnb 工作了 6 年，担任前端工程师，是重新设计 Airbnb 预订体验项目的首席开发者。 作为工作的一部分，我为 Airbnb 的主要设计系统做出了贡献，建立了几个 UI 组件，如旋转木马，评级小工具，并重构了现有的组件。 我也有为 Airbnb 的开源前端项目（如 Enzyme 和 react-dates）作出贡献的经验。
|
> 我在 Airbnb 担任前端工程师 6 年，并且是重新设计 Airbnb 预订体验项目的首席开发人员。作为我工作的一部分，我通过构建几个 UI 组件（如轮播、评级小部件和重构现有组件）为 Airbnb 的主要设计系统做出了贡献。我也有贡献于 Airbnb 的开源前端项目（如 Enzyme 和 react-dates）的经验。
|
||||||
>
|
>
|
||||||
> 在业余时间，我喜欢学习新的前端技术，追赶不断发展的前端生态系统。 最近，我一直在探索新的 JavaScript 框架，如 Astro 和 SolidJS，让自己接触到构建用户界面的新方法，提高我作为前端工程师的技能。
|
> 在业余时间，我喜欢学习新的前端技术，并赶上不断发展的前端生态系统。最近，我一直在探索新的 JavaScript 框架，如 Astro 和 SolidJS，以让自己接触到构建用户界面的新方法，并提高我作为前端工程师的技能。
|
||||||
|
|
||||||
### 针对应届毕业生/大学生
|
### 对于应届毕业生/大学生
|
||||||
|
|
||||||
> 我于 2020 年毕业于东北大学，获得计算机科学学位。 我的兴趣是前端开发，我喜欢在网络上建立令人愉快的产品，因为可以自由地开发任何想到的东西，并且有快速的反馈回路。
|
> 我于 2020 年毕业于东北大学，获得计算机科学学位。我对前端开发很感兴趣，并且喜欢在 Web 上构建令人愉悦的产品，因为可以自由地开发任何想到的东西，并且反馈循环很快。
|
||||||
>
|
>
|
||||||
> 我在学校时参加了一个网络开发课程，这让我学到了全栈开发的基础知识。 凭借这些技能，我成功地在 Uber 和 Palantir 等公司获得了软件工程实习机会。 在 Uber，我使用 React、Redux 和 GraphQL 建立了一个内部工具，帮助开发者管理他们的测试骑手和司机账户。
|
> 我在学校上了一门 Web 开发课程，这门课程教我全栈开发的基础知识。凭借这些技能，我设法获得了 Uber 和 Palantir 等公司的软件工程实习机会。在 Uber，我构建了一个内部工具，使用 React、Redux 和 GraphQL 帮助开发人员管理他们的测试骑手和司机帐户。
|
||||||
>
|
>
|
||||||
> 我对谷歌的前端工程师职位感兴趣，因为我每天都在使用谷歌的产品，并且对他们精心设计的产品体验印象深刻。 能在这种影响数十亿人生活的产品上工作，那将是一个梦想成真。
|
> 我对 Google 的前端工程师职位很感兴趣，因为我每天都使用 Google 产品，并且对他们深思熟虑的产品体验印象深刻。能够从事影响数十亿人生活的产品，将是一个梦想成真。
|
||||||
|
|
||||||
## 听取招聘经理的意见
|
## 听取招聘经理的意见
|
||||||
|
|
||||||
> 通常情况下，我把自我介绍作为一个简单的热身活动来启动面试。 不需要技术技能，但它测试了沟通和以清晰简洁的方式描述事物的能力。
|
> 通常，我使用自我介绍作为轻松的热身，以启动面试。不需要任何技术技能，但它测试了沟通能力和以清晰简洁的方式描述事物的能力。
|
||||||
|
|
||||||
- 工程经理，LinkedIn。
|
— 领英工程经理。
|
||||||
|
|
||||||
> 候选人在介绍自己的时候不应该说得太深，因为这绝不是为了深入了解，只是快速概述一下。
|
> 候选人在介绍自己的时候不应该过于冗长，因为它从来都不是一个深入的探讨，而只是一个快速的概述。
|
||||||
|
|
||||||
- 人才招聘，Coinbase。
|
— 人才招聘，Coinbase。
|
||||||
|
|
||||||
> 结束前列出你所用过的技术栈或项目，以及你希望将来从事的工作/想要发展的职业方向，可能是一个好的建议。
|
> 最好以你使用过的技术栈或项目，以及你希望在未来从事的工作/你希望你的职业生涯走向何方来结束。
|
||||||
|
|
||||||
- 工程经理，确实如此。
|
— 工程经理，Indeed。
|
||||||
|
|
||||||
> 你的面试官也是一个人。 面试官心目中最重要的事情是他们是否希望这个人加入他们的团队--这不仅仅是技能的问题。 我们想知道你是谁，然后你有什么能力。 当然，加入与工作相关的个人风格是最好的。
|
> 你的面试官也是一个人。面试官最关心的是他们是否希望这个人加入他们的团队——这不仅仅是关于技能。我们想知道你是谁，然后你有什么能力。当然，加入与工作相关的个人风格是最好的。
|
||||||
|
|
||||||
- 高级工程师，Dropbox。
|
— 高级工程师，Dropbox。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "1c33781b",
|
||||||
|
"description": "1df505af",
|
||||||
|
"seo_title": "cb96ed99",
|
||||||
|
"seo_description": "ab47f969",
|
||||||
|
"social_title": "25c5cbb4"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"cd79c89f",
|
||||||
|
"72609533",
|
||||||
|
"4477ce22",
|
||||||
|
"64cffea3",
|
||||||
|
"bd456ea8",
|
||||||
|
"b2f3619d",
|
||||||
|
"e96c88dc",
|
||||||
|
"dadcb4ad",
|
||||||
|
"6307ab52",
|
||||||
|
"e7eacea6",
|
||||||
|
"a7a43d66",
|
||||||
|
"8a1f2a28",
|
||||||
|
"286d7d0f",
|
||||||
|
"675413b3",
|
||||||
|
"c2058a5a",
|
||||||
|
"22597e29",
|
||||||
|
"4784c77e",
|
||||||
|
"f66e2fc7",
|
||||||
|
"59163994",
|
||||||
|
"a0f00b8",
|
||||||
|
"e0ebcbcb"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"cd79c89f",
|
||||||
|
"72609533",
|
||||||
|
"4477ce22",
|
||||||
|
"64cffea3",
|
||||||
|
"bd456ea8",
|
||||||
|
"b2f3619d",
|
||||||
|
"e96c88dc",
|
||||||
|
"dadcb4ad",
|
||||||
|
"6307ab52",
|
||||||
|
"e7eacea6",
|
||||||
|
"a7a43d66",
|
||||||
|
"8a1f2a28",
|
||||||
|
"286d7d0f",
|
||||||
|
"675413b3",
|
||||||
|
"c2058a5a",
|
||||||
|
"22597e29",
|
||||||
|
"4784c77e",
|
||||||
|
"f66e2fc7",
|
||||||
|
"59163994",
|
||||||
|
"a0f00b8",
|
||||||
|
"e0ebcbcb"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,62 +1,65 @@
|
||||||
---
|
---
|
||||||
title: 如何在行为面试中回答“为什么想在这里工作”
|
title: 回答“为什么在这里工作”
|
||||||
description: 学习如何简洁有效地回答有关公司动机的问题，适用于前端/网络开发人员/软件工程师。 由大型科技公司的前面试官撰写。
|
description: 了解为前端工程师简洁有效地回答有关公司动机的问题的最佳方法。
|
||||||
|
seo_title: 如何回答“为什么在这里工作”| 行为面试手册
|
||||||
|
seo_description: 了解为前端工程师简洁有效地回答有关公司动机的行为面试问题的最佳方法。
|
||||||
|
social_title: 回答“为什么在这里工作”| GreatFrontEnd
|
||||||
---
|
---
|
||||||
|
|
||||||
作为招聘经理，“为什么想在这里工作”是一个极其常见的问题，可能在超过 70％的面试中被问到。 然而，大多数候选人未能回答正确。 在本文中，您将从前面试官那里学习如何有效而简洁地回答此问题，适用于前端工程师/软件工程师：
|
作为招聘经理，“你为什么想在这里工作”是一个非常常见的问题，可能在 70% 以上的面试中都会被问到。然而，大多数候选人未能很好地回答这个问题。在本文中，您将从前面试官那里学习如何以有效和简洁的方式回答这个问题，适用于前端工程师/软件工程师：
|
||||||
|
|
||||||
1. 面试官的意图
|
1. 面试官的意图
|
||||||
2. 建议的答案框架
|
2. 建议的答案框架
|
||||||
3. 示例问题和答案
|
3. 示例问题和答案
|
||||||
|
|
||||||
## 面试官的意图
|
## 面试官的意图
|
||||||
|
|
||||||
大多数面试官询问此问题时，都有一个单一的目标-通过你加入公司的动机来更好地了解你。 他们想知道您是否足够感兴趣去做研究，或者是否有特殊原因构成了您的强烈动机。
|
大多数面试官问这个问题只有一个目的——通过你加入公司的动机来更多地了解你。他们想知道你是否足够感兴趣去做你的研究，或者是否有特殊原因构成了你强大的动力。
|
||||||
|
|
||||||
## 建议的答案框架
|
## 建议的答案框架
|
||||||
|
|
||||||
要成功，建立答案有 3 个基本步骤：
|
要取得成功，构建你的答案有 3 个基本步骤：
|
||||||
|
|
||||||
### 1. 答案应在 60 至 90 秒之间
|
### 1. 它应该需要 60 到 90 秒
|
||||||
|
|
||||||
不要超过 60 至 90 秒。 任何超过这个时间可能都构成了一个独白。 供参考，1 分钟约 15 句话。
|
永远不要超过 60 到 90 秒。任何更长的时间都可能构成独白。作为参考，1 分钟大约是 15 个陈述。
|
||||||
|
|
||||||
### 2. 从公司的现任/前任员工那里收集有关公司/团队/职位的深入了解
|
### 2. 从公司/团队/职位现任/前任员工那里收集关于公司/团队/职位的深刻见解
|
||||||
|
|
||||||
如果您以前是面试官，您会知道，大多数候选人在“为什么想在这个公司/团队工作”这个问题上表现不佳，因为他们倾向于基于公司的公共信息回答该问题，这可能不一定代表个人团队或部门的文化或情况。 例如，想象一下，您正在评估两名游戏开发团队的候选人：
|
如果你以前是面试官，你就会知道大多数候选人在“你为什么想在这家公司/团队工作”这个问题上没有给人留下深刻印象，因为他们倾向于根据公司的公开信息来回答这个问题，而这可能不一定能代表个人团队或部门的文化或情况。例如，假设你正在评估 2 名游戏开发团队的候选人：
|
||||||
|
|
||||||
1. 候选人 A：“A 公司非常环保，我希望成为地球拯救行动的一部分”（作为团队经理，您知道您的团队成员从未谈论过地球拯救，因为您的工作与此完全无关）
|
1. 候选人 A：“A 公司非常环保，我想成为拯救地球的努力的一部分”（作为团队经理，你知道你的团队成员从未谈论过拯救地球，因为你的工作与此完全无关）
|
||||||
2. 候选人 B：“A 团队正在基于 B 技术开发游戏，这是我恰好非常感兴趣的。”
|
2. 候选人 B：“B 团队正在开发基于 B 技术的游戏，而这正是我非常感兴趣的。”
|
||||||
|
|
||||||
为了成为真正对该角色感兴趣的人，请努力寻找与您要加入的团队相关的见解，并利用它来证明您的兴趣（因此也适合）。
|
为了脱颖而出，成为一个真正对这个角色感兴趣的人，你应该尽可能努力寻找特定于你所加入的团队的见解，并以此来证明你的兴趣（以及由此产生的适合度）。
|
||||||
|
|
||||||
#### 这里是获取团队特定见解的一些常见途径：
|
#### 以下是一些获取团队特定见解的常见途径：
|
||||||
|
|
||||||
1. 从职位描述中获取有关团队堆栈或实践的更多见解（在某些情况下，可能存在许多您可以利用的细节）
|
1. 从职位描述中获得更多关于团队的技术栈或实践的见解（在某些情况下，你可以利用很多细节）
|
||||||
2. 在 LinkedIn 上搜索团队，了解他们的个人工作范围、过去的项目、背景和兴趣爱好
|
2. 在领英上搜索团队，了解更多关于他们的个人工作范围、过去的项目、背景和兴趣
|
||||||
3. 在做了基本在线研究后，尝试得分信息性访谈、咖啡聊天或短视频通话与团队成员交流
|
3. 尝试与团队成员进行信息面试或咖啡聊天或简短的视频通话（在进行基本的在线研究之后）
|
||||||
4. 在 Blind 上甚至 Reddit 上搜索团队（尽可能具体地查询）
|
4. 在 Blind 甚至 Reddit 上搜索团队（尽可能具体地进行查询）
|
||||||
|
|
||||||
#### 这里是一些有用的问题：
|
#### 这里有一些有用的问题可以问：
|
||||||
|
|
||||||
1. 与其他公司相比，开发人员在您的团队中能获得哪些独特的挑战或学习机会？
|
1. 开发者在您的团队中与在其他公司相比，会遇到哪些独特的挑战或学习机会？
|
||||||
2. 如果我加入你的团队，可以期望做哪些项目？
|
2. 如果我加入您的团队，我可能会参与哪些类型的项目？
|
||||||
3. 该团队的运作方式与公司的其他团队有何不同？
|
3. 这个团队的运作方式与公司内的其他团队有何不同？
|
||||||
4. 该团队是否与其他团队密切合作？ 是哪些团队以及如何合作？
|
4. 这个团队是否与其他团队紧密合作？与哪些团队合作，如何合作？
|
||||||
5. 你能带我走过一个典型项目的流程吗？
|
5. 您能带我了解一个典型项目的流程吗？
|
||||||
|
|
||||||
### 3. 简要解释为什么加入这家公司/职位/团队是您职业生涯的战略和逻辑步骤
|
### 3. 简要解释为什么加入这家公司/职位/团队对您的职业生涯来说是一个战略性和合乎逻辑的步骤
|
||||||
|
|
||||||
这样做，您还可以借此机会巩固面试官对您的热情或您为建立专业知识所做的努力的印象。
|
通过这样做，您还可以借此机会巩固面试官对您对该领域的热情或您为建立专业知识所做努力的印象。
|
||||||
|
|
||||||
## 示例问题和答案
|
## 示例问题和答案
|
||||||
|
|
||||||
### “为什么想在 TikTok Shop 团队工作？”
|
### “你为什么想在 TikTok Shop 团队工作？”
|
||||||
|
|
||||||
> 我在学校期间做过近 4 年的自由职业网络开发人员。 作为个人贡献者，我已经积累了丰富的经验，接下来的步骤是作为更大团队的一部分进行更大、更复杂的项目，以将我的开发技能提升到更高的水平。
|
> 我在学校期间做了将近 4 年的自由职业 Web 开发人员。作为一名个人贡献者，我积累了丰富的经验，对我来说，下一步是作为更大团队的一部分，参与更大、更复杂的项目，以将我的开发技能提升到一个新的水平。
|
||||||
>
|
>
|
||||||
> TikTok 商城对我来说最重要的三件事是：
|
> 对我来说，TikTok 商务的 3 大优势是：
|
||||||
>
|
>
|
||||||
> 1. 我喜欢知道我的开发努力可以具体地推动影响。 在当前阶段，TikTok 商城仍处于产品生命周期的相对初级阶段，在这个阶段这是可能的。
|
> 1. 我想知道我的开发工作能够切实地推动影响。在目前阶段，TikTok Shop 仍处于产品生命周期的相对初期阶段，这是有可能的。
|
||||||
> 2. TikTok 商城服务于广大群众，必须处理与可访问性、本地化和相对新的电子商务等相关的挑战，这使我能够在该领域发展我的技能。
|
> 2. TikTok Shop 服务于广大民众，并且必须应对相关的挑战，例如可访问性、本地化和以相对较新的形式进行的电子商务，这使我能够在该领域发展我的技能。
|
||||||
> 3. 字节跳动（TikTok 的母公司）内部开发了许多尖端技术，并使用开源技术。 我很兴奋向公司经验丰富的工程师学习如何将这些技术扩展到世界范围内。
|
> 3. 字节跳动（TikTok 的母公司）内部开发了许多尖端技术，并且也使用开源技术。我很高兴向公司经验丰富的工程师学习如何将这些技术扩展到全球受众。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "66d3c445",
|
||||||
|
"description": "afeed345",
|
||||||
|
"seo_title": "d46d01d5",
|
||||||
|
"seo_description": "a31753e4",
|
||||||
|
"social_title": "afcadb6e"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"e23ac2c5",
|
||||||
|
"781315d",
|
||||||
|
"b6465b86",
|
||||||
|
"13cff95f",
|
||||||
|
"493e8bd0",
|
||||||
|
"3410e584",
|
||||||
|
"c97eaa3d",
|
||||||
|
"d48a7b71",
|
||||||
|
"421ceb04",
|
||||||
|
"7e75ddb2",
|
||||||
|
"fe80380a",
|
||||||
|
"f0bcd2ed",
|
||||||
|
"7d9cb0ec",
|
||||||
|
"4ca7a565",
|
||||||
|
"b6dbe2f3",
|
||||||
|
"bf28427a",
|
||||||
|
"1ec4f54b",
|
||||||
|
"2b74a214",
|
||||||
|
"e1befcaf",
|
||||||
|
"6aa83ba1",
|
||||||
|
"e2bac672",
|
||||||
|
"71a2a58",
|
||||||
|
"9182d691",
|
||||||
|
"206a5a5b",
|
||||||
|
"5fffab6e",
|
||||||
|
"686cd762",
|
||||||
|
"12ba9aaa",
|
||||||
|
"51300c2d",
|
||||||
|
"193688c6",
|
||||||
|
"3276416d",
|
||||||
|
"a004e1c1",
|
||||||
|
"db9fea03"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"e23ac2c5",
|
||||||
|
"781315d",
|
||||||
|
"b6465b86",
|
||||||
|
"13cff95f",
|
||||||
|
"493e8bd0",
|
||||||
|
"3410e584",
|
||||||
|
"c97eaa3d",
|
||||||
|
"d48a7b71",
|
||||||
|
"421ceb04",
|
||||||
|
"7e75ddb2",
|
||||||
|
"fe80380a",
|
||||||
|
"f0bcd2ed",
|
||||||
|
"7d9cb0ec",
|
||||||
|
"4ca7a565",
|
||||||
|
"b6dbe2f3",
|
||||||
|
"bf28427a",
|
||||||
|
"1ec4f54b",
|
||||||
|
"2b74a214",
|
||||||
|
"e1befcaf",
|
||||||
|
"6aa83ba1",
|
||||||
|
"e2bac672",
|
||||||
|
"71a2a58",
|
||||||
|
"9182d691",
|
||||||
|
"206a5a5b",
|
||||||
|
"5fffab6e",
|
||||||
|
"686cd762",
|
||||||
|
"12ba9aaa",
|
||||||
|
"51300c2d",
|
||||||
|
"193688c6",
|
||||||
|
"3276416d",
|
||||||
|
"a004e1c1",
|
||||||
|
"db9fea03"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,117 +1,124 @@
|
||||||
---
|
---
|
||||||
title: 前端面试算法编码问题——如何准备
|
title: 数据结构与算法面试
|
||||||
description: 这是前端/网站开发者面试中准备算法编码问题的指南，包括需要了解的概念、面试评分标准和重要的实践问题。
|
description: 前端工程师的 DSA 指南 - 需要了解的重要概念、要做的顶级练习题和其他技巧
|
||||||
|
seo_title: 前端面试的数据结构与算法
|
||||||
|
seo_description: 为前端面试量身定制的数据结构与算法问题准备指南 - 需要了解的重要概念、常见的面试问题和有用的技巧
|
||||||
|
social_title: 破解数据结构与算法 | 前端面试手册
|
||||||
---
|
---
|
||||||
|
|
||||||
算法编码问题就是可以在 LeetCode 上找到的问题。 算法问题通常具有以下特征：
|
算法编码问题正是您可以在 LeetCode 上找到的问题。 算法问题通常具有以下特征：
|
||||||
|
|
||||||
- 它们不特定于前端领域；可以通过大多数主流编程语言求解。
|
* 它们并非特定于前端领域； 它们可以在大多数主流编程语言中解决。
|
||||||
- 通常附带不切实际的情景。 你在实际开发中不会遇到这样的问题。 有谁曾经不得不反转二叉树或计算字符串中回文子串的数量呢？
|
* 通常伴随着不切实际的场景。 您在现实世界的开发中不会遇到这样的问题。 谁曾经翻转过二叉树或计算过字符串中回文子串的数量？
|
||||||
- 代码效率（时间和空间复杂度）很重要，要想得到最有效的解决方案需要扎实掌握数据结构和算法知识。
|
* 代码的效率（时间和空间复杂度）很重要，并且产生最有效的解决方案需要扎实的数据结构和算法知识。
|
||||||
|
|
||||||
虽然算法编码问题不是前端特有的，但在这些问题中表现出色所需的技能——强大的分析思考能力、有效的沟通能力、熟练掌握常见的数据结构和算法、良好的代码卫生习惯，仍是优秀的前端工程师必须具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的数据结构和算法。 因此，在面试过程中，很多公司仍然会问有关算法编码的问题。 熟悉数据结构和算法对于解决 JavaScript 编码问题和用户界面编码问题也有帮助。
|
尽管算法编码问题并非特定于前端，但要擅长这些问题所需的技能——强大的分析思维、有效的沟通、对常见数据结构和算法的扎实掌握、良好的代码卫生，仍然是优秀前端工程师应该具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的 DSA。 因此，许多公司在面试过程中仍然会问算法编码问题也就不足为奇了。 熟悉数据结构和算法也有助于解决 JavaScript 编码问题和用户界面编码问题。
|
||||||
|
|
||||||
关于算法编码面试的资源有很多，因为它们不特定于前端，所以我们不会在这里详细介绍。 如果您想了解有关算法编码面试的更多信息，我们建议参考[Tech Interview Handbook](https://www.techinterviewhandbook.org)。
|
那里有大量涵盖算法编码面试的资源，由于它们并非特定于前端，因此我们不会在此页面上详细介绍。 如果您想了解有关算法编码面试的更多信息，我们建议您参考 [Tech Interview Handbook](https://www.techinterviewhandbook.org) 作为免费资源。
|
||||||
|
|
||||||
## 示例
|
## 示例
|
||||||
|
|
||||||
- 反转链表。
|
* 反转链表。
|
||||||
- 判断字符串是否包含平衡的括号。
|
* 确定字符串是否包含平衡括号。
|
||||||
- 计算字符串中有多少个子串是回文的。
|
* 确定字符串中有多少个子字符串是回文。
|
||||||
|
|
||||||
## 如何准备
|
## 如何准备
|
||||||
|
|
||||||
1. 选择一种好的编程语言。 如果你想节省准备时间，你可能应该坚持使用 JavaScript 来解决算法问题，尽管需要注意的是 JavaScript 语言不包含某些常见有用的数据结构和算法，而其他语言，如 Python、Java 和 C++则包含。 个人建议使用 Python 来解决算法面试问题。
|
1. 选择一种好的编程语言来使用。 如果您想节省准备时间，您可能应该坚持使用 JavaScript 来解决算法问题，尽管请注意，JavaScript 语言不包含某些常见的有用数据结构和算法，而 Python、Java 和 C++ 等其他语言则包含。 我们建议使用 Python 来解决算法面试问题
|
||||||
2. 规划时间并按优先级处理主题和问题。
|
2. 规划您的时间并按重要性顺序处理主题和问题
|
||||||
3. 将学习和练习结合在一起。
|
3. 将学习和练习结合起来解决一个主题
|
||||||
4. 通过编码面试备忘清单来加深印象。
|
4. 伴随练习使用编码面试备忘单来内化必须做的事情和必须记住的事情
|
||||||
|
|
||||||
请参考[Tech Interview Handbook 的逐步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)，了解如何准备算法编码面试。
|
请参阅 [Tech Interview Handbook 关于如何准备算法编码面试的分步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)。
|
||||||
|
|
||||||
## 重要概念
|
## 重要概念
|
||||||
|
|
||||||
尽管你仍然可能被问到任何算法问题，但公司倾向于对前端工程师候选人采取温和的态度，并且可能不会问与动态规划或复杂图形算法等困难的话题有关的问题。
|
尽管您仍然可能被问到任何算法问题，但公司倾向于对前端工程师候选人放轻松，并且可能不会问到涉及诸如动态规划或复杂图算法之类的难题。
|
||||||
|
|
||||||
由于 DOM 是一棵树，优先学习有关树和各种树遍历算法的知识。
|
由于 DOM 是一棵树，因此优先学习树和各种树遍历算法。
|
||||||
|
|
||||||
| 类别 | 重要话题 |
|
| 类别 | 重要主题 |
|
||||||
| -------- | ---------------------------------------------------- |
|
| --- | --- |
|
||||||
| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D 数组）、集合 |
|
| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D 数组）、集合 |
|
||||||
| 算法 | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 |
|
| 算法 | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 |
|
||||||
|
|
||||||
## 常见 JavaScript 操作
|
## 常见 JavaScript 操作
|
||||||
|
|
||||||
|
请注意常见的 JavaScript 操作及其时间复杂度。
|
||||||
|
|
||||||
### `Array`
|
### `Array`
|
||||||
|
|
||||||
| 操作 | 时间复杂度 |
|
| Operation | Time complexity |
|
||||||
| --------------------------- | ---------- |
|
| --------------------------- | --------------- |
|
||||||
| `Array.prototype.concat()` | O(m + n) |
|
| `Array.prototype.concat()` | O(m + n) |
|
||||||
| `Array.prototype.every()` | O(n) |
|
| `Array.prototype.every()` | O(n) |
|
||||||
| `Array.prototype.fill()` | O(n) |
|
| `Array.prototype.fill()` | O(n) |
|
||||||
| `Array.prototype.filter()` | O(n) |
|
| `Array.prototype.filter()` | O(n) |
|
||||||
| `Array.prototype.find()` | O(n) |
|
| `Array.prototype.find()` | O(n) |
|
||||||
| `Array.prototype.pop()` | O(1) |
|
| `Array.prototype.pop()` | O(1) |
|
||||||
| `Array.prototype.push()` | O(1) |
|
| `Array.prototype.push()` | O(1) |
|
||||||
| `Array.prototype.reduce()` | O(n) |
|
| `Array.prototype.reduce()` | O(n) |
|
||||||
| `Array.prototype.reverse()` | O(n) |
|
| `Array.prototype.reverse()` | O(n) |
|
||||||
| `Array.prototype.shift()` | O(n) |
|
| `Array.prototype.shift()` | O(n) |
|
||||||
| `Array.prototype.slice()` | O(n) |
|
| `Array.prototype.slice()` | O(n) |
|
||||||
| `Array.prototype.some()` | O(n) |
|
| `Array.prototype.some()` | O(n) |
|
||||||
| `Array.prototype.sort()` | O(nlgn) |
|
| `Array.prototype.sort()` | O(nlgn) |
|
||||||
| `Array.prototype.splice()` | O(n) |
|
| `Array.prototype.splice()` | O(n) |
|
||||||
| `Array.prototype.unshift()` | O(m + n) |
|
| `Array.prototype.unshift()` | O(m + n) |
|
||||||
|
|
||||||
<sup>*</sup> `n`是数组中元素的数量，`m`是要添加的元素的数量。
|
<sup>\*</sup> `n` 是数组中的元素数量，`m` 是要添加的元素数量。
|
||||||
|
|
||||||
### `Map`
|
### `Map`
|
||||||
|
|
||||||
| 操作 | 时间复杂度 |
|
| Operation | Time complexity |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| `Map.prototype.clear()` | O(n) |
|
| `Map.prototype.clear()` | O(n) |
|
||||||
| `Map.prototype.delete()` | O(1) |
|
| `Map.prototype.delete()` | O(1) |
|
||||||
| `Map.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费 O(n)时间。 |
|
| `Map.prototype.entries()` | O(1) 因为它返回一个迭代器。获取所有条目将花费 O(n) 时间。 |
|
||||||
| `Map.prototype.forEach()` | O(n) |
|
| `Map.prototype.forEach()` | O(n) |
|
||||||
| `Map.prototype.get()` | O(1) |
|
| `Map.prototype.get()` | O(1) |
|
||||||
| `Map.prototype.has()` | O(1) |
|
| `Map.prototype.has()` | O(1) |
|
||||||
| `Map.prototype.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 |
|
| `Map.prototype.keys()` | O(1) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间。 |
|
||||||
| `Map.prototype.set()` | O(1) |
|
| `Map.prototype.set()` | O(1) |
|
||||||
| `Map.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 |
|
| `Map.prototype.values()` | O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间。 |
|
||||||
|
|
||||||
<sup>*</sup> `n`是映射中键的数量。
|
<sup>\*</sup> `n` 是 map 中的键的数量。
|
||||||
|
|
||||||
### `Set`
|
### `Set`
|
||||||
|
|
||||||
| 操作 | 时间复杂度 |
|
| Operation | Time complexity |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| `Set.prototype.add()` | O(1) |
|
| `Set.prototype.add()` | O(1) |
|
||||||
| `Set.prototype.clear()` | O(n) |
|
| `Set.prototype.clear()` | O(n) |
|
||||||
| `Set.prototype.delete()` | O(1) |
|
| `Set.prototype.delete()` | O(1) |
|
||||||
| `Set.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费 O(n)时间。 |
|
| `Set.prototype.entries()` | O(1) 因为它返回一个迭代器。获取所有条目将花费 O(n) 时间。 |
|
||||||
| `Set.prototype.forEach()` | O(n) |
|
| `Set.prototype.forEach()` | O(n) |
|
||||||
| `Set.prototype.has()` | O(1) |
|
| `Set.prototype.has()` | O(1) |
|
||||||
| `Set.prototype.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 |
|
| `Set.prototype.keys()` | O(1) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间。 |
|
||||||
| `Set.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 |
|
| `Set.prototype.values()` | O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间。 |
|
||||||
|
|
||||||
<sup>*</sup> `n`是集合中元素的数量。
|
<sup>\*</sup> `n` 是集合中的元素数量。
|
||||||
|
|
||||||
## 算法编码面试评分标准
|
## 算法编码面试标准
|
||||||
|
|
||||||
在算法编码面试中，面试官评估候选人的技能，包括：
|
在算法编码面试中，面试官会根据以下技能评估候选人：
|
||||||
|
|
||||||
- **问题解决**: 采用系统和逻辑的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
|
* **解决问题**：使用系统和逻辑的方法来理解和解决问题。将问题分解为更小的独立问题。评估不同的方法及其权衡。
|
||||||
- **技术能力**: 能够将解决方案转化为工作代码，并表现出对所使用语言的深刻理解。
|
* **技术能力**：将解决方案转化为可运行的代码，并展示对所用语言的深刻理解。
|
||||||
- **沟通**: 询问问题以澄清细节，并清楚地解释自己的方法和思考。
|
* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素。
|
||||||
- **验证**: 确定要针对代码进行测试的各种情况，包括边缘情况。 能够诊断和解决出现的任何问题。
|
* **验证**：确定各种场景来测试代码，包括边缘情况。能够诊断和修复出现的任何问题。
|
||||||
|
|
||||||
## 有用的提示
|
## 有用的提示
|
||||||
|
|
||||||
- **虚构的想法**。 JavaScript 的标准库不包含队列，堆，二分查找等一些有用的数据结构和算法，这可能会使您在 JavaScript 编码面试中感到困难。 但是，你可以问面试官是否可以假装这样的数据结构/算法存在，并直接在你的解决方案中使用它而不实现它。
|
* **一厢情愿**。JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以在 JavaScript 编码面试中让你的生活更轻松。但是，你可以问面试官是否可以假装存在这样的数据结构/算法，并在你的解决方案中直接使用它，而无需实现它。
|
||||||
- **纯函数**。 编写纯函数，这样可以使函数具有可重复使用性和模块化性，也就是说，函数不依赖于函数外的状态，并且不会产生副作用。
|
* **纯函数**。 旨在编写纯函数，这些函数具有可重用性和模块化的好处，也就是不依赖于函数之外的状态且不会引起副作用的函数。
|
||||||
- **明智地选择数据结构**。注意选择数据结构并了解代码的时间复杂度。 熟悉 JavaScript 数组、对象、集合、映射的时间/空间复杂度，如有必要，可以在解决方案中使用它们。 其中一些时间/空间的复杂度在不同的语言中有所不同。 如果可以使用哈希映射在 O(n)的运行时内完成任务，就不要编写 O(n<sup>2</sup>)的代码。
|
* **明智地选择数据结构。** 注意你对数据结构的选择，并注意代码的时间复杂度。 熟悉基本的 JavaScript Array、Object、Set、Map 操作的时间/空间复杂度，以备你希望在你的解决方案中使用它们。 某些时间/空间复杂度在不同语言之间有所不同。 如果可以使用哈希映射在 O(n) 运行时内完成，请不要编写以 O(n<sup>2</sup>) 运行的代码。
|
||||||
- **递归边界**。
|
* **递归边缘情况**。
|
||||||
- 如果您已经确定解决问题需要递归，请询问输入大小和如何处理递归栈溢出的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
|
* 如果你已经确定解决问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。 通常你不需要处理它，但提出这个问题是一个好信号。
|
||||||
- 深嵌套的数据结构可以具有递归引用它本身的特征，这使得某些操作如序列化变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
|
* 嵌套的深层数据结构可以对自身进行递归引用，这使得某些操作（如序列化）更加棘手。 询问面试官是否必须处理此类情况。 通常你不需要处理它，但提出这个问题是一个好信号。
|
||||||
|
|
||||||
## 实践问题
|
## 练习题
|
||||||
|
|
||||||
目前，最好的练习算法问题的平台无疑是 LeetCode。 但是，GreatFrontEnd 提供一些[数据结构和算法的练习问题](/questions/formats/algo-coding)，在其中，您可以练习实现常见的数据结构（[堆栈](/questions/algo/stack)、[队列](/questions/algo/queue)）和算法（[二分查找](/questions/algo/binary-search)、[归并排序](/questions/algo/merge-sort)）等在 JavaScript 中的操作。
|
Blind 75 是 Yangshun Tay 编写的著名且简洁的算法问题列表。你可以在 [GreatFrontEnd 上的 Blind 75 问题列表](/interviews/blind75) 中练习。
|
||||||
|
|
||||||
|
GreatFrontEnd 还提供了一些 [数据结构和算法的通用练习题](/questions/formats/algo-coding)，你可以在其中练习用 JavaScript 实现常见的数据结构（[Stack](/questions/algo/stack)、[Queue](/questions/algo/queue)）和算法（[二分查找](/questions/algo/binary-search)、[归并排序](/questions/algo/merge-sort)）等。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "5b978b7d",
|
||||||
|
"description": "bd4c77b5",
|
||||||
|
"seo_title": "8f53137e",
|
||||||
|
"seo_description": "eb3fda14",
|
||||||
|
"social_title": "d537d635"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"df39301b",
|
||||||
|
"f43009db",
|
||||||
|
"ce8a3251",
|
||||||
|
"b799ac87",
|
||||||
|
"f3a6fb60",
|
||||||
|
"86fbba68",
|
||||||
|
"f2b13208",
|
||||||
|
"4767e65e",
|
||||||
|
"24094bd8",
|
||||||
|
"d47ea373",
|
||||||
|
"1c35d4db",
|
||||||
|
"67dc567f",
|
||||||
|
"904f055b",
|
||||||
|
"60315899",
|
||||||
|
"2a7816d0",
|
||||||
|
"86ae5ea",
|
||||||
|
"aba7aeae",
|
||||||
|
"aa4e97ec",
|
||||||
|
"663dd5eb",
|
||||||
|
"c25cc2cf",
|
||||||
|
"ef51026e",
|
||||||
|
"13cd49a7",
|
||||||
|
"3276416d",
|
||||||
|
"a92ddc10",
|
||||||
|
"55a3f186",
|
||||||
|
"eb1412a7"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"df39301b",
|
||||||
|
"f43009db",
|
||||||
|
"ce8a3251",
|
||||||
|
"b799ac87",
|
||||||
|
"f3a6fb60",
|
||||||
|
"86fbba68",
|
||||||
|
"f2b13208",
|
||||||
|
"4767e65e",
|
||||||
|
"24094bd8",
|
||||||
|
"d47ea373",
|
||||||
|
"1c35d4db",
|
||||||
|
"67dc567f",
|
||||||
|
"904f055b",
|
||||||
|
"60315899",
|
||||||
|
"2a7816d0",
|
||||||
|
"86ae5ea",
|
||||||
|
"aba7aeae",
|
||||||
|
"aa4e97ec",
|
||||||
|
"663dd5eb",
|
||||||
|
"c25cc2cf",
|
||||||
|
"ef51026e",
|
||||||
|
"13cd49a7",
|
||||||
|
"3276416d",
|
||||||
|
"a92ddc10",
|
||||||
|
"55a3f186",
|
||||||
|
"eb1412a7"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,72 +1,77 @@
|
||||||
---
|
---
|
||||||
title: 前端面试编码问题——如何准备
|
title: 前端编码面试
|
||||||
description: 准备前端/ Web开发人员面试中的编码问题——了解预期问题、编码技巧和100多个重要的实践问题。
|
description: 期望的问题类型、实用的编码技巧以及最佳资源的使用
|
||||||
|
seo_title: 前端编码面试问题 | 如何准备
|
||||||
|
seo_description: 您需要了解的为前端编码面试做好充分准备的一切 - 包括要准备的问题类型、编码技巧和要使用的资源
|
||||||
|
social_title: 破解编码面试 | 前端面试手册
|
||||||
---
|
---
|
||||||
|
|
||||||
编码面试是评估前端工程师的主要方式，可以跨越多轮和多个面试阶段，因此练习编码面试非常重要。 回顾一下，以下是您可能会被问到的三种编码问题类型：
|
编码面试是评估前端工程师的主要方式，并且可能跨越多轮和面试阶段，因此为编码面试进行练习非常重要。
|
||||||
|
|
||||||
- **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂性的理解。
|
总而言之，您可以被问到以下三种类型的编码问题：
|
||||||
- **JavaScript 编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的 JavaScript。
|
|
||||||
- **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。
|
* **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解。
|
||||||
|
* **JavaScript 编码**：用 JavaScript 实现与前端领域相关的函数或数据结构，并在前端开发过程中常用。
|
||||||
|
* **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。
|
||||||
|
|
||||||
## 编码环境
|
## 编码环境
|
||||||
|
|
||||||
您可能会被要求使用以下一个或多个环境完成问题的编码：
|
您可能需要使用以下一个或多个环境完成问题编码：
|
||||||
|
|
||||||
### 在线基本代码编辑器
|
### 在线基本代码编辑器
|
||||||
|
|
||||||
您将得到一个基于浏览器的代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许或不被允许执行代码。 在线基本代码编辑器的示例是[CoderPad](https://coderpad.io/)。
|
您将获得一个浏览器内代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享您的屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许也可能不被允许执行您的代码。 在线基本代码编辑器的示例是 [CoderPad](https://coderpad.io/)。
|
||||||
|
|
||||||
### 集成开发环境（IDE）
|
### 集成开发环境 (IDE)
|
||||||
|
|
||||||
基本代码编辑器和 IDE 之间的区别在于 IDE 允许在多个文件之间切换。 它们可以是您笔记本电脑上的原生应用程序，也可以在浏览器中运行。 通常情况下，您会被要求使用 IDE 来构建用户界面，并且需要使用多个文件或键入不止一种语言。 这是可用的最佳环境，因为它与大多数工程师开发的方式非常相似。 在面试官的批准下，您应该能够：
|
基本代码编辑器和 IDE 之间的区别在于，IDE 允许在多个文件之间切换。 它们可以是在浏览器中，也可以是您笔记本电脑上的原生应用程序。 当您必须构建用户界面并且必须使用多个文件或键入不仅仅是一种语言时，通常会要求您使用 IDE。 这是可用的最佳环境，因为它与大多数工程师的开发方式非常相似。 在面试官的批准下，您应该能够：
|
||||||
|
|
||||||
- 预览正在进行的用户界面并实时查看更新。
|
* 预览正在进行中的 UI 并实时查看更新。
|
||||||
- 使用浏览器控制台进行调试。
|
* 使用浏览器控制台进行调试。
|
||||||
- 使用 IDE 功能（如语法突出显示、键盘快捷方式、自动完成、智能感知、扩展）提高生产力。
|
* 使用 IDE 功能，如语法高亮显示、键盘快捷键、自动完成、智能感知、扩展来提高您的工作效率。
|
||||||
- 添加任何必要的第三方依赖项。
|
* 添加任何必要的第三方依赖项。
|
||||||
|
|
||||||
始终选择使用 IDE 如果您被赋予权利选择。
|
如果可以选择，请始终选择使用 IDE。
|
||||||
|
|
||||||
在线 IDE 的示例包括[JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/)和[StackBlitz](https://stackblitz.com/)。
|
在线 IDE 的示例包括 [JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/) 和 [StackBlitz](https://stackblitz.com/)。
|
||||||
|
|
||||||
### 白板
|
### 白板
|
||||||
|
|
||||||
在某些公司，您可能会被要求在白板上编写所有必需的代码。 想象一下没有办法预览在白板上编写的 HTML 和 CSS！ 这是候选人的噩梦，像谷歌和 Meta / Facebook 这样的大型科技公司在面试时已知会这样做。 大多数其他公司要么让您带自己的笔记本电脑，您可以在本地 IDE 或 Web 浏览器中的在线代码编辑器/ IDE 中编码。
|
在某些公司，您可能需要直接在白板上编写所有必需的代码。 想象一下在白板上编写 HTML 和 CSS，而无法预览它！ 这对候选人来说是一场噩梦，像谷歌和 Meta/Facebook 这样的大型科技公司都知道在现场面试中这样做。 大多数其他公司要么让您自带笔记本电脑，然后在本地 IDE 或 Web 浏览器中的在线代码编辑器/IDE 上进行编码。
|
||||||
|
|
||||||
---
|
***
|
||||||
|
|
||||||
下面是各种编码环境的摘要和您可以采取的措施：
|
以下是各种编码环境的摘要以及您可以执行的操作：
|
||||||
|
|
||||||
| 环境 | 预览 | 执行代码 | 添加第三方依赖 |
|
| 环境 | 预览 | 执行代码 | 添加第三方依赖项 |
|
||||||
| -------------- | ---- | -------- | -------------- |
|
| ------------------ | ------- | ------------ | -------------------------- |
|
||||||
| 在线代码编辑器 | 否 | 有时 | 通常否 |
|
| 在线代码编辑器 | 否 | 视情况而定 | 通常没有 |
|
||||||
| IDE | 是 | 是 | 是 |
|
| IDE | 是 | 是 | 是 |
|
||||||
| 白板 | 否 | 否 | 否 |
|
| 白板 | 否 | 否 | 否 |
|
||||||
|
|
||||||
## 通用编码提示
|
## 一般编码技巧
|
||||||
|
|
||||||
- 熟悉有用的编辑器键盘快捷键，因为在面试期间时间非常重要，每个按键都很重要。 知道如何：
|
* 熟悉有用的编辑器键盘快捷键，因为在面试期间时间至关重要，并且每次按键都很重要。 知道如何：
|
||||||
- 跳到行首/行尾。
|
* 跳转到行首/行尾。
|
||||||
- 上下移动行。
|
* 将行上移/下移。
|
||||||
- 复制行。
|
* 复制一行。
|
||||||
- 更改符号（变量）名称。
|
* 轻松重命名符号。
|
||||||
- 提前了解您将在自己的笔记本电脑、给予您的笔记本电脑还是白板上编码。
|
* 事先了解您是否将在自己的笔记本电脑、给您的笔记本电脑或白板上进行编码。
|
||||||
- 如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的 IDE，请确保 IDE 正常运行，正确安装了 Node.js 和 npm，并且可以在 localhost 上运行本地 Web 服务器并在您的浏览器中访问它们。
|
* 如果您将在自己的笔记本电脑上进行编码并且可以使用自己的 IDE，请确保 IDE 正常运行，Node.js 和 npm 已正确安装，并且您可以在 `localhost` 上运行本地 Web 服务器并在浏览器中访问它们。
|
||||||
- 不要过分依赖代码的预览和执行。 这向您的面试官表明，您不确定自己输入了什么，并进行尝试和错误开发，这不是积极的信号。
|
* 不要过分依赖代码的预览和执行。 这向您的面试官表明您不确定自己输入的内容，并且通过反复试验进行开发，这不是一个积极的信号。
|
||||||
|
|
||||||
## 特定类型的提示
|
## 特定于类型的提示
|
||||||
|
|
||||||
请继续阅读每种编码面试类型的提示：
|
请继续阅读有关每种编码面试类型的提示：
|
||||||
|
|
||||||
- [算法编码](/front-end-interview-playbook/algorithms)
|
* [算法编码](/front-end-interview-playbook/algorithms)
|
||||||
- [JavaScript 编码](/front-end-interview-playbook/javascript)
|
* [JavaScript 编码](/front-end-interview-playbook/javascript)
|
||||||
- [用户界面编码](/front-end-interview-playbook/user-interface)
|
* [用户界面编码](/front-end-interview-playbook/user-interface)
|
||||||
|
|
||||||
## 练习问题
|
## 练习题
|
||||||
|
|
||||||
GreatFrontEnd 有一个长列表的[编码问题](/questions)，您可以练习并花时间检查它们。
|
GreatFrontEnd 有一个很长的[编码问题列表](/questions)，您可以练习，您绝对应该花时间查看它们。
|
||||||
|
|
||||||
请注意，我们在某些问题中特意保持模糊，并没有提出完整的要求。 这是为了训练您提前思考并考虑在解决方案时可能需要注意哪些可能的事项。
|
请注意，我们在某些问题中故意含糊不清，并且没有在问题中呈现完整的需求。 这是为了训练您提前思考并考虑在处理解决方案时可能需要注意的事项。
|
||||||
|
|
||||||
但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，意识到您错过了某些东西可能会让您感到沮丧，但这是帮助您改进的学习经验。 最好在准备过程中学习，而不是在实际面试中学习。
|
但是，我们将在解决方案中尽可能多地涵盖。 在阅读解决方案时意识到您遗漏了一些东西可能会令人沮丧，但这是一个学习体验，最终目标是帮助您改进。 最好在准备期间学习，而不是在实际面试期间学习。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "b87926c4",
|
||||||
|
"description": "f2bc0b45",
|
||||||
|
"seo_title": "7f6ef26b",
|
||||||
|
"seo_description": "9ac3df1b",
|
||||||
|
"social_title": "35078a6"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"35c53c11",
|
||||||
|
"2bf0e959",
|
||||||
|
"cc47c3e5",
|
||||||
|
"493e8bd0",
|
||||||
|
"3a6772ae",
|
||||||
|
"88b10912",
|
||||||
|
"158e6f2f",
|
||||||
|
"84cfe32f",
|
||||||
|
"e37720df",
|
||||||
|
"b6d503a8",
|
||||||
|
"2edbb909",
|
||||||
|
"f4eb7140",
|
||||||
|
"479d88a5",
|
||||||
|
"2c871597",
|
||||||
|
"ddef7dac",
|
||||||
|
"9579c455",
|
||||||
|
"12238f3f",
|
||||||
|
"c0c09aea",
|
||||||
|
"a166c3ae",
|
||||||
|
"7e75ddb2",
|
||||||
|
"f0c57ca9",
|
||||||
|
"dbd74015",
|
||||||
|
"dcdaeeb9",
|
||||||
|
"a1792050",
|
||||||
|
"51300c2d",
|
||||||
|
"83e4297b",
|
||||||
|
"55890346",
|
||||||
|
"4466a204",
|
||||||
|
"87e4a903",
|
||||||
|
"a6cc79fd",
|
||||||
|
"efbc5f44"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"35c53c11",
|
||||||
|
"2bf0e959",
|
||||||
|
"cc47c3e5",
|
||||||
|
"493e8bd0",
|
||||||
|
"3a6772ae",
|
||||||
|
"88b10912",
|
||||||
|
"158e6f2f",
|
||||||
|
"84cfe32f",
|
||||||
|
"e37720df",
|
||||||
|
"b6d503a8",
|
||||||
|
"2edbb909",
|
||||||
|
"f4eb7140",
|
||||||
|
"479d88a5",
|
||||||
|
"2c871597",
|
||||||
|
"ddef7dac",
|
||||||
|
"9579c455",
|
||||||
|
"12238f3f",
|
||||||
|
"c0c09aea",
|
||||||
|
"a166c3ae",
|
||||||
|
"7e75ddb2",
|
||||||
|
"f0c57ca9",
|
||||||
|
"dbd74015",
|
||||||
|
"dcdaeeb9",
|
||||||
|
"a1792050",
|
||||||
|
"51300c2d",
|
||||||
|
"83e4297b",
|
||||||
|
"55890346",
|
||||||
|
"4466a204",
|
||||||
|
"87e4a903",
|
||||||
|
"a6cc79fd",
|
||||||
|
"efbc5f44"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,119 +1,122 @@
|
||||||
---
|
---
|
||||||
title: 前端面试JavaScript问题——如何准备
|
title: JavaScript 编码面试
|
||||||
description: 为前端/网站开发人员面试准备JavaScript问题的指南——了解的概念、面试规则和70多个重要的练习问题。
|
description: 期望的问题类型、需要了解的重要概念以及要做的顶级练习题
|
||||||
|
seo_title: JavaScript 编码面试问题 | 如何准备
|
||||||
|
seo_description: 准备 JavaScript 编码面试问题的终极指南 - 包括问题类型、面试最佳实践、重要概念和练习题
|
||||||
|
social_title: 破解 JavaScript 编码面试 | 前端面试手册
|
||||||
---
|
---
|
||||||
|
|
||||||
编写 JavaScript 编码问题与编写算法编码问题的不同之处在于前者通常特定于前端领域，完成它们最有意义的是使用 JavaScript（或[TypeScript](https://www.typescriptlang.org/)）。 您还可能需要使用浏览器/JavaScript 特定的 API，或利用 HTML/CSS/JavaScript 知识。 您还可能需要使用浏览器/JavaScript 特定的 API，或利用 HTML/CSS/JavaScript 知识。
|
编写 JavaScript 编码问题与算法编码问题的区别在于，前者通常特定于前端领域，使用 JavaScript（或 [TypeScript](https://www.typescriptlang.org/)）来完成它们是最有意义的。 您可能还需要使用特定于浏览器/JavaScript 的 API 和/或利用 HTML/CSS/JavaScript 知识。
|
||||||
|
|
||||||
这些 JavaScript 编码问题往往具有实用价值，并且可以属于以下一类或多类：
|
这些 JavaScript 编码问题往往具有实践性，可以分为以下一个或多个类别：
|
||||||
|
|
||||||
1. 在 JavaScript 语言中实现标准内置类或方法。
|
1. 在 JavaScript 语言中实现标准的内置类或方法。
|
||||||
2. 实现在流行的库中常见的实用函数/类。
|
2. 实现常用库中常见的实用函数/类。
|
||||||
|
|
||||||
## 示例
|
## 示例
|
||||||
|
|
||||||
### JavaScript 标准内置类/方法
|
### JavaScript 标准内置类/方法
|
||||||
|
|
||||||
当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言 API 在旧浏览器中找不到。 当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言 API 在旧浏览器中找不到。 因此，开发人员不得不通过在下载的 JavaScript 中实现这些 API 来进行填充。 能够实现这些本地函数还显示了对前端基础知识的良好理解。 能够实现这些本地函数还显示了对前端基础知识的良好理解。
|
实现标准类/方法似乎是多余的，因为它们已经是语言的一部分。 然而，浏览器不一致曾经是一个猖獗的问题，并且在旧的浏览器中找不到一些语言 API。 因此，开发人员不得不求助于 polyfilling，即通过在下载的 JavaScript 中实现这些 API 来在不支持它的旧浏览器上提供现代功能。 能够实现这些原生函数也表明对前端基础知识有很好的理解。
|
||||||
|
|
||||||
- `Array` 方法：[`Array.prototype.map`](/questions/javascript/array-map)，[`Array.prototype.reduce`](/questions/javascript/array-reduce)，[`Array.prototype.filter`](/questions/javascript/array-filter)。
|
* `Array` 方法：[`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter)。
|
||||||
- `Promise` 和其他`Promise`相关函数：[`Promise.all`](/questions/javascript/promise-all)，[`Promise.any`](/questions/javascript/promise-any)。
|
* `Promise` 和其他与 `Promise` 相关的函数：[`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any)。
|
||||||
- DOM 方法：[`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name)，[`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name)。
|
* DOM 方法：[`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name)。
|
||||||
|
|
||||||
这些函数远非显而易见的那么简单。 这些函数远非显而易见的那么简单。 让我们以无辜的`Array.prototype.map`为例。 您是否知道： 您是否知道：
|
这些函数比看起来的要多。 让我们以无辜的 `Array.prototype.map` 为例。 你知道吗：
|
||||||
|
|
||||||
1. 它传递 4 个参数给回调函数，包括 `index` 和 `this` ？
|
1. 它向回调函数传递 4 个参数，包括 `index` 和 `this`？
|
||||||
2. 它保留稀疏数组中的“空”，即 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`。
|
2. 它保留稀疏数组中的“空洞”，又名 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`。
|
||||||
3. `map`处理的元素范围在第一个调用*callbackfn*之前设置。 在调用 map 之后附加到数组中的元素将不会被*callbackfn*访问。 如果更改数组的现有元素，则将它们的值作为传递给*callbackfn*的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript 说明](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map)
|
3. `map` 处理的元素范围在第一次调用 *callbackfn* 之前设置。 在调用 `map` 开始后添加到数组中的元素将不会被 *callbackfn* 访问。 如果更改了数组的现有元素，则传递给 *callbackfn* 的值将是 `map` 访问它们时的值； 在调用 `map` 开始后但在访问之前删除的元素不会被访问。 来源：[`Array.prototype.map` ECMAScript 规范](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map)
|
||||||
|
|
||||||
您的实施不必处理所有这些情况，特别是数组突变的情况。 但是，如果您提到了这些情况，那么这是一个积极的信号。 您的实现越接近规范，您就会显得更加资深/有经验。
|
您的实现不必处理所有这些情况，尤其是数组变异情况。 但是，如果您提到了这些情况，这是一个积极的信号。 您的实现越接近规范，您看起来就越资深/经验丰富。
|
||||||
|
|
||||||
### 来自流行库的实用函数/类
|
### 来自流行库的实用函数/类
|
||||||
|
|
||||||
这些函数/类在使用 JavaScript 构建软件时通常需要，但不在标准语言中（目前）。
|
这些函数/类在用 JavaScript 构建软件时通常是必需的，但（目前）不在标准语言中。
|
||||||
|
|
||||||
- Lodash/Underscore 函数：[`debounce`](/questions/javascript/debounce)，[`throttle`](/questions/javascript/throttle)，[`flatten`](/questions/javascript/flatten)，[`curry`](/questions/javascript/curry)，[`cloneDeep`](/questions/javascript/deep-clone)。
|
* Lodash/Underscore 函数：[`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone)。
|
||||||
- jQuery 方法：[`jQuery.css`](/questions/javascript/jquery-css)，[`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation)。
|
* jQuery 方法：[`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation)。
|
||||||
- 流行的库：
|
* 流行库：
|
||||||
- [`classnames`](/questions/javascript/classnames)
|
* [`classnames`](/questions/javascript/classnames)
|
||||||
- 测试框架（如[Jest](https://jestjs.io/) / [Mocha](https://mochajs.org/)）中的“test”/“expect”函数。
|
* 来自测试框架（如 [Jest](https://jestjs.io/) / [Mocha](https://mochajs.org/)）的 `test`/`expect` 函数
|
||||||
- [`Emitter`](/questions/javascript/event-emitter)（它存在于 Node.js 和许多第三方库中）
|
* [`Emitter`](/questions/javascript/event-emitter)（作为 Node.js 和许多第三方库的一部分存在）
|
||||||
- [Immutable.js](https://immutable-js.com/)
|
* [Immutable.js](https://immutable-js.com/)
|
||||||
- [Backbone.js](https://backbonejs.org/)
|
* [Backbone.js](https://backbonejs.org/)
|
||||||
|
|
||||||
如果您查看这些库的源代码，您可能会发现其中一些实现非常复杂。 这是因为该库必须支持许多晦涩的真实世界用例。 与标准函数类似，您不需要在面试设置中处理所有这些边缘情况，但是您获得了调用它们的点。
|
如果您查看这些库的源代码，您可能会发现某些实现非常复杂。 这是因为该库必须支持许多模糊的实际用例。 与标准函数类似，您不希望在面试环境中处理所有这些极端情况，但您可以因将它们指出来获得积分。
|
||||||
|
|
||||||
## JavaScript 编码面试期间要做的事情
|
## JavaScript 编码面试期间该做什么
|
||||||
|
|
||||||
JavaScript 编码面试与算法编码面试有许多相似之处。 一般来说，你应该：
|
JavaScript 编码面试与算法编码面试有很多相似之处。总的来说，你应该：
|
||||||
|
|
||||||
1. 查找您正在编码的平台，并熟悉编码环境：
|
1. 找出你正在使用的平台，并熟悉编码环境：
|
||||||
- 支持的编辑器快捷键。
|
* 支持的编辑器快捷键。
|
||||||
- 您是否可以执行代码。
|
* 你是否可以执行代码。
|
||||||
- 您是否可以安装第三方依赖项。
|
* 你是否可以安装第三方依赖项。
|
||||||
2. 1 分钟内进行自我介绍。 除非要求，否则不要花费更长的时间，否则您可能没有足够的时间编码。
|
2. 在一分钟内做自我介绍。除非被要求，否则不要超过这个时间，否则你可能没有足够的时间来编码。
|
||||||
3. 在收到问题后询问澄清性问题。 澄清以下内容： 澄清以下内容：
|
3. 收到问题后，提出澄清问题。澄清以下内容：
|
||||||
- 您可以使用更新的 JavaScript 语法（ES2016 及更高版本）吗？
|
* 你可以使用较新的 JavaScript 语法（ES2016 及以后版本）吗？
|
||||||
- 代码是要运行在浏览器上还是服务器上（例如 Node.js）。
|
* 代码是打算在浏览器中运行还是在服务器上运行（例如 Node.js）。
|
||||||
- 浏览器支持，因为这将影响您可以使用的浏览器 API。
|
* 浏览器支持，因为这将影响你可以使用的浏览器 API。
|
||||||
4. 向面试官提出解决方案。 与编码面试不同，JavaScript 编码面试的重点通常不在复杂的数据结构和算法上。 通过最佳的数据结构和算法选择，可能可以直接跳转到最佳解决方案。
|
4. 向面试官提出解决方案。与编码面试不同，JavaScript 编码面试的重点通常不在于复杂的数据结构和算法。你很有可能可以直接跳到具有最佳数据结构和算法选择的最优解决方案。
|
||||||
5. 编写解决方案并在编码时向面试官解释您的代码。
|
5. 编写你的解决方案，并在编码时向面试官解释你的代码。
|
||||||
6. 编码后，一次阅读您的代码，尝试检测基本错误，例如拼写错误，在初始化变量之前使用变量，不正确使用 API 等。
|
6. 编码后，通读你的代码一次，并尝试发现基本错误，例如拼写错误、在使用变量之前初始化它们、不正确地使用 API 等。
|
||||||
7. 概述一些基本测试用例和一些边缘情况。 使用这些情况测试您的代码，并确定您的代码是否通过了它们。 如果失败，请调试问题并修复它们。
|
7. 概述一些基本测试用例和一些边缘情况。使用这些用例测试你的代码，并确定你的代码是否通过了它们。如果失败，请调试问题并修复它们。
|
||||||
8. 可选：如果涉及算法优化和智能数据结构选择，则解释时间/空间复杂度。
|
8. 可选：如果代码涉及算法优化和智能数据结构选择，请解释时间和空间复杂度。
|
||||||
9. 解释您所做出的任何权衡、您明确未处理的案例以及如果您有更多时间可以改进代码的方法。
|
9. 解释你所做的任何权衡、你明确没有处理的案例，以及如果你有更多时间，你将如何改进代码。
|
||||||
10. 面试可能不会在这里结束，面试官可能会有对此问题的跟进问题或给您提供另一个问题。 要为它们做好准备。
|
10. 面试可能不会在这里结束，面试官可能会就这个问题向你提出后续问题或给你另一个问题。为他们做好准备。
|
||||||
|
|
||||||
## JavaScript 编码面试规则
|
## 如何准备 JavaScript 编码面试
|
||||||
|
|
||||||
1. 通过参考下面的“重要概念”熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-playbook/quiz) 也可以是一个好的开始，因为您可能会以测验问题的形式被问到这些概念。
|
1. 通过参考下面的“重要概念”，熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-playbook/quiz) 也可以是一个好的开始，因为你可能会在编码期间以测验问题的形式被问到这些概念。
|
||||||
2. 选择[学习计划](/interviews/get-started)并练习所选学习计划推荐的[JavaScript 编码问题](/questions/formats/javascript-functions)。 在做问题的同时，也可以学习某个主题。
|
2. 选择一个 [学习计划](/interviews/get-started) 并练习为所选学习计划推荐的 [JavaScript 编码问题](/questions/formats/javascript-functions)。 在做题的同时学习某个主题也是可以的。
|
||||||
|
|
||||||
## 重要概念
|
## 重要概念
|
||||||
|
|
||||||
| 类别 | 重要主题 |
|
| 类别 | 重要主题 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| 数据结构 | 数组、地图、堆栈、树、套装 |
|
| 数据结构 | 数组、映射、堆栈、树、集合 |
|
||||||
| 算法 | 二进制搜索、广度优先搜索、深度优先搜索、递归 |
|
| 算法 | 二分查找、广度优先搜索、深度优先搜索、递归 |
|
||||||
| JavaScript 语言 | 数据类型（检查类型、类型强制转换）、范围、闭合、回调、如何使用此处关键字、面向对象编程（原型、类、方法），箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数，`Promise`，处理多参数 |
|
| JavaScript 语言 | 数据类型（检查类型、类型强制转换）、作用域、闭包、回调、`this` 关键字的工作方式、JavaScript 中的面向对象编程（原型、类、方法）、箭头函数与普通函数、通过 `Function.prototype.apply()`/`Function.prototype.call()` 调用函数、`Promise`、处理可变参数 |
|
||||||
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
|
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
|
||||||
| 运行时 API | 计时器（`setTimeout()`、`setInterval()`） |
|
| 运行时 API | 计时器 (`setTimeout()`、`setInterval()`) |
|
||||||
|
|
||||||
## 如何准备 JavaScript 编码面试
|
## JavaScript 编码面试评分标准
|
||||||
|
|
||||||
JavaScript 编码面试类似于算法编码面试，应该采用相似的方法。 自然地，JavaScript 编码面试与评估候选人的方式在某些方面与算法编码面试重叠。
|
JavaScript 编码面试类似于算法编码面试，进行面试的方式也应该类似。当然，在候选人在 JavaScript 编码面试中如何被评估方面，将与算法编码面试有一些重叠。
|
||||||
|
|
||||||
- **问题解决**: 有系统和逻辑的方法来理解和解决问题。 将问题分解为较小的独立问题。 评估不同的方法及其权衡。
|
* **问题解决**：使用系统和逻辑的方法来理解和解决问题。将问题分解为较小的独立问题。评估不同的方法及其权衡。
|
||||||
- **软件工程基础**: 熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
|
* **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、设计模式的使用、使用干净的抽象设计解决方案。
|
||||||
- **领域专业知识**: 理解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript 和性能。
|
* **领域专业知识**：了解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、性能。
|
||||||
- **沟通**: 询问澄清细节并清楚地解释自己的方法和考虑因素。
|
* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素。
|
||||||
- **验证**: 识别各种要测试代码的方案，包括边缘情况。 能够诊断并修复出现的任何问题。
|
* **验证**：确定各种场景以测试代码，包括边缘情况。能够诊断和修复出现的任何问题。
|
||||||
|
|
||||||
## 有用的提示
|
## 有用的提示
|
||||||
|
|
||||||
- **虚构的想法**。 JavaScript 的标准库没有一些有用的数据结构和算法，例如队列、堆、二分搜索，这可以使您在 JavaScript 编码面试期间更轻松。 然而，您可以询问面试官是否可以假装这样的数据结构/算法存在，并直接在解决方案中使用它，而无需实现它。
|
* **一厢情愿**。 JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以使你在 JavaScript 编码面试中更轻松。但是，你可以询问面试官是否可以假装存在这样的数据结构/算法，并在你的解决方案中直接使用它，而无需实现它。
|
||||||
- **纯函数**。 编写纯函数，这些函数具有可重用和可插入性的好处，即函数不依赖于函数外的状态，并且不会产生副作用。
|
* **纯函数**。 旨在编写纯函数，这些函数具有可重用性和模块化的好处，即不依赖于函数外部的状态且不会引起副作用的函数。
|
||||||
- **明智地选择数据结构**。注意您选择数据结构的选择，并了解代码的时间复杂度。 如果要在解决方案中使用基本 JavaScript 数组、对象、集合、映射操作，应熟悉这些时间/空间复杂度。 这些时间/空间复杂度在不同的语言中可能有所不同。 不要编写运行时间为 O(n<sup>2</sup>)的代码，如果可以使用哈希图来在 O(n)运行时间内完成操作，则可以避免此类情况。
|
* **明智地选择数据结构。** 注意你对数据结构的选择，并注意代码的时间复杂度。 熟悉基本 JavaScript 数组、对象、集合、映射操作的时间/空间复杂度，以防你希望在你的解决方案中使用它们。 其中一些时间/空间复杂度因语言而异。 如果可以使用哈希映射在 O(n) 运行时完成，则不要编写以 O(n<sup>2</sup>) 运行的代码。
|
||||||
- **`this`很重要**。 如果一个函数接受回调函数作为参数，请考虑`this`变量应该如何行动。 对于许多内置函数，`this`是回调函数调用时提供的参数之一。
|
* **`this`很重要**。 如果一个函数接受一个回调函数作为参数，请考虑 `this` 变量应该如何表现。 对于许多内置函数，`this` 作为回调函数被调用的参数之一提供。
|
||||||
- **回调函数内的突变**。注意回调函数突变正在处理的数据结构。 您可能不需要在面试期间处理此情况，但应在相关情况下明确提出此类情况。
|
* **回调函数中的突变。** 谨防回调函数改变其操作的数据结构。 你可能不需要在面试期间处理这种情况，但如果相关，你应该明确提及此类情况。
|
||||||
- **递归边缘案例**。
|
* **递归边缘情况**。
|
||||||
- 如果您已经确定解决问题需要递归，请问输入大小以及如何处理递归堆栈溢出的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
|
* 如果你已经确定解决这个问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。 通常你不需要处理它，但提出这个问题是一个好信号。
|
||||||
- 嵌套深层次数据结构可能具有对它本身的递归引用，这使得某些操作（例如序列化）变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
|
* 嵌套的深层数据结构可能具有对自身的递归引用，这使得某些操作（如序列化）更加棘手。 询问面试官你是否必须处理此类情况。 通常你不需要处理它，但提出这个问题是一个好信号。
|
||||||
|
|
||||||
## 最佳实践问题
|
## 最佳实践问题
|
||||||
|
|
||||||
从经验上看，在频率和涵盖的重要概念方面，最佳的 JavaScript 编码面试问题是：
|
根据经验，根据涵盖的频率和重要概念，最佳的 JavaScript 编码面试问题是：
|
||||||
|
|
||||||
- [Debounce](/questions/javascript/debounce)
|
* [Debounce](/questions/javascript/debounce)
|
||||||
- [Throttle](/questions/javascript/throttle)
|
* [Throttle](/questions/javascript/throttle)
|
||||||
- [Array.prototype.filter](/questions/javascript/array-filter)
|
* [Array.prototype.filter](/questions/javascript/array-filter)
|
||||||
- [Promise.all](/questions/javascript/promise-all)
|
* [Promise.all](/questions/javascript/promise-all)
|
||||||
- [Curry](/questions/javascript/curry)
|
* [Curry](/questions/javascript/curry)
|
||||||
- [Flatten](/questions/javascript/flatten)
|
* [Flatten](/questions/javascript/flatten)
|
||||||
- [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
|
* [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
|
||||||
- [Deep Clone](/questions/javascript/deep-clone)
|
* [Deep Clone](/questions/javascript/deep-clone)
|
||||||
- [Data Selection](/questions/javascript/data-selection)
|
* [Data Selection](/questions/javascript/data-selection)
|
||||||
|
|
||||||
GreatFrontEnd 有[全面的 JavaScript 编码问题列表](/questions/javascript-interview-questions/javascript-functions)，您可以练习。 还有可以运行您的代码以验证正确性的自动化测试用例，以及由前 FAANG 资深工程师编写的解决方案。
|
GreatFrontEnd 有一个 [全面的 JavaScript 编码问题列表](/questions/formats/javascript-functions)，你可以练习。 还有自动测试用例，你可以针对这些用例运行你的代码，以验证前 FAANG 高级工程师编写的正确性和解决方案。
|
||||||
|
|
||||||
请注意，我们在某些问题中故意含糊不清，并没有在问题说明中全面介绍要求。 但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，如果您发现错过了一些内容，可能会感到沮丧，但是这可以锻炼您的提前思考，并考虑在解决方案工作时需要注意哪些可能区域。 最好在练习期间找出，而不是在实际面试中发现。
|
请注意，我们在某些问题中故意含糊不清，并且没有在问题描述中预先呈现完整的需求。 但是，我们将在解决方案中尽可能多地涵盖内容。 在阅读解决方案时，你可能会感到沮丧，因为你错过了一些东西，但这可以训练你提前思考并考虑在处理解决方案时可能需要注意的领域。 最好在练习中发现，而不是在实际面试中发现。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "f264a18",
|
||||||
|
"description": "cadf8c0a",
|
||||||
|
"seo_title": "597f69db",
|
||||||
|
"seo_description": "48c97f2d",
|
||||||
|
"social_title": "3a04eb09"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"2e8b4723",
|
||||||
|
"1552b496",
|
||||||
|
"7579fce0",
|
||||||
|
"2b2ecb7d",
|
||||||
|
"dd48cb53",
|
||||||
|
"7b5438f6",
|
||||||
|
"12a4b48b",
|
||||||
|
"171ba949",
|
||||||
|
"2c0e1de9",
|
||||||
|
"9fe44503",
|
||||||
|
"c559dbe2",
|
||||||
|
"fcc379ee",
|
||||||
|
"5747a8a0",
|
||||||
|
"72b91d6",
|
||||||
|
"c68dfa68",
|
||||||
|
"967646dc",
|
||||||
|
"35cd17b5",
|
||||||
|
"84dd7a0c",
|
||||||
|
"6d972773",
|
||||||
|
"1922fbc3",
|
||||||
|
"ffabcd47",
|
||||||
|
"82f36e55",
|
||||||
|
"80e7d9b0",
|
||||||
|
"dc87e224",
|
||||||
|
"508cf78a",
|
||||||
|
"ea5939f0",
|
||||||
|
"f17fa2f",
|
||||||
|
"29cb15f3",
|
||||||
|
"788133a2",
|
||||||
|
"c34e2cd6",
|
||||||
|
"3535c343",
|
||||||
|
"ce77c4b6",
|
||||||
|
"8745c277",
|
||||||
|
"2f29f41",
|
||||||
|
"d16bbea",
|
||||||
|
"5ae72edb",
|
||||||
|
"736a07d5",
|
||||||
|
"6948f229",
|
||||||
|
"c39d20cb",
|
||||||
|
"14af9fbb",
|
||||||
|
"2d1f52c8",
|
||||||
|
"3607fb25",
|
||||||
|
"7f524bab",
|
||||||
|
"fe6b5994",
|
||||||
|
"e10248d9",
|
||||||
|
"70cd2c67"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"2e8b4723",
|
||||||
|
"1552b496",
|
||||||
|
"7579fce0",
|
||||||
|
"2b2ecb7d",
|
||||||
|
"dd48cb53",
|
||||||
|
"7b5438f6",
|
||||||
|
"12a4b48b",
|
||||||
|
"171ba949",
|
||||||
|
"2c0e1de9",
|
||||||
|
"9fe44503",
|
||||||
|
"c559dbe2",
|
||||||
|
"fcc379ee",
|
||||||
|
"5747a8a0",
|
||||||
|
"72b91d6",
|
||||||
|
"c68dfa68",
|
||||||
|
"967646dc",
|
||||||
|
"35cd17b5",
|
||||||
|
"84dd7a0c",
|
||||||
|
"6d972773",
|
||||||
|
"1922fbc3",
|
||||||
|
"ffabcd47",
|
||||||
|
"82f36e55",
|
||||||
|
"80e7d9b0",
|
||||||
|
"dc87e224",
|
||||||
|
"508cf78a",
|
||||||
|
"ea5939f0",
|
||||||
|
"f17fa2f",
|
||||||
|
"29cb15f3",
|
||||||
|
"788133a2",
|
||||||
|
"c34e2cd6",
|
||||||
|
"3535c343",
|
||||||
|
"ce77c4b6",
|
||||||
|
"8745c277",
|
||||||
|
"2f29f41",
|
||||||
|
"d16bbea",
|
||||||
|
"5ae72edb",
|
||||||
|
"736a07d5",
|
||||||
|
"6948f229",
|
||||||
|
"c39d20cb",
|
||||||
|
"14af9fbb",
|
||||||
|
"2d1f52c8",
|
||||||
|
"3607fb25",
|
||||||
|
"7f524bab",
|
||||||
|
"fe6b5994",
|
||||||
|
"e10248d9",
|
||||||
|
"70cd2c67"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,143 +1,146 @@
|
||||||
---
|
---
|
||||||
title: 前端面试——权威概述和准备指南
|
title: 前端面试：简介
|
||||||
description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指南。 了解所有内容：什么可以期望，不同的面试问题类型，以及如何准备。
|
description: 您需要了解的一切 - 从问题类型到准备策略
|
||||||
|
seo_title: 前端面试快速入门指南 - 必知的一切
|
||||||
|
seo_description: 通过本快速入门指南开始您的前端面试准备。探索面试形式、基本技巧以及公司提出的问题类型。
|
||||||
|
social_title: 前端面试 - 快速入门指南 | GreatFrontEnd
|
||||||
---
|
---
|
||||||
|
|
||||||
前端面试通常很难准备。 可能存在许多不同的面试形式，而不同公司的前端工程师评估标准也没有行业的规范结构。 有些公司针对前端工程师和通用软件工程师使用相同的面试流程，而有些公司（例如 Google 和 Amazon）则在通用软件工程师环节和前端领域特定环节之间均有面试流程。
|
准备前端面试是出了名的难。面试形式多种多样，而且整个行业在评估前端工程师方面没有统一的标准结构。一些公司对前端工程师的面试流程与对普通软件工程师的面试流程相同，而另一些公司（例如谷歌和亚马逊）则混合使用，既有通用的软件工程环节，也有前端特定领域的环节。
|
||||||
|
|
||||||
近年来，业界逐渐转向不再要求前端面试候选人解决数据结构和算法（DSA）问题。 相反，候选人将需要实现常见的前端库函数和/或构建实用的 UI 组件/应用程序，以测试他们对实际和相关的前端概念的理解。 这是一个令人鼓舞的趋势，因为与大多数 DSA 问题不同，前端面试问题与前端工程师的日常职责高度相关，是更准确的评估。
|
近年来，行业正在逐渐放弃要求前端面试候选人解决数据结构和算法 (DSA) 问题。相反，候选人将不得不实现常见的前端库函数和/或构建实用的 UI 组件/应用程序，从而测试他们对实用且相关的前端概念的理解。这是一个令人鼓舞的趋势，因为与大多数 DSA 问题不同，前端面试问题与前端工程师的日常职责高度相关，并且是一种更准确的评估。
|
||||||
|
|
||||||
但是，许多现有的软件工程面试资源都针对通用软件工程角色而不是一种更小众的和小众的前端工程师领域;你几乎找不到有关前端系统设计的任何资源。 这些因素加上可能的领域主题的广度使得准备前端面试是一个漫长，乏味且困难的过程。
|
然而，许多现有的软件工程面试资源都是针对普通软件工程角色，而不是前端工程师，后者是一个规模小得多的细分领域；您几乎找不到任何关于前端系统设计的资源。这些因素加上可能涉及的领域主题的广泛性，使得准备前端面试成为一个漫长、乏味和艰巨的过程。
|
||||||
|
|
||||||
请不要担心！ GreatFrontEnd 旨在成为前端工程师通过一站式平台获得必要知识并进行前端面试的最佳资源。 在 GreatFrontEnd 上，读者可以：
|
别担心！GreatFrontEnd 旨在成为前端工程师在前端面试中脱颖而出的最佳资源，它是一个一站式平台，为前端工程师提供必要的知识和实践。在 GreatFrontEnd 上，读者可以：
|
||||||
|
|
||||||
1. 学习如何创建一个专门针对前端工程职位的[**精彩简历**](/front-end-interview-playbook/resume)。
|
1. 学习如何为 [**前端工程职位列表创建一份很棒的简历**](/front-end-interview-playbook/resume)。
|
||||||
2. 学习适用于所有问题类型的**重要的前端概念和技术**。
|
2. 学习适用于所有问题类型的 **重要前端概念和技术**。
|
||||||
3. 准备最常见的**前端面试问题类型**（编码，系统设计，测验，行为）。
|
3. 准备最常见的前端 **面试问题类型**（编码、系统设计、测验、行为）。
|
||||||
4. [**练习问题**](/questions)，涵盖最常见的前端面试格式和由前 FAANG 高级工程师编写的**高质量解决方案**。
|
4. 练习最常见前端面试形式的 [**练习题**](/questions)，以及由前 FAANG 高级工程师撰写的 **高质量解决方案**。
|
||||||
5. 浏览建议的[**学习计划**](/interviews/get-started)，并采用**结构化准备方法**。
|
5. 浏览建议的 [**学习计划**](/interviews/get-started) 并采用 **结构化的准备方法**。
|
||||||
|
|
||||||
## 准备精彩简历
|
## 准备一份很棒的简历
|
||||||
|
|
||||||
您的简历是给潜在雇主留下印象的第一次机会，因此对于得到梦想公司的短名单至关重要。
|
您的简历是给潜在雇主留下第一印象的机会，对于在您梦寐以求的公司获得候选资格至关重要。
|
||||||
|
|
||||||
如果您在申请工作时遇到了困难，即使拥有必要的资格，也可能是因为您的简历。 即使高素质的候选人可能也不知道如何有效地展示他们的成就在简历中，因此可能无法获得短名单。 需要记住的是，低资格并不总是不被选中的原因；有时只是因为呈现不良和未包含重要内容。 一旦您通过简历筛选流程，过去的成就就变得次要了，您的技术能力成为首要考虑因素，这可以通过学习和改进来实现。 因此，通过提交代表您的高水平的优秀简历，进入门槛是极其重要的。
|
如果您在申请工作时遇到面试困难，尽管您具备必要的资格，但这可能是因为您的简历。即使是高素质的候选人也可能不知道如何在简历中有效地展示他们的成就，因此可能无法入围。重要的是要记住，不合格并不总是未被选中的原因；有时这仅仅是展示不佳和未包含重要内容的问题。一旦您通过了简历筛选流程，您过去的成就就变得次要，您的技术技能变得至关重要，这些技能是可以学习和提高的。因此，通过提交一份能很好地代表您的优秀简历来敲开大门非常重要。
|
||||||
|
|
||||||
虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads 的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-playbook/resume)。
|
虽然已经有关于如何制作优秀的软件工程简历的现有资源，例如 [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) 和 [FAANG Tech Leads' Resume Handbook](https://www.faangtechleads.com/resume/handbook/)，但它们是通用的，并非特定于前端工程师。我们编写了一些 [关于如何为前端工程职位定制简历的提示](/front-end-interview-playbook/resume)。
|
||||||
|
|
||||||
## 按问题类型准备
|
## 按问题格式准备
|
||||||
|
|
||||||
前端面试环节可能有许多不同的形式，并且每家公司的做法都不同。 为了有效地做好准备，您应该了解您面试的公司的不同面试阶段，每个阶段内的各种环节以及每个环节中将要问的问题类型。
|
前端面试流程可以有多种不同的形式，每个公司的情况也各不相同。为了提高准备效率，您应该找出您正在面试的公司的不同面试阶段、每个阶段内的各个环节以及您将在每个环节中被问到的问题类型。
|
||||||
|
|
||||||
每种问题格式都有自己的挑战和怪癖。 我们将介绍各种格式，如果您想了解更多信息，可以阅读每种类型的专页。
|
每个问题格式都有其自身的挑战和怪癖。我们将向您介绍各种格式，如果您想了解更多信息，可以阅读每种类型的专用页面。
|
||||||
|
|
||||||
### 编程问题
|
### 编码问题
|
||||||
|
|
||||||
编码问题将涉及编写代码（搞定！）。 但您需要编写的代码以及您将编写代码的平台可能截然不同。 您可能会问到：
|
编码问题将涉及编写代码（废话！）。但是，您需要编写的代码以及您编写代码的平台可能会有很大差异。您可能会被问到：
|
||||||
|
|
||||||
1. **算法编码**：解决棘手的算法问题，评估您对数据结构，算法和时间复杂度的理解。 [阅读算法编码面试](/front-end-interview-playbook/algorithms)的相关内容。
|
1. **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解。[阅读关于算法编码面试](/front-end-interview-playbook/algorithms)。
|
||||||
2. **JavaScript 编码**：在 JavaScript 中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读 JavaScript 编码面试的相关内容](/front-end-interview-playbook/javascript)。
|
2. **JavaScript 编码**：用 JavaScript 实现与前端领域相关的函数或数据结构，并在前端开发过程中常用。[阅读关于 JavaScript 编码面试](/front-end-interview-playbook/javascript)。
|
||||||
3. **用户界面编码**：使用 HTML，CSS 和 JavaScript 构建用户界面（组件，小部件，应用程序），有时甚至包括使用 JavaScript 框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-playbook/user-interface)。
|
3. **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。[阅读关于用户界面编码面试](/front-end-interview-playbook/user-interface)。
|
||||||
|
|
||||||
公司愈趋趋向使用领域特定的编程问题，而不是测试关于算法和数据结构的知识，因为前者对于评估前端工程工作所需的核心技能更为相关。
|
公司正倾向于使用特定于领域的编码问题，而不是测试算法和数据结构，因为前者与评估前端工程工作所需的核心技能更相关。
|
||||||
|
|
||||||
### 系统设计问题
|
### 系统设计问题
|
||||||
|
|
||||||
系统设计面试是高度无定形的面试，涉及设计软件系统来解决模糊的问题或情景。 候选人将需要将系统分解为较小的组件，绘制架构图，设计 API，在系统的某些部分进行深入交流，并讨论权衡取舍才能成功。
|
系统设计面试是高度开放式的面试，涉及提出软件系统设计来解决一个模糊的问题或场景。候选人将不得不将一个系统分解成更小的组件，绘制架构图，设计 API，深入研究系统的某些部分并讨论权衡，以便取得成功。
|
||||||
|
|
||||||
系统设计面试通常仅提供给高级别的候选人，并且所需的系统可以是以下类型和示例之一：
|
系统设计面试通常只针对高级候选人，所需的系统可以是以下类型和示例之一：
|
||||||
|
|
||||||
1. **分布式系统**：Twitter 后端，URL 缩短器
|
1. **分布式系统**：Twitter 后端、URL 缩短器
|
||||||
2. **客户端应用程序**：新闻推送，照片共享应用程序
|
2. **客户端应用程序**：新闻源、照片共享应用程序
|
||||||
3. **复杂的用户界面组件**：自动完成，下拉菜单，模态
|
3. **复杂的用户界面组件**：自动完成、下拉菜单、模态
|
||||||
|
|
||||||
大多数情况下，前端工程师将被要求设计客户端应用程序和复杂的用户界面组件，因为这些产品更相关于前端工程。
|
大多数情况下，前端工程师将被要求设计客户端应用程序和复杂的用户界面组件，因为这些产品与前端工程更相关。
|
||||||
|
|
||||||
[了解关于前端系统设计的更多信息](/front-end-interview-playbook/system-design)
|
[阅读更多关于前端系统设计 ->](/front-end-interview-playbook/system-design)
|
||||||
|
|
||||||
### 测验问题
|
### 测验问题
|
||||||
|
|
||||||
测验问题也称为琐事问题，是用于测试您对领域的理解的短问题。 每个问题不应花费超过一到两分钟的时间。
|
测验问题，也称为琐事问题，是旨在测试您对该领域的理解的简短问题。每个问题不应超过一两分钟即可回答。
|
||||||
|
|
||||||
通常不会有整个面试环节只问测验问题，但它们可能会在其他面试环节中出现。
|
通常不会有整个面试轮次只问你测验问题，但它们可能会在其他面试轮次中突然出现。
|
||||||
|
|
||||||
[阅读有关测验问题的更多信息](/front-end-interview-playbook/quiz)。
|
[阅读更多关于测验问题 ->](/front-end-interview-playbook/quiz)
|
||||||
|
|
||||||
## 行为问题/面试
|
## 行为问题/面试
|
||||||
|
|
||||||
在行为面试中，面试官会询问您过去的行为和经验，以评估您是否适合该工作和成熟水平。
|
在行为面试中，面试官会询问您过去的行为和经验，以评估您是否适合这份工作以及成熟度。
|
||||||
|
|
||||||
行为面试背后的理念是，过去的行为和经验是了解某个人将来行为的良好指标，因此面试官将提出旨在让您描述您所面临的具体情况以及您如何应对它们的问题，以更好地了解您的个人能力。
|
行为面试背后的想法是，过去的行为和经验是某人未来行为的良好指标，因此面试官会提出旨在让您描述您所面临的具体情况以及您如何处理这些情况的问题，以便更好地了解您，超越您的技术能力。
|
||||||
|
|
||||||
行为面试是一个大型主题，我们[撰写了一个完整的指南](/behavioral-interview-playbook)。
|
行为面试本身就是一个很大的话题，我们已经[写了一整本关于它的手册](/behavioral-interview-playbook)。
|
||||||
|
|
||||||
## 典型的招聘流程
|
## 典型的招聘流程
|
||||||
|
|
||||||
大多数公司将有类似以下的招聘流程：
|
大多数公司都会有一个类似于：
|
||||||
|
|
||||||
1. **初步筛选**
|
1. **初步筛选**
|
||||||
- 招聘人员通话（可能会问有关测验问题）
|
* 招聘人员电话（可能会问测验问题）
|
||||||
- 自动分级的在线评估或接回家的项目
|
* 自动评分的在线评估或带回家的项目
|
||||||
2. **电话筛选**
|
2. **电话筛选**
|
||||||
- 编程（实现算法，JavaScript 函数或构建用户界面）
|
* 编码（实现算法、JavaScript 函数或构建用户界面）
|
||||||
3. **完整循环**
|
3. **全循环**
|
||||||
- 编程环节（实现算法，JavaScript 函数或构建用户界面）
|
* 编码轮（实现算法、JavaScript 函数或构建用户界面）
|
||||||
- 系统设计环节
|
* 系统设计轮
|
||||||
- 行为环节
|
* 行为轮
|
||||||
|
|
||||||
最可靠的方法是询问招聘公司有关该角色的面试流程。 良好的公司甚至会准备详细的文件来解释每个面试阶段以及有关资源，指导候选人准备面试。 对于看到大量申请人的大公司来说，有人会通过[Glassdoor](https://www.glassdoor.com/), [Blind](https://www.teamblind.com/)和[Reddit](https://www.reddit.com/)等平台分享他们的面试经验。
|
了解期望的最可靠方法是向公司招聘人员询问他们对该职位的面试流程。好的公司甚至会准备一份详细的文件来解释面试流程的每个阶段，以及指导候选人准备面试的资源。对于看到大量申请人的大公司来说，很有可能一些与他们面试过的候选人会在[Glassdoor](https://www.glassdoor.com/)、[Blind](https://www.teamblind.com/) 和 [Reddit](https://www.reddit.com/) 等平台上分享他们的经验。
|
||||||
|
|
||||||
\*\*您必须知道要在面试中期望哪些问题类型，否则您将无处不飞，并且无法有效地准备。
|
**您必须知道在面试中会遇到什么类型的问题，否则您将盲目行事，无法有效地准备。**
|
||||||
|
|
||||||
### 回合类型矩阵
|
### 轮次类型矩阵
|
||||||
|
|
||||||
以下矩阵显示了每个面试轮次中每种问题类型的相关程度/可能性。 面试轮可能包括来自不同问题类型的问题。
|
下表显示了每次面试轮次中每种问题类型的相关性/可能性。面试轮次可能包含来自不同问题类型的问题。
|
||||||
|
|
||||||
| 环节 | 测验 | 算法 | UI | JavaScript | 系统设计 |
|
| 轮次 | 测验 | 算法 | UI | JavaScript | 系统设计 |
|
||||||
| ------------ | ---- | ---- | --- | ---------- | -------- |
|
| ----------------- | ------ | ---------- | ---- | ---------- | ------------- |
|
||||||
| 在线评估 | 中等 | 高 | 高 | 高 | 无 |
|
| 在线评估 | 中等 | 高 | 高 | 高 | 无 |
|
||||||
| 招聘人员通话 | 中等 | 无 | 无 | 无 | 无 |
|
| 招聘人员电话 | 中等 | 无 | 无 | 无 | 无 |
|
||||||
| 接回家的项目 | 无 | 无 | 高 | 中等 | 中等 |
|
| 待办项目 | 无 | 无 | 高 | 中等 | 中等 |
|
||||||
| 编程 | 低 | 高 | 高 | 高 | 低 |
|
| 编码 | 低 | 高 | 高 | 高 | 低 |
|
||||||
| 行为问题 | 低 | 无 | 无 | 无 | 无 |
|
| 行为 | 低 | 无 | 无 | 无 | 无 |
|
||||||
| 系统设计 | 低 | 无 | 低 | 无 | 高 |
|
| 系统设计 | 低 | 无 | 低 | 无 | 高 |
|
||||||
| 招聘经理 | 低 | 无 | 无 | 无 | 低 |
|
| 招聘经理 | 低 | 无 | 无 | 无 | 低 |
|
||||||
|
|
||||||
### 公司问的问题类型
|
### 公司提出的问题类型
|
||||||
|
|
||||||
以下是美国顶尖公司问的问题类型摘要。
|
以下是美国顶级公司提出的问题类型的摘要。
|
||||||
|
|
||||||
| 公司 | 测验 | 算法 | JavaScript | UI | 系统设计 | 行为面试 |
|
| 公司 | 测验 | 算法 | JavaScript | UI | 系统设计 | 行为 |
|
||||||
| :------------ | :--: | :--: | :--------: | :-: | :------: | :------: |
|
| :-- | :-: | :-: | :-: | :-: | :-: | :-: |
|
||||||
| 爱彼迎 | 否 | 是 | 是 | 是 | 否 | 是 |
|
| Airbnb | 否 | 是 | 是 | 是 | 否 | 是 |
|
||||||
| 亚马逊 | 是 | 是 | 是 | 是 | 是 | 是 |
|
| 亚马逊 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||||||
| 苹果 | 是 | 是 | 是 | 是 | 未知 | 是 |
|
| 苹果 | 是 | 是 | 是 | 是 | 未知 | 是 |
|
||||||
| 字节跳动 | 是 | 是 | 是 | 是 | 否 | 是 |
|
| 字节跳动 | 是 | 是 | 是 | 是 | 否 | 是 |
|
||||||
| Dropbox | 否 | 是 | 是 | 是 | 是 | 是 |
|
| Dropbox | 否 | 是 | 是 | 是 | 是 | 是 |
|
||||||
| Facebook/Meta | 是 | 否 | 是 | 否 | 是 | 是 |
|
| Facebook/Meta | 是 | 否 | 是 | 否 | 是 | 是 |
|
||||||
| 谷歌 | 是 | 是 | 是 | 是 | 是 | 是 |
|
| 谷歌 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||||||
| 领英 | 是 | 是 | 是 | 是 | 未知 | 是 |
|
| 领英 | 是 | 是 | 是 | 是 | 未知 | 是 |
|
||||||
| Lyft | 否 | 否 | 是 | 是 | 是 | 是 |
|
| Lyft | 否 | 否 | 是 | 是 | 是 | 是 |
|
||||||
| 微软 | 是 | 是 | 是 | 是 | 是 | 是 |
|
| 微软 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||||||
| 推特 | 是 | 是 | 是 | 是 | 是 | 是 |
|
| 推特 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||||||
| Uber | 未知 | 未知 | 是 | 是 | 未知 | 是 |
|
| Uber | 未知 | 未知 | 是 | 是 | 未知 | 是 |
|
||||||
|
|
||||||
**问题类型传奇**
|
**问题类型图例**
|
||||||
|
|
||||||
- **测验**：封闭的测验/问答样式问题。
|
* **测验**：封闭式测验/琐事风格的问题。
|
||||||
- **算法**：实现解决算法问题的功能。 通常不特定于前端领域。
|
* **算法**：实现一个解决算法问题的函数。它通常不是前端领域特定的。
|
||||||
- **JavaScript**：在 JavaScript 中实现与前端领域相关的功能/类。
|
* **JavaScript**：用 JavaScript 实现一个与前端领域相关的函数/类。
|
||||||
- **用户界面**：使用 HTML/CSS/JavaScript 构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用 Vanilla JS/某些框架。
|
* **UI**：使用 HTML/CSS/JavaScript 构建用户界面。一些公司允许您使用您选择的框架，而另一些公司只允许 Vanilla JS/某些框架。
|
||||||
- **系统设计**：设计系统并讨论体系结构及其组成部分。
|
* **系统设计**：设计一个系统并讨论架构及其组件。
|
||||||
- **行为问题**：讨论与他人合作的具体经验以及您如何处理困难情况。
|
* **行为**：讨论您与他人合作的特定经验以及您如何处理困难的情况。
|
||||||
|
|
||||||
## 学习和实践
|
## 学习和实践
|
||||||
|
|
||||||
继续阅读，了解如何准备以下前端面试格式/问题类型：
|
请继续阅读以了解如何准备以下前端面试格式/问题类型：
|
||||||
|
|
||||||
- [编程问题](/front-end-interview-playbook/coding)
|
* [编码问题](/front-end-interview-playbook/coding)
|
||||||
- [算法问题](/front-end-interview-playbook/algorithms)
|
* [算法问题](/front-end-interview-playbook/algorithms)
|
||||||
- [JavaScript 问题](/front-end-interview-playbook/javascript)
|
* [JavaScript 问题](/front-end-interview-playbook/javascript)
|
||||||
- [用户界面问题](/front-end-interview-playbook/user-interface)
|
* [用户界面问题](/front-end-interview-playbook/user-interface)
|
||||||
- [系统设计问题](/front-end-interview-playbook/system-design)
|
* [系统设计问题](/front-end-interview-playbook/system-design)
|
||||||
- [测验问题](/front-end-interview-playbook/quiz)
|
* [测验问题](/front-end-interview-playbook/quiz)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "e480f0cf",
|
||||||
|
"description": "bcff4ba6",
|
||||||
|
"seo_title": "1d7d3f68",
|
||||||
|
"seo_description": "1ee4b47e",
|
||||||
|
"social_title": "ea77f7d5"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"98f38cd1",
|
||||||
|
"493e8bd0",
|
||||||
|
"3b0d82ae",
|
||||||
|
"978b80ee",
|
||||||
|
"ba9aa997",
|
||||||
|
"2d4699d8",
|
||||||
|
"14246030",
|
||||||
|
"38ec276",
|
||||||
|
"159edb1e",
|
||||||
|
"7e75ddb2",
|
||||||
|
"9ac8168",
|
||||||
|
"5962f6f",
|
||||||
|
"f4d4d23d",
|
||||||
|
"b892bb91",
|
||||||
|
"3276416d",
|
||||||
|
"e6a7ed6e",
|
||||||
|
"21ad3e33"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"98f38cd1",
|
||||||
|
"493e8bd0",
|
||||||
|
"3b0d82ae",
|
||||||
|
"978b80ee",
|
||||||
|
"ba9aa997",
|
||||||
|
"2d4699d8",
|
||||||
|
"14246030",
|
||||||
|
"38ec276",
|
||||||
|
"159edb1e",
|
||||||
|
"7e75ddb2",
|
||||||
|
"9ac8168",
|
||||||
|
"5962f6f",
|
||||||
|
"f4d4d23d",
|
||||||
|
"b892bb91",
|
||||||
|
"3276416d",
|
||||||
|
"e6a7ed6e",
|
||||||
|
"21ad3e33"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,56 +1,59 @@
|
||||||
---
|
---
|
||||||
title: 前端面试测验题——如何准备
|
title: 前端问答面试题
|
||||||
description: 准备测验式前端面试问题的指南——预期情况，需要学习的概念，以及100多个重要的练习题。
|
description: 问答式前端面试题 — 期望什么、要学习的概念以及 100 多个重要的练习题。
|
||||||
|
seo_title: 前端问答面试题 | 如何准备
|
||||||
|
seo_description: 准备问答式前端面试题的指南 — 期望什么、要学习的概念以及 100 多个重要的练习题。
|
||||||
|
social_title: 破解问答式面试 | 前端面试手册
|
||||||
---
|
---
|
||||||
|
|
||||||
测验题，也称为问答题，是用于测试您对领域了解的短小封闭式问题。 每个问题不应花费超过一两分钟的时间来回答，不过，您的回答可能会引发进一步的讨论。 因此，重要的是要对您所给出的答案背后的概念有良好的理解，而不是盲目地背诵和复述。
|
问答题，也称为琐事题，是旨在测试你对该领域理解的简短封闭式问题。每个问题不应超过一两分钟的回答时间，但是，可以从你的答案中衍生出进一步的讨论。因此，对你给出的答案背后的概念有很好的理解非常重要，而不是盲目地记忆和重复。
|
||||||
|
|
||||||
## 示例
|
## 示例
|
||||||
|
|
||||||
- [解释 CSS 盒模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
|
* [解释 CSS 盒子模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
|
||||||
- [什么是 CSS 选择器优先级？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
|
* [什么是 CSS 选择器特异性？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
|
||||||
- [`let`、`var`或`const`创建的变量有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
|
* [使用 `let`、`var` 或 `const` 创建的变量之间有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
|
||||||
- [解释 JavaScript 中的`this`如何工作。](/questions/quiz/explain-how-this-works-in-javascript)
|
* [解释 `this` 在 JavaScript 中的工作原理。](/questions/quiz/explain-how-this-works-in-javascript)
|
||||||
|
|
||||||
除了要求您了解前端基础知识（HTML、CSS、JavaScript），如果您声称了解某些具体框架，面试官也可能就相关问题向您询问（无论是面试时口头提问还是确认您的简历时）：
|
除了被问到前端基础知识（HTML、CSS、JavaScript）之外，如果你声称自己了解它们（在面试期间口头或面试官浏览你的简历时），你可能会被问到特定于框架的问题：
|
||||||
|
|
||||||
- X 技术解决了哪些问题？
|
* X 技术解决了什么问题？
|
||||||
- X 技术的优点和缺点是什么？
|
* X 技术的优缺点是什么？
|
||||||
- X 技术的底层是如何工作的？
|
* X 技术在幕后是如何工作的？
|
||||||
- X 技术与 Y 技术有何区别？
|
* X 技术与 Y 技术相比如何？
|
||||||
|
|
||||||
## 相关环节
|
## 相关环节
|
||||||
|
|
||||||
通常不会有面试只问测验式问题的环节。 但是，在专注于其他格式（如编码和系统设计）的面试中，面试官可能会向您提问测验式问题。
|
通常不会有仅询问你问答题的面试环节。但是，面试官可能会在专注于其他形式（如编码和系统设计）的面试中向你提出问题。
|
||||||
|
|
||||||
- **招聘专员电话**: 由于测验式问题的封闭性质，甚至非技术人员（如招聘专员）也可以提出测验式问题。 值得庆幸的是，非工程师可能无法评估准确性，并且可能只是将您的答案中的关键字与解决方案进行匹配。 在最糟糕的情况下，只要回复听起来合理并包含正确关键字的内容，您可能仍然能够通过。
|
* **招聘人员电话**: 由于问答题的封闭性质，即使是非技术人员（如招聘人员）也可以提出这些问题。值得庆幸的是，非工程师可能无法评估准确性，可能只是将你的答案中的关键词与交给他们的解决方案进行匹配。在最坏的情况下，你可能仍然可以通过回复听起来合理并包含正确关键词的内容来通过。
|
||||||
- **在线评估**: 虽然不常见，但有可能您会被要求回答多选题并从中选择正确答案。
|
* **在线评估**: 虽然不常见，但你可能会被提供多项选择题，并且必须从中选择一个正确的答案。
|
||||||
- **编码环节**: 面试官可能会在开始任何编码之前向您询问一些测验式问题以热身。 或者当您编写和解释代码时，面试官可能想进一步了解您刚才提到的某些内容。 因此，最好对您说/做的一切有良好的理解。
|
* **编码环节**: 面试官可能会在任何编码开始之前问你几个问答题来热身。或者，当你正在编码和解释你的代码时，面试官可能希望深入研究你刚才提到的内容。因此，最好对你所说/所做的一切都有很好的理解。
|
||||||
- **系统设计环节**: 就像在编码环节一样，面试官可以就您所说的东西进一步提问。
|
* **系统设计环节**: 就像在编码环节一样，面试官可以就你所说的事情提出进一步的问题。
|
||||||
- **招聘经理环节**: 招聘经理环节通常不涉及技术，但他们可能会查看您的简历，并就其中提到的技术/项目向您提出相关的测验式问题。
|
* **招聘经理环节**: 招聘经理环节通常不是技术性的，但他们可能会查看你的简历，并就你的简历中提到的技术/项目向你提问相关的问答题。
|
||||||
|
|
||||||
正如您所看到的，您几乎可以在任何可能的环节中都会被问及测验式问题。 随时做好准备。
|
正如你所看到的，你可能会在几乎所有可能的环节中被问到问答题。随时做好准备。
|
||||||
|
|
||||||
## 重要概念
|
## 重要概念
|
||||||
|
|
||||||
| 领域 | 主题 |
|
| 领域 | 主题 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| HTML | 语义化 HTML，块级元素和行内元素，`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`，表单验证/提交 |
|
| HTML | 语义 HTML、块级元素与内联元素、`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`、表单验证/提交 |
|
||||||
| CSS | 盒模型，选择器，优先级，定位，单位，Flexbox，Grid，媒体查询 |
|
| CSS | 盒子模型、选择器、特异性、定位、单位、Flexbox、Grid、媒体查询 |
|
||||||
| JavaScript | 数据类型，作用域，闭包，`this`，变量声明（`var`、`let`、`const`），数组方法，对象方法，Promise，类，异步/等待 |
|
| JavaScript | 数据类型、作用域、闭包、`this`、变量声明（`var`、`let`、`const`）、数组方法、对象方法、Promise、类、Async/Await |
|
||||||
| DOM | DOM 创建/操作/遍历，事件冒泡/捕获，事件委托 |
|
| DOM | DOM 创建/操作/遍历、事件冒泡/捕获、事件委托 |
|
||||||
| 运行时 API | `fetch()`，存储（`localStorage`、`sessionStorage`），定时器（`setTimeout()`、`setInterval()`） |
|
| 运行时 API | `fetch()`、存储（`localStorage`、`sessionStorage`）、计时器（`setTimeout()`、`setInterval()`） |
|
||||||
|
|
||||||
## 提示
|
## 提示
|
||||||
|
|
||||||
有许多要涵盖的概念，可能会让您感到非常压抑。 好消息是，深入学习这些概念将使您成为一名更好的前端工程师，无论您是否正在积极面试。
|
有很多概念需要涵盖，这可能会让人感到不知所措。好的一点是，无论你是否积极面试，很好地学习这些概念都会让你成为一个更好的前端工程师。
|
||||||
|
|
||||||
我们不建议记忆测验式问题的答案。 最好真正理解每个问题的解决方案，并在项目中使用它们获得一些实际经验，因为通常通过实践学习更容易。
|
我们不建议死记硬背问答题的答案。最好真正理解每个问题的解决方案，并通过在项目中应用它们来获得一些实际经验，因为通过实践通常更容易学习。
|
||||||
|
|
||||||
## 练习题
|
## 练习题
|
||||||
|
|
||||||
GreatFrontEnd 的列表中包含 100 多个常见测验式问题，每个问题都有详细的解决方案。
|
GreatFrontEnd 包含了超过 100 个常见的测验问题，并为每个问题编写了详细的解决方案。
|
||||||
|
|
||||||
- [JavaScript 测验式问题](/questions/javascript-interview-questions/quiz)
|
* [JavaScript 测验问题](/questions/javascript-interview-questions/quiz)
|
||||||
- [HTML 测验式问题](/questions/html-interview-questions/quiz)
|
* [HTML 测验问题](/questions/html-interview-questions/quiz)
|
||||||
- [CSS 测验式问题](/questions/css-interview-questions/quiz)
|
* [CSS 测验问题](/questions/css-interview-questions/quiz)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "caff79e3",
|
||||||
|
"description": "71937ccf",
|
||||||
|
"seo_title": "4bca12c9",
|
||||||
|
"seo_description": "f9fd7900",
|
||||||
|
"social_title": "b464fe3c"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"e7b50714",
|
||||||
|
"71aaa931",
|
||||||
|
"28fff2a1",
|
||||||
|
"f9891e4b",
|
||||||
|
"921ffe3a",
|
||||||
|
"3209d369",
|
||||||
|
"14865fdc",
|
||||||
|
"3693c9a3",
|
||||||
|
"5d55d71d",
|
||||||
|
"b0f3ac1c",
|
||||||
|
"b10e6c10",
|
||||||
|
"d57cb3ea",
|
||||||
|
"545c4b7e",
|
||||||
|
"c9bdd937",
|
||||||
|
"da6f3da",
|
||||||
|
"9ec81ff1",
|
||||||
|
"54923456",
|
||||||
|
"2850e6de",
|
||||||
|
"2452b64a",
|
||||||
|
"c15ef820",
|
||||||
|
"e1456304",
|
||||||
|
"18977538",
|
||||||
|
"f0064fbc",
|
||||||
|
"16ffca7d",
|
||||||
|
"d4270045",
|
||||||
|
"80b38a54",
|
||||||
|
"e3ca65fa",
|
||||||
|
"aa5fe7b8",
|
||||||
|
"9b5019f0",
|
||||||
|
"ea71a21d",
|
||||||
|
"df75b028",
|
||||||
|
"8460721f",
|
||||||
|
"a765aa45",
|
||||||
|
"e556d5a5",
|
||||||
|
"2a5892f",
|
||||||
|
"67a1d4f3",
|
||||||
|
"5a0b90a"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"e7b50714",
|
||||||
|
"71aaa931",
|
||||||
|
"28fff2a1",
|
||||||
|
"f9891e4b",
|
||||||
|
"921ffe3a",
|
||||||
|
"3209d369",
|
||||||
|
"14865fdc",
|
||||||
|
"3693c9a3",
|
||||||
|
"5d55d71d",
|
||||||
|
"b0f3ac1c",
|
||||||
|
"b10e6c10",
|
||||||
|
"d57cb3ea",
|
||||||
|
"545c4b7e",
|
||||||
|
"c9bdd937",
|
||||||
|
"da6f3da",
|
||||||
|
"9ec81ff1",
|
||||||
|
"54923456",
|
||||||
|
"2850e6de",
|
||||||
|
"2452b64a",
|
||||||
|
"c15ef820",
|
||||||
|
"e1456304",
|
||||||
|
"18977538",
|
||||||
|
"f0064fbc",
|
||||||
|
"16ffca7d",
|
||||||
|
"d4270045",
|
||||||
|
"80b38a54",
|
||||||
|
"e3ca65fa",
|
||||||
|
"aa5fe7b8",
|
||||||
|
"9b5019f0",
|
||||||
|
"ea71a21d",
|
||||||
|
"df75b028",
|
||||||
|
"8460721f",
|
||||||
|
"a765aa45",
|
||||||
|
"e556d5a5",
|
||||||
|
"2a5892f",
|
||||||
|
"67a1d4f3",
|
||||||
|
"5a0b90a"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,100 +1,103 @@
|
||||||
---
|
---
|
||||||
title: 前端简历-前端特定写作技巧和示例
|
title: 前端工程师简历终极指南
|
||||||
description: 提高你的前端开发者/网页开发者的简历，以获得面试机会。
|
description: 获取写作技巧、范例和最佳实践，帮助您入围下一份前端工作
|
||||||
|
seo_title: 前端工程师简历指南 | 技巧、示例、策略
|
||||||
|
seo_description: 使用我们的终极指南制作完美的前端工程师简历。获取前端特定技巧、真实示例和策略，帮助您获得前端职位。
|
||||||
|
social_title: 前端工程师简历指南 | 前端面试手册
|
||||||
---
|
---
|
||||||
|
|
||||||
为了申请前端工程师职位的面试，我们必须提交一份通过公司简历筛选过程的简历。 虽然有许多现有的资源可帮助你制作好的软件工程师简历，但很少针对前端工程师。 有关通用软件工程师简历提示，请参考[面试手册](https://www.techinterviewhandbook.org/resume/)。
|
为了获得前端工程师的职位面试机会，我们必须提交一份通过公司简历筛选流程的简历。 现有的资源很多，可以帮助您制作一份优秀的软件工程师简历，但很少有专门针对前端工程师的。 有关一般的软件工程师简历技巧，请参阅 [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/）。
|
||||||
|
|
||||||
在本页上，我们提供了一些前端特定的技巧，以帮助前端工程师改进他们的简历并进入面试阶段。
|
在本页中，我们提供了一些前端特定的技巧，以帮助前端工程师改进他们的简历并进入面试阶段。
|
||||||
|
|
||||||
## 基本要求
|
## 基本要求
|
||||||
|
|
||||||
- 如果您有不到 5 年的经验，则最好不要超过一页，最多不要超过两页。
|
* 如果您的经验少于 5 年，最好保持在一页以内，不超过两页
|
||||||
- 使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便应聘者跟踪系统（ATS）可以解析简历。 避免使用设计软件。
|
* 使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便申请人跟踪系统 (ATS) 可以解析简历。 避免使用设计软件
|
||||||
- 提交 PDF 格式。
|
* 以 PDF 格式提交
|
||||||
|
|
||||||
## 格式和美观度
|
## 格式和美学
|
||||||
|
|
||||||
前端工程师经常处理用户界面，并且期望他们有敏锐的设计感。 如果您的简历外观不美观，那么这将给你身为前端工程师的形象带来很不好的影响。
|
前端工程师经常处理用户界面，并且应该对设计有敏锐的意识。 如果您的简历在美学上不令人满意，那么这对您作为前端工程师来说会产生非常糟糕的影响。
|
||||||
|
|
||||||
- 使用单列格式。
|
* 使用单列格式
|
||||||
- 使用大多数操作系统上可用的常见字体，例如 Arial、Calibri 或 Garamond。 避免花俏的字体。
|
* 使用大多数操作系统上可用的常见字体，如 Arial、Calibri 或 Garamond。 避免使用花哨的字体
|
||||||
- 只使用一个或最多两个字体（一个用于标题，另一个用于正文）。
|
* 坚持使用一种或最多两种字体（一种用于标题，另一种用于正文）
|
||||||
- 最小字体大小为 11px。
|
* 最小字号为 11px
|
||||||
|
|
||||||
你的简历不需要过分漂亮和花哨，它只需要看起来整洁和视觉上令人愉悦即可。 如果你有多余的现金，最快创建美观且适合 ATS 的简历的方法是从[FAANG Tech Leads](https://www.faangtechleads.com/)购买简历模板。
|
您的简历不需要超级漂亮和花哨，它只需要看起来整洁且赏心悦目。 如果您有闲钱，创建美观且对 ATS 友好的简历的最快方法是从 [FAANG Tech Leads](https://www.faangtechleads.com/) 购买简历模板。
|
||||||
|
|
||||||
## 工作经验部分
|
## 工作经验部分
|
||||||
|
|
||||||
简历的工作经验部分是最重要的，应占据简历的大部分空间。 此部分应着重强调您对过去或目前雇主的业务目标的贡献，
|
简历的工作经验部分是最重要的，应该占据简历的大部分空间。 在本节中突出您对过去或当前雇主业务目标的贡献非常重要，
|
||||||
|
|
||||||
为了提高简历的 ATS 排名，应在可能的情况下在简历中散布“Front End”。 如果您的正式头衔是“软件工程师”，但您已作为工作的一部分进行了大量的前端开发，请考虑将您的头衔更改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”等，以提高相关性。
|
为了提高简历的 ATS 排名，请在简历中尽可能多地散布“前端”。 如果您的官方头衔是“软件工程师”，但您在工作中做了大量的前端开发，请考虑将您的头衔改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”，以提高相关性。
|
||||||
|
|
||||||
人们常犯的一个错误是没有提供关于他们的经验和成就的足够细节。 为了脱颖而出，重要的是要提供有关您的经验和成果的规模、复杂性和影响的足够信息。
|
人们常犯的错误是没有提供足够多的关于他们的经验和成就的细节。 为了脱颖而出，提供关于您的经验和成就的**规模、复杂性和影响**的足够信息非常重要。
|
||||||
|
|
||||||
- **差 👎**：“使用 HTML、CSS 和 JavaScript 构建了一个网站”。
|
* **错误 👎**：“使用 HTML、CSS 和 JavaScript 构建了一个网站”
|
||||||
- **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百种商品，将商品添加到购物车并使用 PayPal 结账。 该网站每月有 20k 的活跃用戶，加载速度低于 2 秒，Lighthouse 得分为 98。 使用的技术：Next.js、React、GraphQL、CSS 模块”。
|
* **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百个商品，添加到他们的购物车并通过 PayPal 结账。 该网站有 20k MAU，加载时间不到 2 秒，Lighthouse 评分为 98。 使用的技术：Next.js、React、GraphQL、CSS 模块”
|
||||||
|
|
||||||
以下是一个前端相关的技术成就列表，适合提到：
|
以下是一个适合提及的与前端相关的技术成就的非详尽列表：
|
||||||
|
|
||||||
- **产品工作**：详细说明产品内部构建的功能。
|
* **产品工作**：详细说明在产品中构建的功能
|
||||||
- **性能**：提供的性能改进，以及它们所带来的百分比收益。 例如， 页面加载大小、页面加载时间、Lighthouse 得分改进等。
|
* **性能**：进行的性能改进以及由此带来的百分比增益。例如，页面加载大小、页面加载时间、Lighthouse 分数改进等。
|
||||||
- **测试**：编写测试的数量，它们覆盖了多少重要流程，测试覆盖率的百分比增加。
|
* **测试**：编写的测试数量、它们涵盖了多少关键流程、测试覆盖率的 % 增加
|
||||||
- **SEO**：SEO 错误/警告的降低占百分比或是具体数字。 如果公司使用 SEO 工具如 Ahrefs 和 Semrush，则可以轻松获得此度量标准。
|
* **SEO**：SEO 错误/警告的 % 或数值减少。如果公司使用 SEO 工具（如 Ahrefs 和 Semrush），则此指标很容易获得
|
||||||
- **可访问性(a11y)**：修复的 a11y 错误数量，改进了符合 WCAG AA/AAA 级标准的流程数目，以及增加的 a11y 组件数目。
|
* **可访问性 (a11y)**：修复的 a11y 错误数量、改进以满足 WCAG AA/AAA 级一致性的流程数量、a11y 改进的组件数量
|
||||||
- **工具**：现代化技术在代码库中的现代化，例如将 jQuery 代码库迁移到 React、通过引入 TypeScript 提高类型安全性等。 要么描述产品，要么提到代码行数/工程师数量，以更好地理解规模和复杂性。
|
* **工具**：代码库中使用的技术现代化，例如将 jQuery 代码库迁移到 React，通过引入 TypeScript 提高类型安全性。描述产品或提及代码行数/工程师的大概数量，以更好地了解规模和复杂性
|
||||||
|
|
||||||
## 技能部分
|
## 技能部分
|
||||||
|
|
||||||
“技能”部分是你拥有的语言和技术的列表，可作为当 ATS/招聘人员/招聘经理阅读此部分时的快速清单/摘要。 至少，应该为“语言”和“技术”类别有两个列表项：
|
"技能"部分是您拥有的语言和技术的列表，当 ATS/招聘人员/招聘经理阅读本节时，它充当快速清单/摘要。 至少，您应该为“语言”和“技术”类别提供两个列表项：
|
||||||
|
|
||||||
由于构建前端应用程序需要多种不同的技术，您可能会发现您有许多要添加到简历技能部分中的技术。 但不要添加每个技术！ 这会削弱实际重要技能的权重。 优先考虑以下语言/技术：
|
由于构建前端应用程序需要大量不同的技术，您可能会发现您需要在简历的技能部分添加许多技术。但是，不要添加每一种技术！这将稀释真正重要的技能的权重。优先考虑以下语言/技术：
|
||||||
|
|
||||||
### 1. 在工作列表中出现
|
### 1. 出现在职位列表中
|
||||||
|
|
||||||
如果某项技能出现在工作列表中并且你有使用它的经验，一定要将其添加进去。
|
如果技能出现在职位列表中，并且您有相关经验，那么您绝对应该添加它。
|
||||||
|
|
||||||
### 2. 仅列出影响架构的关键技术
|
### 2. 仅列出影响架构的关键技术
|
||||||
|
|
||||||
像 React 这样的库对其他相关技术选择产生了很大影响，而像 Underscore/Lodash 这样的库与架构无关，可以轻易地被替换掉。 优先考虑前者，省略小型/实用库，这些库易于替换。
|
像 React 这样的库极大地影响了其他伴随的技术选择，而像 Underscore/Lodash 这样的库是与架构无关的，可以轻松替换。优先考虑前者，并省略易于替换的小型/实用程序库。
|
||||||
|
|
||||||
### 3. 广为人知或迅速走红
|
### 3. 广为人知或迅速普及
|
||||||
|
|
||||||
这表明你跟上了现代前端生态系统的发展。 公司也可能正在考虑迁移到该技术，如果您在该技术方面有经验，这是一个加分项。
|
这表明您紧跟现代前端生态系统。该公司可能也在考虑转向该技术，如果您在这方面有经验，那将是一个加分项。
|
||||||
|
|
||||||
### 4. 展示您的广度
|
### 4. 展示您的广度
|
||||||
|
|
||||||
列出所有的 React、Angular 和 Vue（所有前端视图框架）是过度的，即使您确实熟悉它们中的所有内容。 很少有工作列表会列出多个用于同一目的的技术（如果他们这样做，这是一个红旗信号）。 添加过多的技术（特别是同一类别的技术）会使读者更难以了解您的技能。
|
即使您确实熟悉 React、Angular 和 Vue（所有前端视图框架），列出所有这些也是多余的。很少有职位列表会列出多个用于相同目的的技术（如果这样做，则是一个危险信号）。添加太多技术（尤其是同一类别中的技术）会使读者更难了解您的技能。
|
||||||
|
|
||||||
尝试列出至少一个，最多两个属于以下类别的技术。 不能全部都适用于您，因此只包含相关的内容。 下面是一些热门的例子。
|
尝试列出**至少一个且最多两个**属于以下类别的技术。并非所有类别都适用于您，因此仅包括相关的类别。下面显示了流行的示例。
|
||||||
|
|
||||||
- **View**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
|
* **JavaScript 库**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
|
||||||
- **Rendering Frameworks**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
|
* **元框架**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
|
||||||
- **State Management**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
|
* **状态管理**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
|
||||||
- **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
|
* **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
|
||||||
- **CSS 框架**：[Bootstrap](https://getbootstrap.com/)、[Material UI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/)
|
* **CSS 框架**：[Bootstrap](https://getbootstrap.com/)、[MUI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/)
|
||||||
- **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html)
|
* **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html)
|
||||||
- **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/)
|
* **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/)
|
||||||
- **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/)
|
* **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/)
|
||||||
- **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/)
|
* **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/)
|
||||||
- **编译工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/)
|
* **构建工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/)
|
||||||
- **软件包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)
|
* **包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)
|
||||||
|
|
||||||
### 示例
|
### 示例
|
||||||
|
|
||||||
这是我们的简历的“技能”部分的示例：
|
这应该就是我们简历上的“技能”部分的样子：
|
||||||
|
|
||||||
- **语言**：HTML、CSS、JavaScript、TypeScript
|
* **语言**：HTML、CSS、JavaScript、TypeScript
|
||||||
- **技术**：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack
|
* **技术**：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack
|
||||||
|
|
||||||
这恰好是用于构建 GreatFrontEnd 的技术堆栈。 您的“语言”项目下应该有 HTML、CSS、JavaScript，否则可能存在大问题。
|
这正是用于构建 GreatFrontEnd 的技术栈。您绝对应该在“语言”项下列出 HTML、CSS、JavaScript，否则就会出现严重问题。
|
||||||
|
|
||||||
## 项目部分
|
## 项目部分
|
||||||
|
|
||||||
前端领域随着新的 JavaScript 框架和 CSS 方法的不断出现而不断发展。 在简历中列出项目表明您热爱这个领域，为了跟上最新的前端技术而付出了额外的努力，尤其是如果它们没有在你的工作中使用，这是一个巨大的正面信号。 列出每个项目所使用的技术，特别是如果它们是公司使用的现代技术。 这有助于提高简历的 ATS 排名并留下更深的印象。 在可能的情况下，将代码放在 GitHub 上，并梳理 README 以包括产品的截图。 将项目代码和现场网站的链接添加到简历中。
|
前端领域发展迅速，每年都会出现新的 JavaScript 框架和 CSS 方法。在您的简历上拥有项目表明您对该领域充满热情，并付出了额外的努力来跟上最新的前端技术，尤其是在您的工作中没有使用这些技术的情况下，这是一个巨大的积极信号。列出每个项目使用的技术，尤其是如果它们是公司使用的现代技术。它有助于 ATS 排名，并在读者心中留下更深刻的印象。如果可能，将代码放在 GitHub 上，并使用产品的屏幕截图完善 README。将项目的代码和实时网站的链接添加到您的简历中。
|
||||||
|
|
||||||
开源贡献，尤其是对复杂代码库的非微小更改，被视为技术能力的标志。 如果您已经创建或是开源项目的维护者，则更好。
|
开源贡献，尤其是对复杂代码库的非平凡更改，被视为技术能力的标志。如果您创建了开源项目或维护了开源项目，那就更好了。
|
||||||
|
|
||||||
## 总结
|
## 摘要
|
||||||
|
|
||||||
虽然[面试手册的通用软件工程师简历提示](https://www.techinterviewhandbook.org/resume/)对前端工程师来说基本上已经足够了，但上述技巧将帮助您提升前端工程师简历并将其提到更高的层次。
|
虽然 [Tech Interview Handbook 的一般软件工程师简历提示](https://www.techinterviewhandbook.org/resume/) 对于前端工程师来说已经足够了，但上述提示将帮助您提升前端工程师的简历，并使其更上一层楼。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "da055036",
|
||||||
|
"description": "45cb9278",
|
||||||
|
"seo_title": "52bec2d7",
|
||||||
|
"seo_description": "f4fc8108",
|
||||||
|
"social_title": "960a6e84"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"22c0a066",
|
||||||
|
"65c58cf6",
|
||||||
|
"39b2993c",
|
||||||
|
"342c519e",
|
||||||
|
"3276416d",
|
||||||
|
"c6f12aa3",
|
||||||
|
"9de0f3fc"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"22c0a066",
|
||||||
|
"65c58cf6",
|
||||||
|
"39b2993c",
|
||||||
|
"342c519e",
|
||||||
|
"3276416d",
|
||||||
|
"c6f12aa3",
|
||||||
|
"9de0f3fc"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,21 +1,25 @@
|
||||||
---
|
---
|
||||||
title: 前端系统设计问题——如何准备
|
title: 前端系统设计面试 - 快速入门
|
||||||
description: 准备前端/网络开发人员面试中的系统设计问题——最佳实践和重要的练习问题。
|
description: 快速概览您可以为前端系统设计面试利用的所有最佳资源
|
||||||
|
seo_title: 前端系统设计面试 | 如何准备
|
||||||
|
seo_description: 准备前端系统设计面试的快速入门指南 — 期望什么、使用什么资源以及在哪里练习
|
||||||
|
social_title: 前端系统设计 - 快速入门 | GreatFrontEnd
|
||||||
---
|
---
|
||||||
|
|
||||||
系统设计面试可以采用多种形式，涵盖整个开发堆栈。 GreatFrontEnd 专注于**前端系统设计**，即客户端应用程序和 UI 组件的系统设计和架构，而不是后端分布式系统。
|
系统设计面试可以有多种形式，涵盖整个开发堆栈。GreatFrontEnd 专注于**前端系统设计**，即客户端应用程序和 UI 组件的系统设计和架构，而不是后端分布式系统。
|
||||||
|
|
||||||
我们编写了一个全面的[前端系统设计指南](/front-end-system-design-playbook)，您绝对应该查看。
|
我们编写了一份全面的[前端系统设计指南](/front-end-system-design-playbook)，您绝对应该查看一下。
|
||||||
|
|
||||||
## 遵循最佳实践设计您的系统
|
## 使用最佳实践设计您的系统
|
||||||
|
|
||||||
无论您被要求设计应用程序、游戏还是 UI 组件，面试中进行系统设计时，都需要特别注意一些事项。 结合我们的[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试游戏。
|
在进行系统设计面试时，无论您是被要求设计应用程序、游戏还是 UI 组件，都有一些需要特别注意的事项。 结合我们[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试水平。
|
||||||
|
|
||||||
## 练习问题
|
## 练习题
|
||||||
|
|
||||||
GreatFrontEnd 包括许多前端系统设计案例研究和真实世界的例子，包括：
|
GreatFrontEnd 包含许多前端系统设计案例研究和真实世界的例子，包括但不限于：
|
||||||
|
|
||||||
- [新闻动态（例如 Facebook）](/questions/system-design/news-feed-facebook)
|
* [新闻提要（例如 Facebook）](/questions/system-design/news-feed-facebook)
|
||||||
- [自动完成组件](/questions/system-design/autocomplete)
|
* [自动完成组件](/questions/system-design/autocomplete)
|
||||||
- [电子商务网站（例如亚马逊）](/questions/system-design/e-commerce-amazon)
|
* [电子商务网站（例如亚马逊）](/questions/system-design/e-commerce-amazon)
|
||||||
- [图片轮播](/questions/system-design/image-carousel)
|
* [图片轮播](/questions/system-design/image-carousel)
|
||||||
|
* [谷歌文档](/questions/system-design/collaborative-editor-google-docs)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,190 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "f92069d3",
|
||||||
|
"description": "4ddddb3c",
|
||||||
|
"seo_title": "55313689",
|
||||||
|
"seo_description": "4ddddb3c",
|
||||||
|
"social_title": "74fd2012"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"15ed444f",
|
||||||
|
"b22dc8f8",
|
||||||
|
"818c7548",
|
||||||
|
"862b5f64",
|
||||||
|
"96652970",
|
||||||
|
"f834d037",
|
||||||
|
"bead125a",
|
||||||
|
"fa8e2a5",
|
||||||
|
"df3835a1",
|
||||||
|
"3cf8e386",
|
||||||
|
"dd762458",
|
||||||
|
"c2d097fd",
|
||||||
|
"3425eab9",
|
||||||
|
"d034a429",
|
||||||
|
"da6fa921",
|
||||||
|
"ae0981ad",
|
||||||
|
"6afa4b35",
|
||||||
|
"2595cf65",
|
||||||
|
"b52322e4",
|
||||||
|
"7792cb4a",
|
||||||
|
"c3a490bf",
|
||||||
|
"cd3a560f",
|
||||||
|
"24a7c100",
|
||||||
|
"e02e0ad7",
|
||||||
|
"5c43eca3",
|
||||||
|
"a0f7c7fd",
|
||||||
|
"1b647ff9",
|
||||||
|
"e189a7b9",
|
||||||
|
"6eb9ca7e",
|
||||||
|
"9ad97723",
|
||||||
|
"8cf8b49e",
|
||||||
|
"5e098ec0",
|
||||||
|
"eed4a20e",
|
||||||
|
"724ac05a",
|
||||||
|
"d09c29f1",
|
||||||
|
"614f6160",
|
||||||
|
"25258abb",
|
||||||
|
"d56560f3",
|
||||||
|
"7fa508e9",
|
||||||
|
"d61db084",
|
||||||
|
"4a2167db",
|
||||||
|
"6eb9ca7e",
|
||||||
|
"41816ef6",
|
||||||
|
"ec527804",
|
||||||
|
"504b42fe",
|
||||||
|
"9cfbaa1d",
|
||||||
|
"5893ceca",
|
||||||
|
"7f924670",
|
||||||
|
"fa8708e",
|
||||||
|
"9fda273d",
|
||||||
|
"be0161de",
|
||||||
|
"c35725d4",
|
||||||
|
"c726a5d4",
|
||||||
|
"8c4385be",
|
||||||
|
"8015d76d",
|
||||||
|
"1565fce8",
|
||||||
|
"924a989e",
|
||||||
|
"157935c7",
|
||||||
|
"a606d5a9",
|
||||||
|
"8595fa06",
|
||||||
|
"9080495c",
|
||||||
|
"7bf82812",
|
||||||
|
"a96689e0",
|
||||||
|
"4af2660",
|
||||||
|
"c1bec761",
|
||||||
|
"c00de318",
|
||||||
|
"b50e54c3",
|
||||||
|
"47ee560d",
|
||||||
|
"f79f164d",
|
||||||
|
"e22bf76a",
|
||||||
|
"916a4cb3",
|
||||||
|
"9e330a88",
|
||||||
|
"861de668",
|
||||||
|
"627afd1c",
|
||||||
|
"5d2f9585",
|
||||||
|
"960705b8",
|
||||||
|
"d7c3dc53",
|
||||||
|
"8f5fb6c2",
|
||||||
|
"9790b325",
|
||||||
|
"42bfcb92",
|
||||||
|
"a1f4e939",
|
||||||
|
"fe3b5d25",
|
||||||
|
"2d855ced",
|
||||||
|
"d49f469d",
|
||||||
|
"3f23861b"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"15ed444f",
|
||||||
|
"b22dc8f8",
|
||||||
|
"818c7548",
|
||||||
|
"862b5f64",
|
||||||
|
"96652970",
|
||||||
|
"f834d037",
|
||||||
|
"bead125a",
|
||||||
|
"fa8e2a5",
|
||||||
|
"df3835a1",
|
||||||
|
"3cf8e386",
|
||||||
|
"dd762458",
|
||||||
|
"c2d097fd",
|
||||||
|
"3425eab9",
|
||||||
|
"d034a429",
|
||||||
|
"da6fa921",
|
||||||
|
"ae0981ad",
|
||||||
|
"6afa4b35",
|
||||||
|
"2595cf65",
|
||||||
|
"b52322e4",
|
||||||
|
"7792cb4a",
|
||||||
|
"c3a490bf",
|
||||||
|
"cd3a560f",
|
||||||
|
"24a7c100",
|
||||||
|
"e02e0ad7",
|
||||||
|
"5c43eca3",
|
||||||
|
"a0f7c7fd",
|
||||||
|
"1b647ff9",
|
||||||
|
"e189a7b9",
|
||||||
|
"6eb9ca7e",
|
||||||
|
"9ad97723",
|
||||||
|
"8cf8b49e",
|
||||||
|
"5e098ec0",
|
||||||
|
"eed4a20e",
|
||||||
|
"724ac05a",
|
||||||
|
"d09c29f1",
|
||||||
|
"614f6160",
|
||||||
|
"25258abb",
|
||||||
|
"d56560f3",
|
||||||
|
"7fa508e9",
|
||||||
|
"d61db084",
|
||||||
|
"4a2167db",
|
||||||
|
"6eb9ca7e",
|
||||||
|
"41816ef6",
|
||||||
|
"ec527804",
|
||||||
|
"504b42fe",
|
||||||
|
"9cfbaa1d",
|
||||||
|
"5893ceca",
|
||||||
|
"7f924670",
|
||||||
|
"fa8708e",
|
||||||
|
"9fda273d",
|
||||||
|
"be0161de",
|
||||||
|
"c35725d4",
|
||||||
|
"c726a5d4",
|
||||||
|
"8c4385be",
|
||||||
|
"8015d76d",
|
||||||
|
"1565fce8",
|
||||||
|
"924a989e",
|
||||||
|
"157935c7",
|
||||||
|
"a606d5a9",
|
||||||
|
"8595fa06",
|
||||||
|
"9080495c",
|
||||||
|
"7bf82812",
|
||||||
|
"a96689e0",
|
||||||
|
"4af2660",
|
||||||
|
"c1bec761",
|
||||||
|
"c00de318",
|
||||||
|
"b50e54c3",
|
||||||
|
"47ee560d",
|
||||||
|
"f79f164d",
|
||||||
|
"e22bf76a",
|
||||||
|
"916a4cb3",
|
||||||
|
"9e330a88",
|
||||||
|
"861de668",
|
||||||
|
"627afd1c",
|
||||||
|
"5d2f9585",
|
||||||
|
"960705b8",
|
||||||
|
"d7c3dc53",
|
||||||
|
"8f5fb6c2",
|
||||||
|
"9790b325",
|
||||||
|
"42bfcb92",
|
||||||
|
"a1f4e939",
|
||||||
|
"fe3b5d25",
|
||||||
|
"2d855ced",
|
||||||
|
"d49f469d",
|
||||||
|
"3f23861b"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,22 +1,27 @@
|
||||||
---
|
---
|
||||||
title: 用户界面组件API设计原则
|
title: UI 组件的 API 设计原则
|
||||||
description: 设计开发者界面组件API的最佳实践，对UI组件编码和系统设计面试很有用
|
description: 设计开发者界面组件 API 的最佳实践，适用于 UI 组件编码和系统设计面试
|
||||||
|
seo_title: API 设计原则 | 前端面试手册
|
||||||
|
seo_description: 设计开发者界面组件 API 的最佳实践，适用于 UI 组件编码和系统设计面试
|
||||||
|
social_title: UI 组件的 API 设计原则 | 前端面试手册
|
||||||
---
|
---
|
||||||
|
|
||||||
像[Bootstrap](https://getbootstrap.com/)和[Material UI](https://mui.com/)这样的用户界面组件库，通过提供常用的组件，如按钮、标签、模版等，帮助开发者更快地构建用户界面，从而使开发者在开始一个新项目时不必重新发明轮子，从头构建这些组件。
|
像 [Bootstrap](https://getbootstrap.com/) 和 [Material UI](https://mui.com/) 这样的用户界面组件库通过提供常用组件（如按钮、选项卡、模态框等）来帮助开发人员更快地构建 UI，这样开发人员就不必在开始新项目时从头开始构建这些组件，从而不必重复造轮子。
|
||||||
|
|
||||||
通常在前端面试中，你会被要求建立 UI 组件并设计一个 API 来初始化它们。 设计好的组件 API 是前端工程师的面包和黄油。 本页涵盖了设计 UI 组件 API 的一些顶级技巧和最佳实践。 其中一些提示可能是针对框架的，但也可以推广到其他基于组件的 UI 框架。
|
在前端面试中，经常会被要求构建 UI 组件并设计一个 API 来初始化它们。设计好的组件 API 是前端工程师的基本功。本页介绍了一些设计 UI 组件 API 的顶级技巧和最佳实践。其中一些技巧可能是特定于框架的，但可以推广到其他基于组件的 UI 框架。
|
||||||
|
|
||||||
## 初始化
|
## 初始化
|
||||||
|
|
||||||
|
有多种方法可以初始化 UI 组件：
|
||||||
|
|
||||||
### jQuery 风格
|
### jQuery 风格
|
||||||
|
|
||||||
在[React](https://reactjs.org/)、[Angular](https://angular.io/)和[Vue](https://vuejs.org/)等现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和[jQuery UI](https://jqueryui.com/)）是构建 UI 的最流行方式。jQuery UI 推广了通过涉及两个参数的 "构造函数 "初始化 UI 组件的想法：
|
在像 [React](https://reactjs.org/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这样的现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和 [jQuery UI](https://jqueryui.com/)）是构建 UI 最流行的方式。 jQuery UI 推广了通过“构造函数”初始化 UI 组件的想法，其中涉及两个参数：
|
||||||
|
|
||||||
1. **根元素**：一个根 DOM 元素，用来渲染内容。
|
1. **根元素**：用于渲染内容的根 DOM 元素
|
||||||
2. **定制选项**：可选的、额外的、自定义的选项，通常以普通 JavaScript 对象的形式出现。
|
2. **自定义选项**：可选的、额外的、自定义选项，通常以纯 JavaScript 对象的形式
|
||||||
|
|
||||||
使用 jQuery UI，人们可以用一行代码将一个 DOM 元素变成一个[slider](https://api.jqueryui.com/slider/)（以及许多其他 UI 组件）：
|
使用 jQuery UI，可以用一行代码将 DOM 元素变成 [滑块](https://api.jqueryui.com/slider/)（以及许多其他 UI 组件）：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div id="gfe-slider"></div>
|
<div id="gfe-slider"></div>
|
||||||
|
|
@ -25,9 +30,9 @@ description: 设计开发者界面组件API的最佳实践，对UI组件编码
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
**jQuery refresher**：jQuery UI 的`slider()`方法（构造函数）接收了一个 JavaScript 对象，作为定制选项。 执行`$('#slider')`选择`<div id="slider">`元素并返回一个 jQuery 对象，其中包含方便的方法来对该元素 "做一些事情"，如`addClass`，`removeClass`等和其他 DOM 操作方法。 在 jQuery 方法中，选定的元素可以通过`this`关键字访问。 jQuery 的 API 是围绕这个 "选择一个元素并对其进行处理 "的方法而建立的，因此`slider()`方法不需要一个根 DOM 元素的参数。
|
**jQuery 补充**：jQuery UI 的 `slider()` 方法（构造函数）接受一个 JavaScript 对象作为自定义选项。执行 `$('#slider')` 会选择 `<div id="slider">` 元素，并返回一个 jQuery 对象，该对象包含用于“对元素执行某些操作”的便捷方法，例如 `addClass`、`removeClass` 等以及其他 DOM 操作方法。在 jQuery 方法中，可以通过 `this` 关键字访问所选元素。 jQuery API 围绕这种“选择一个元素并对其执行某些操作”的方法构建，因此 `slider()` 方法不需要根 DOM 元素的参数。
|
||||||
|
|
||||||
slider 可以通过传入一个普通的 JavaScript 对象的选项来进行定制：
|
可以通过传入一个纯 JavaScript 选项对象来定制滑块：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div id="gfe-slider"></div>
|
<div id="gfe-slider"></div>
|
||||||
|
|
@ -36,56 +41,60 @@ slider 可以通过传入一个普通的 JavaScript 对象的选项来进行定
|
||||||
animate: true,
|
animate: true,
|
||||||
max: 50,
|
max: 50,
|
||||||
min: 10,
|
min: 10,
|
||||||
// See other options here: https://api.jqueryui.com/slider/
|
// 在这里查看其他选项：https://api.jqueryui.com/slider/
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Vanilla JavaScript 风格
|
### Vanilla JavaScript 风格
|
||||||
|
|
||||||
在初始化组件方面没有 vanilla JavaScript 风格，因为 vanilla JavaScript 不是一个标准或框架。 但如果你读够了 GreatFrontEnd 对我们的 vanilla JavaScript [UI 编码问题](/questions/formats/ui-coding)的解决方案，你会发现我们推荐的 API 与 jQuery 的类似，构造函数接收一个根元素和选项：
|
由于 vanilla JavaScript 不是标准或框架，因此没有用于初始化组件的 vanilla JavaScript 风格。但是，如果您阅读了足够多的 GreatFrontEnd 的 vanilla JavaScript [UI 编码问题](/questions/formats/ui-coding) 的解决方案，您会发现我们推荐的 API 与 jQuery 的 API 类似，构造函数接受一个根元素和选项：
|
||||||
|
|
||||||
```js
|
```js
|
||||||
function slider(rootEl, options) {
|
function slider(rootEl, options) {
|
||||||
// Do something with rootEl and options.
|
// 对 rootEl 和 options 做一些事情。
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### React
|
### React（或类似的基于组件的库）
|
||||||
|
|
||||||
React 迫使你把 UI 写成包含其自身逻辑和外观的组件。 React 组件是返回标记的 JavaScript 函数（关于如何呈现自身的描述）。 React 组件可以接受 "props"，它本质上是对组件选项的定制。
|
React 迫使你将 UI 编写为组件，其中包含逻辑和结构。React 组件是返回标记的 JavaScript 函数，是对其自身如何呈现的描述。
|
||||||
|
|
||||||
|
React 组件可以接收 `props`，它们本质上是组件的自定义选项。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
function Slider({ min, max }) {
|
function Slider({ min, max }) {
|
||||||
// 使用 props 来呈现自定义组件。
|
// 使用 props 渲染自定义组件。
|
||||||
return <div>...</div>;
|
return <div>...</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
<Slider max={50} min={10} />;
|
<Slider max={50} min={10} />;
|
||||||
```
|
```
|
||||||
|
|
||||||
组件不会在 root 元素中。 为了将该元素渲染到页面中，需要使用一个单独的 API。
|
组件不接受根元素。要将元素渲染到页面中，需要使用单独的 API。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { createRoot } from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
import Slider from './Slider';
|
import Slider from './Slider';
|
||||||
|
|
||||||
const domNode = document.getElementById('#gfe-slider');
|
const domNode = document.getElementById('#gfe-slider');
|
||||||
// React 将管理此元素内的 DOM。
|
// React 将管理此元素中的 DOM。
|
||||||
const root = createRoot(domNode);
|
const root = createRoot(domNode);
|
||||||
// 在元素内显示 Slider 组件。
|
// 在元素中显示 Slider 组件。
|
||||||
root.render(<Slider max={50} min={10} />);
|
root.render(<Slider max={50} min={10} />);
|
||||||
```
|
```
|
||||||
|
|
||||||
如果整个页面是 React 应用，你通常不需要自己调用`createRoot()`，因为根/页级组件只有一个`createRoot`调用。
|
如果整个页面是一个 React 应用程序，你通常不需要自己调用 `createRoot()`，因为在根/页面级别只有一个 `createRoot()` 调用。
|
||||||
|
|
||||||
## 定制外观
|
## 自定义外观
|
||||||
|
|
||||||
尽管 UI 库中的 UI 组件提供了默认的样式，但开发者通常希望用他们公司/产品的品牌和主题颜色来定制它们。 因此，所有的用户界面组件将允许通过一些方法来定制外观：
|
即使 UI 库中的 UI 组件提供默认样式，开发人员通常也希望使用其公司/产品的品牌和主题颜色对其进行自定义。
|
||||||
|
|
||||||
|
因此，大多数 UI 组件（尤其是那些构建为第三方库的组件）将允许通过以下几种方法自定义外观：
|
||||||
|
|
||||||
### 类注入
|
### 类注入
|
||||||
|
|
||||||
这里的想法很简单，组件接受一个 prop/option，允许开发者提供他们自己的类，这些类被添加到实际的 DOM 元素中。 这种方法不是很稳健，因为如果组件也通过类来添加自己的样式，那么在组件的类和开发者提供的类中可能会有冲突的属性。
|
这里的想法很简单，组件接受一个 prop/选项，允许开发人员提供他们自己的类，并且这些类被添加到实际的 DOM 元素中。这种方法不是很健壮，因为如果组件也通过类添加自己的样式，则组件的类和开发人员提供的类中可能存在冲突的属性。
|
||||||
|
|
||||||
#### React
|
#### React
|
||||||
|
|
||||||
|
|
@ -104,22 +113,22 @@ function Slider({ className, value }) {
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* UI library default stylesheet */
|
/* UI 库默认样式表 */
|
||||||
.gfe-slider {
|
.gfe-slider {
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* Developer's custom stylesheet */
|
/* 开发人员的自定义样式表 */
|
||||||
.my-custom-slider {
|
.my-custom-slider {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
通过类注入，开发者可以将组件的文本`color`改为`red`。
|
通过类注入，开发人员可以将组件的文本 `color` 更改为 `red`。
|
||||||
|
|
||||||
如果组件内有许多 DOM 元素，一个`className` prop 是不够的，你也可以为不同元素的`className` 设置多个不同名称的 prop：
|
如果组件中有许多要定位的 DOM 元素，并且一个 `className` prop 不够用，你还可以为不同元素的 `className` 拥有多个不同命名的 prop：
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { useId } from 'react';
|
import { useId } from 'react';
|
||||||
|
|
@ -149,13 +158,13 @@ function Slider({ label, value, className, classNameLabel, classNameTrack }) {
|
||||||
|
|
||||||
```js
|
```js
|
||||||
$('#gfe-slider').slider({
|
$('#gfe-slider').slider({
|
||||||
// 在现实中，jQuery UI 在 'class' 字段中使用
|
// 实际上，jQuery UI 接受一个 `classes` 字段
|
||||||
// 因为有多个元素。
|
// 因为有多个元素。
|
||||||
class: 'my-custom-slider',
|
class: 'my-custom-slider',
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
在现实中，所有 jQuery UI 的组件初始化器都接受`classes`字段，以允许添加额外的类到单个元素。 下面的例子取自[jQuery UI Slider](https://api.jqueryui.com/slider/#option-classes)：
|
实际上，所有 jQuery UI 的组件初始化器都接受 `classes` 字段，以允许向各个元素添加额外的类。以下示例取自 [jQuery UI Slider](https://api.jqueryui.com/slider/#option-classes)：
|
||||||
|
|
||||||
```js
|
```js
|
||||||
$('#gfe-slider').slider({
|
$('#gfe-slider').slider({
|
||||||
|
|
@ -167,9 +176,9 @@ $('#gfe-slider').slider({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 非确定性风格
|
#### 缺点：非确定性样式
|
||||||
|
|
||||||
类注入有一个不明显的缺点--最终的视觉结果是不确定的，可能不是预期的那样。 以下面的代码为例：
|
类注入有一个不明显的缺点——最终的视觉结果是不确定的，可能不是预期的结果。以下面的代码为例：
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
|
|
@ -186,7 +195,7 @@ function Slider({ className, value }) {
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* UI library 默认样式表 */
|
/* UI 库默认样式表 */
|
||||||
.gfe-slider {
|
.gfe-slider {
|
||||||
height: 12px;
|
height: 12px;
|
||||||
color: black;
|
color: black;
|
||||||
|
|
@ -194,30 +203,32 @@ function Slider({ className, value }) {
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* 开发者的自定义样式表 */
|
/* 开发人员的自定义样式表 */
|
||||||
.my-custom-slider {
|
.my-custom-slider {
|
||||||
color: red; /* .gfe-slider 也定义了一个颜色的值。*/
|
color: red; /* .gfe-slider 也定义了 color 的值。 */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
在上面的例子中，`.gfe-slider`和`.my-custom-slider`类都指定了`color`，由于这两个选择器具有相同的特殊性，获胜的样式实际上是后来出现在 HTML 页面上的类。 如果样式表的加载顺序没有保证（例如，如果样式表是懒惰地加载的），那么视觉结果将不是确定的。 这时，开发者开始使用`！important`或`.my-custom-slider.my-custom-slider`等黑客手段，让他们的选择器赢得特异性战争，CSS 代码开始变得不可维护。
|
在上面的例子中，`.gfe-slider` 和 `.my-custom-slider` 类都指定了 `color`，并且由于这两个选择器具有相同的特异性，因此获胜的样式实际上是出现在 HTML 页面后面的类。
|
||||||
|
|
||||||
在 jQuery UI 中，如果一个自定义类被添加，现有的默认值不会被使用。 这消除了 "获胜风格 "的模糊性，但用户现在必须重新实现原类中存在的所有必要风格。 这种方法也可以应用于 React 组件，以解决模糊不清的问题。
|
如果样式表的加载顺序无法保证（例如，如果样式表是延迟加载的），则视觉结果将是不确定的。结果是开发人员开始使用 `!important` 或 `.my-custom-slider.my-custom-slider` 等黑客手段来让他们的选择器赢得特异性之战。有了所有这些黑客手段，CSS 代码开始变得难以维护。
|
||||||
|
|
||||||
尽管它可能存在缺陷，但类注入仍然是一个非常受欢迎的选择。
|
在 jQuery UI 中，如果添加了自定义类，则不使用现有的默认值。这消除了“获胜样式”的歧义，但用户现在必须重新实现原始类中存在的所有必要样式。这种方法也可以应用于 React 组件以解决歧义。
|
||||||
|
|
||||||
|
尽管存在缺陷，但类注入仍然是一个非常受欢迎的选项。
|
||||||
|
|
||||||
### CSS 选择器钩子
|
### CSS 选择器钩子
|
||||||
|
|
||||||
从技术上讲，如果开发者阅读组件的源代码，并通过使用相同的类来定义他们的自定义样式，就可以实现定制。 然而，这样做是很危险的，因为依赖组件的内部结构，而且不能保证类名在将来不会改变。
|
从技术上讲，如果开发人员阅读组件的源代码并通过使用相同的类来定义他们的自定义样式，他们可以实现自定义。但是，这样做很危险，因为它依赖于组件的内部结构，并且不能保证类名将来不会改变。
|
||||||
|
|
||||||
如果 UI 库的作者能够将这些类/属性作为他们的 API 的一部分，这就有了这些保证：
|
如果 UI 库作者可以将这些类/属性作为其 API 的一部分，并提供以下保证：
|
||||||
|
|
||||||
1. 选择器列表已发布，供外部参考。
|
1. 选择器列表已发布以供外部参考
|
||||||
2. 已发布的选择器将不会被更改。 如果它们被改变，这将是一个破坏性的变化，需要按照 semver 的要求进行版本升级。
|
2. 现有的已发布选择器将不会更改。如果它们被更改，这将是一个重大更改，并且需要根据 semver 进行版本更新
|
||||||
|
|
||||||
然后，这是一种可接受的做法，开发者可以通过在他们的样式表中使用这些选择器来 "钩住 "它们（针对它们）。
|
那么这是一个可以接受的做法，开发人员可以通过在他们的样式表中使用这些选择器来“钩住”它们（定位它们）。
|
||||||
|
|
||||||
钩住一个组件的选择器的一个例子：
|
一个钩住组件选择器的例子：
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { useId } from 'react';
|
import { useId } from 'react';
|
||||||
|
|
@ -237,18 +248,21 @@ function Slider({ label, value }) {
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* UI library 默认样式表 */
|
/* UI 库默认样式表 */
|
||||||
.gfe-slider {
|
.gfe-slider {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 在这个样式表中没有定义其他的类，gfe-slider-label和gfe-slider-range被添加到组件中，只是为了让开发者获得对底层元素的访问。 */
|
/* 此样式表中未定义其他类，
|
||||||
|
gfe-slider-label 和 gfe-slider-range 被添加
|
||||||
|
到组件中，只是为了让开发人员能够访问
|
||||||
|
底层元素。 */
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* Developer's 默认样式表 */
|
/* 开发者自定义样式表 */
|
||||||
.gfe-slider {
|
.gfe-slider {
|
||||||
font-size: 16px; /* 与默认的.gfe-slider冲突 */
|
font-size: 16px; /* 与默认的 .gfe-slider 冲突 */
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -261,7 +275,7 @@ function Slider({ label, value }) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
这种方法为开发者省去了在组件中传递类的麻烦，因为他们只需要编写 CSS 来定制样式。 [Reach UI](https://reach.tech/styling)是 React 的一个无头 UI 组件库，使用元素选择器。 每个组件在底层 DOM 元素上都有一个`data-reach-*`属性。
|
这种方法使开发人员免于将类传递到组件的麻烦，因为他们只需要编写 CSS 来定制样式。 [Reach UI](https://reach.tech/styling) 是一个用于 React 的无头 UI 组件库，它使用元素选择器。 每个组件在底层 DOM 元素上都有一个 `data-reach-*` 属性。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
[data-reach-menu-item] {
|
[data-reach-menu-item] {
|
||||||
|
|
@ -269,17 +283,17 @@ function Slider({ label, value }) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
然而，这种方法仍然受到 "类注入 "的非确定性风格问题的影响，并且不容易允许按实例进行样式设计。 如果需要每个实例的样式，这种方法可以与类的注入方法相结合。
|
然而，这种方法仍然受到“类注入”带来的不确定性样式问题的影响，并且不容易实现每个实例的样式。 如果需要每个实例的样式，可以将此方法与类注入方法结合使用。
|
||||||
|
|
||||||
### 主题对象
|
### 主题对象
|
||||||
|
|
||||||
该组件不是接收类，而是接收一个用于样式的键/值的对象。 如果只有一个严格的属性子集需要定制，或者你想把样式限制在几个属性上，这就很有用。
|
组件不接收类，而是接收一个用于样式的键/值对象。 如果只有一小部分属性需要自定义，或者您只想将样式限制为少数属性，这将非常有用。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const defaultTheme = { color: 'black', height: 12 };
|
const defaultTheme = { color: 'black', height: 12 };
|
||||||
|
|
||||||
function Slider({ value, label, theme }) {
|
function Slider({ value, label, theme }) {
|
||||||
// Combine with default.
|
// 与默认值合并。
|
||||||
const mergedTheme = { ...defaultTheme, ...theme };
|
const mergedTheme = { ...defaultTheme, ...theme };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -306,19 +320,19 @@ function Slider({ value, label, theme }) {
|
||||||
<Slider theme={{ color: 'red', height: 24 }} {...props} />;
|
<Slider theme={{ color: 'red', height: 24 }} {...props} />;
|
||||||
```
|
```
|
||||||
|
|
||||||
然而，由于没有使用有冲突的样式的类，而且内联样式的特异性比类高，所以没有特异性冲突，内联样式将获胜。 然而，需要支持的选项数量可能真的会迅速增长。 内联样式也存在于每个组件实例的 DOM 中，如果这个组件在一个页面中被渲染了数百/数千次，这可能对性能不利。
|
但是，由于没有使用具有冲突样式的类，并且内联样式的特异性高于类，因此没有特异性冲突，内联样式将胜出。 但是，需要支持的选项数量可能会增长得非常快。 内联样式也存在于每个组件实例的 DOM 中，如果此组件在页面中呈现数百/数千次，这可能会对性能不利。
|
||||||
|
|
||||||
主题对象只是一种将造型限制在某些属性和可选的一组值上的方法，这些值不需要作为内联样式使用，而是可以与其他造型方法相结合。
|
主题对象只是一种将样式限制为某些属性的方法，并且可以选择一组可接受的值，这些值不需要用作内联样式，而是可以与其他样式方法结合使用。
|
||||||
|
|
||||||
### CSS 预处理程序的编译
|
### CSS 预处理器编译
|
||||||
|
|
||||||
UI 库通常用 CSS 预处理器编写，如[Sass](https://sass-lang.com/)和[Less](https://lesscss.org/)。 [Bootstrap](https://getbootstrap.com/)是用 Sass 编写的，他们提供了一种方法来[自定义所使用的 Sass 变量](https://getbootstrap.com/docs/5.3/customize/sass/)，以便开发者可以生成一个自定义的 UI 库样式表。
|
UI 库通常使用 CSS 预处理器编写，例如 [Sass](https://sass-lang.com/) 和 [Less](https://lesscss.org/)。 [Bootstrap](https://getbootstrap.com/) 使用 Sass 编写，它们提供了一种 [自定义 Sass 变量](https://getbootstrap.com/docs/5.3/customize/sass/) 的方法，以便开发人员可以生成自定义 UI 库样式表。
|
||||||
|
|
||||||
这种方法很好，因为它不依赖覆盖 CSS 选择器来实现定制。 此外，产生的 CSS 数量也较少，没有多余的重写样式。 缺点是需要一个编译的步骤。
|
这种方法很棒，因为它不依赖于覆盖 CSS 选择器来实现自定义。 产生的 CSS 数量也更少，并且没有多余的被覆盖样式。 缺点是需要一个编译步骤。
|
||||||
|
|
||||||
### CSS 变量 / 自定义属性
|
### CSS 变量 / 自定义属性
|
||||||
|
|
||||||
[CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)（或更正式地称为 CSS 自定义属性）是由 CSS 作者定义的实体，它包含特定的值以便在整个文档中重复使用。 `var()`函数，如果给定的变量未被设置，它接受回退值。
|
[CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)（或更正式地称为 CSS 自定义属性）是由 CSS 作者定义的实体，其中包含要在整个文档中重复使用的特定值。 `var()` 函数，如果给定的变量未设置，它接受回退值。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
function Slider({ value, label }) {
|
function Slider({ value, label }) {
|
||||||
|
|
@ -332,40 +346,40 @@ function Slider({ value, label }) {
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* UI library default stylesheet */
|
/* UI 库默认样式表 */
|
||||||
.gfe-slider {
|
.gfe-slider {
|
||||||
/* 如果没有设置，则回调为12px。 */
|
/* 如果未设置，则回退为 12px。 */
|
||||||
font-size: var(--gfe-slider-font-size, 12px);
|
font-size: var(--gfe-slider-font-size, 12px);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
/* Developer's custom stylesheet */
|
/* 开发者自定义样式表 */
|
||||||
:root {
|
:root {
|
||||||
--gfe-slider-font-size: 15px;
|
--gfe-slider-font-size: 15px;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
开发者可以通过`:root`选择器为`--gfe-slider-font-size`全局定义一个值，并为`.gfe-slider`类设置字体大小为 15px。 这种方法的好处是它不需要 JavaScript，然而，每个组件的定制将更加麻烦（但仍有可能）。
|
开发人员可以通过 `:root` 选择器全局定义 `--gfe-slider-font-size` 的值，并将 `.gfe-slider` 类的字体大小设置为 15px。 这种方法的好处是不需要 JavaScript，但是，每个组件的自定义会更加麻烦（但仍然是可能的）。
|
||||||
|
|
||||||
### Render Props
|
### Render props
|
||||||
|
|
||||||
在 React 中，render props 是一个组件用来知道要渲染什么的函数 prop。 它对于将行为和表现形式分开是很有用的。 许多行为/无头 UI 库，如[Radix](https://www.radix-ui.com/)、[Headless UI](https://headlessui.com/)和[Reach UI](https://reach.tech/menu-button)大量使用了 render props。
|
在 React 中，render props 是组件用来知道要呈现什么的函数 props。 它对于将行为与表示分开很有用。 许多行为/无头 UI 库，如 [Radix](https://www.radix-ui.com/)、[Headless UI](https://headlessui.com/) 和 [Reach UI](https://reach.tech/menu-button) 大量使用 render props。
|
||||||
|
|
||||||
{/* TODO: Section on manipulation of component after initialization */}
|
{/* TODO: 关于初始化后组件操作的部分 */}
|
||||||
|
|
||||||
## 国际化 (i18n)
|
## 国际化 (i18n)
|
||||||
|
|
||||||
你的用户界面是否适用于多种语言？ 增加对更多语言的支持有多容易？
|
您的 UI 是否支持多种语言？添加对更多语言的支持有多容易？
|
||||||
|
|
||||||
### 避免用某种语言对标签进行硬编码
|
### 避免用某种语言硬编码标签
|
||||||
|
|
||||||
一些 UI 组件内有标签字符串（例如，图片轮播有上一个/下一个按钮的标签）。 如果能让这些标签字符串成为组件 props/options 的一部分，允许自定义这些标签字符串就更好了。
|
一些 UI 组件在其内部有标签字符串（例如，图片轮播有 prev/next 按钮的标签）。最好允许通过将这些标签字符串作为组件 props/options 的一部分来自定义它们。
|
||||||
|
|
||||||
### 从右到左的语言
|
### 从右到左的语言
|
||||||
|
|
||||||
有些语言（如阿拉伯语、希伯来语）是从右向左阅读的，用户界面必须水平翻转。 该组件可以接受一个 "方向 "props/options，并改变元素的渲染顺序。 例如，在 RTL 语言中，上一页和下一页的按钮将分别在右边和左边。
|
一些语言（例如阿拉伯语、希伯来语）是从右向左阅读的，UI 必须水平翻转。组件可以接收一个 `direction` prop/option 并更改元素的渲染顺序。例如，在 RTL 语言中，prev 和 next 按钮将分别位于右侧和左侧。
|
||||||
|
|
||||||
使用[CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)来为你的风格做准备，让你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。
|
使用 [CSS 逻辑属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties) 来使您的样式具有前瞻性，并让您的布局适用于不同的 [书写模式](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Writing_Modes)。
|
||||||
|
|
||||||
{/* TODO: Give examples of how to implement RTL. */}
|
{/* TODO: 给出如何实现 RTL 的例子。 */}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "840f6e65",
|
||||||
|
"description": "e8d1ee29",
|
||||||
|
"seo_title": "2ffcae27",
|
||||||
|
"seo_description": "fe1885a",
|
||||||
|
"social_title": "2ffcae27"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"7f1fffed",
|
||||||
|
"81cc1826",
|
||||||
|
"bdb69cc8",
|
||||||
|
"900e38b",
|
||||||
|
"d3697278",
|
||||||
|
"1c6e60e8",
|
||||||
|
"7ec059be",
|
||||||
|
"e2c69bb6",
|
||||||
|
"1d54ea6d",
|
||||||
|
"8ec8cc8e",
|
||||||
|
"117c7433",
|
||||||
|
"5f4ca2bc",
|
||||||
|
"fda09b00",
|
||||||
|
"1ec3f9b9",
|
||||||
|
"14e70e0f",
|
||||||
|
"5f89ebf6",
|
||||||
|
"4b290d06",
|
||||||
|
"91cda1b7",
|
||||||
|
"3b3e557d",
|
||||||
|
"7ef0c666",
|
||||||
|
"f2c2fd5c",
|
||||||
|
"12b04d09",
|
||||||
|
"2c98cc5a",
|
||||||
|
"969ca9a6",
|
||||||
|
"56a2c656",
|
||||||
|
"3f7c40a",
|
||||||
|
"b9b66c7f",
|
||||||
|
"64619fc4",
|
||||||
|
"2f7a4e16",
|
||||||
|
"241cc128",
|
||||||
|
"463e0551",
|
||||||
|
"3c644c8b",
|
||||||
|
"4db7b5a0",
|
||||||
|
"86784729",
|
||||||
|
"fdc54fc7",
|
||||||
|
"499e5031",
|
||||||
|
"edd76fef",
|
||||||
|
"90c3c142",
|
||||||
|
"2bd9cd4c",
|
||||||
|
"5d246309",
|
||||||
|
"97763a57",
|
||||||
|
"a0bce83c",
|
||||||
|
"8f5fb6c2",
|
||||||
|
"9790b325",
|
||||||
|
"7bacbe4b"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"7f1fffed",
|
||||||
|
"81cc1826",
|
||||||
|
"bdb69cc8",
|
||||||
|
"900e38b",
|
||||||
|
"d3697278",
|
||||||
|
"1c6e60e8",
|
||||||
|
"7ec059be",
|
||||||
|
"e2c69bb6",
|
||||||
|
"1d54ea6d",
|
||||||
|
"8ec8cc8e",
|
||||||
|
"117c7433",
|
||||||
|
"5f4ca2bc",
|
||||||
|
"fda09b00",
|
||||||
|
"1ec3f9b9",
|
||||||
|
"14e70e0f",
|
||||||
|
"5f89ebf6",
|
||||||
|
"4b290d06",
|
||||||
|
"91cda1b7",
|
||||||
|
"3b3e557d",
|
||||||
|
"7ef0c666",
|
||||||
|
"f2c2fd5c",
|
||||||
|
"12b04d09",
|
||||||
|
"2c98cc5a",
|
||||||
|
"969ca9a6",
|
||||||
|
"56a2c656",
|
||||||
|
"3f7c40a",
|
||||||
|
"b9b66c7f",
|
||||||
|
"64619fc4",
|
||||||
|
"2f7a4e16",
|
||||||
|
"241cc128",
|
||||||
|
"463e0551",
|
||||||
|
"3c644c8b",
|
||||||
|
"4db7b5a0",
|
||||||
|
"86784729",
|
||||||
|
"fdc54fc7",
|
||||||
|
"499e5031",
|
||||||
|
"edd76fef",
|
||||||
|
"90c3c142",
|
||||||
|
"2bd9cd4c",
|
||||||
|
"5d246309",
|
||||||
|
"97763a57",
|
||||||
|
"a0bce83c",
|
||||||
|
"8f5fb6c2",
|
||||||
|
"9790b325",
|
||||||
|
"7bacbe4b"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,160 +1,163 @@
|
||||||
---
|
---
|
||||||
title: 前端用户界面问题备忘单
|
title: UI 面试问题备忘单
|
||||||
description: 在前端/网络开发人员面试时，改善你必须建立的用户界面的顶级技巧 - 代码结构、管理状态、可访问性等。
|
description: 一份备忘单，可用于在前端面试中改进您必须构建或设计的用户界面。
|
||||||
|
seo_title: 用户界面问题备忘单 | 前端面试手册
|
||||||
|
seo_description: 一份备忘单，可用于在前端面试中改进您必须构建或设计的用户界面 - 组件组织、状态设计、用户体验等
|
||||||
|
social_title: 用户界面问题备忘单 | 前端面试手册
|
||||||
---
|
---
|
||||||
|
|
||||||
以下是一些提示，可帮助您在前端/ Web 开发人员面试期间改善您必须构建/设计的用户界面。 这些提示可应用于[用户界面编码面试](/front-end-interview-playbook/user-interface)和[前端系统设计面试](/front-end-system-design-playbook/types-of-questions)。
|
以下是一些提示，可用于改进您在前端面试中必须构建/设计的用户界面。这些可以应用于 [用户界面编码面试](/front-end-interview-playbook/user-interface) 和 [前端系统设计面试](/system-design/types-of-questions)。
|
||||||
|
|
||||||
## 概览
|
## 一般
|
||||||
|
|
||||||
- **分解问题**:将问题分解为可以逐步构建的阶段/里程碑，并逐步编写您的代码。
|
* **分解问题**：将问题分解为相互构建的阶段/里程碑，并逐步编写代码。
|
||||||
- **经常测试**:完成每个功能后在浏览器中测试 UI，以便您可以尽早捕获漏洞。 较早捕获的错误更容易修复。 确保当前功能正常工作，然后再进行下一个功能。
|
* **经常测试**：在完成每个功能后在浏览器中测试 UI，以便您可以尽早发现错误。尽早发现的错误更容易修复。在继续下一个功能之前，请确保当前功能正常工作。
|
||||||
- **使用 JavaScript 框架（如果可能）**: 如果您选择使用纯 JavaScript 构建复杂的 UI，您的生活将非常艰难，因为代码可能会很快变得非常长而杂乱。 我们建议使用框架构建应用程序和游戏。
|
* **如果可能，使用 JavaScript 框架**：如果您选择使用 Vanilla JavaScript 构建复杂的 UI，您的生活将会非常艰难，因为代码会变得非常冗长和混乱。我们建议尽可能使用框架构建应用程序和游戏。
|
||||||
- **未雨绸缪，计划周全**:考虑一下您的面试官可能要求您添加下一个功能。 设计代码的方式，使新功能可以轻松添加。
|
* **提前思考并相应地计划**：考虑一下您的面试官可能要求您接下来添加哪些功能。以一种易于添加新功能的方式设计您的代码。
|
||||||
|
|
||||||
## 组件组织
|
## 组件组织
|
||||||
|
|
||||||
您如何构建代码？
|
您如何组织代码？
|
||||||
|
|
||||||
- **采用容器/表示模式**:为了实现良好的解耦合，渲染代码应该与数据源无关。 将组件分成提供数据的外部组件和根据数据呈现视图的内部无状态组件。 这使视图可以从本地组件/应用状态切换到从网络加载的数据等情况，反之亦然，只要更改外部组件，内部组件就可以按原样使用。
|
* **采用 [容器/呈现模式](https://www.patterns.dev/posts/presentational-container-pattern/)**：为了实现良好的解耦，渲染代码应该与数据源无关。将组件分成一个提供数据的外部组件和一个根据数据渲染视图的内部无状态组件。这使得视图可以轻松地从本地组件/应用程序状态切换到从网络加载的数据，反之亦然，您只需更改外部组件，内部组件即可按原样使用。
|
||||||
- **将应用程序分解为子组件**: 如果 UI 具有多个部分，请将 UI 分解为较小的组件，并确定每个组件需要的属性/状态。
|
* **将应用程序分解为子组件**：如果 UI 有多个部分，请将 UI 分解为更小的组件，并确定每个组件所需的 props/state。
|
||||||
- **最小 API 面积**: 不要将不需要的额外数据传递给内部组件。
|
* **最小的 API 表面积**：不要将多余的数据传递给不需要它们的内部组件。
|
||||||
- **组件实例化**: 在要求构建 UI 组件时，定义 API（通常是函数）以允许创建多个独立的组件实例，其中包括可配置的选项和默认值。 避免编写代码（例如依赖全局变量）以防止创建单独的 UI 组件实例。
|
* **组件实例化**：当被要求构建 UI 组件时，定义 API（通常是函数）以允许创建组件的多个独立实例以及可配置的选项和默认值。避免编写代码（例如，依赖全局变量），这会阻止创建单独的 UI 组件实例。
|
||||||
- **纯 JavaScript**:创建一个接受 DOM 元素（容器元素）和选项对象的函数。 在函数内部，您可以动态创建 DOM 元素并将其附加到容器元素。 组件 API 的另一个灵感来源是[jQuery UI](https://jqueryui.com)，但它依赖于 jQuery。
|
* **Vanilla JavaScript**：创建一个接受 DOM 元素（容器元素）和选项对象的函数。在函数中，您可以动态创建 DOM 元素并附加到容器元素。组件 API 的另一个灵感来源是 [jQuery UI](https://jqueryui.com)，但它依赖于 jQuery。
|
||||||
- **其他 JavaScript UI 框架**：大多数现代 JavaScript UI 框架（如 React）默认强制您按组件进行思考。
|
* **其他 JavaScript UI 框架**：大多数现代 JavaScript UI 框架（如 React）默认情况下会迫使您从组件的角度进行思考。
|
||||||
|
|
||||||
## 状态设计
|
## 状态设计
|
||||||
|
|
||||||
状态是您的 UI 中随时间而变化的数据，通常是由用户交互或后台事件（网络请求响应、时间流逝、WebSocket 事件）导致的。
|
状态是 UI 中随时间变化的数据，通常是由于用户交互或后台事件（网络请求响应、时间流逝、WebSocket 事件）引起的。
|
||||||
|
|
||||||
面试中的大多数 UI 问题都需要状态，因此设计状态非常重要。
|
面试中的大多数 UI 问题都需要状态，并且良好地设计状态至关重要。
|
||||||
|
|
||||||
- **确定 UI 中所需的最小状态**: 状态越小，代码的可读性和理解能力就越强 -> 减少错误的可能性。
|
* **确定 UI 中所需的最少状态**：状态越小，代码就越容易阅读和理解 -> 出现错误的概率越低。
|
||||||
- 识别必要状态和派生状态。 派生状态是可以从必要状态计算出的状态。
|
* 确定基本状态与派生状态。派生状态是可以从基本状态计算的状态。
|
||||||
- **将呈现代码与数据管理代码分开**: 将 UI 作为数据的功能并将代码分为两组（呈现代码和数据管理代码），以获得更好的可读性。 如果使用诸如 React 之类的 JavaScript 框架，则一般强制执行此操作。
|
* **分离渲染代码与数据管理代码**：使 UI 成为数据的函数，并将代码分成两组（渲染代码和数据管理代码），以提高可读性。如果您使用 JavaScript 框架（如 React），您或多或少会被迫这样做。
|
||||||
- **对于复杂的状态交互，请使用状态-减少器模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用[减少器来汇总状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。 由 Redux 首先推广，状态-减少器模式鼓励您确定 UI 的状态、可执行的操作以及如何将操作与状态结合以导出下一个状态。 如果您使用 React，则可以通过[`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer)实现此模式。 Redux 通常过于适用于面试，而`useReducer`应该足够。
|
* **对复杂的状态交互使用状态-reducer 模式**：如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来合并状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以采取的操作以及如何将操作与状态结合起来以推导出下一个状态。如果您使用 React，您可以通过 [`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer) 实现此模式。Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。
|
||||||
|
|
||||||
React 的文档["管理状态"](https://beta.reactjs.org/learn/managing-state)是有关如何正确设计和使用组件状态的杰出资源。 提到的一些想法与 React 无关，可以适用于任何 UI 框架。
|
[React 的](https://beta.reactjs.org) 关于 [“管理状态”](https://beta.reactjs.org/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的绝佳资源。提到的一些想法并非特定于 React，可以应用于任何 UI 框架。
|
||||||
|
|
||||||
## JavaScript
|
## JavaScript
|
||||||
|
|
||||||
您的 JavaScript 是否使用现代语言语法和优秀实践，同时避免不良实践？
|
您的 JavaScript 是否使用现代语言语法和良好实践，同时避免不良实践？
|
||||||
|
|
||||||
- **使用样式指南**:使用 JavaScript 样式指南，如[Airbnb 的 JavaScript 样式指南](https://github.com/airbnb/javascript)。 在开发过程中，静态分析工具如[ESLint](https://eslint.org)可以帮助您执行其中一些良好实践。 但是，在面试期间可能没有这些工具可用。 尝试适应使用良好编码风格编写代码，而不需要工具的帮助。
|
* **使用样式指南**：使用 JavaScript 样式指南，如 [Airbnb 的 JavaScript 样式指南](https://github.com/airbnb/javascript)。在开发过程中，[ESLint](https://eslint.org) 等静态分析工具可以帮助您执行其中一些良好实践。但是，这些工具可能在面试期间不可用。尝试习惯于在没有工具帮助的情况下编写具有良好编码风格的代码。
|
||||||
- **不要触碰全局环境**:这适用于 Vanilla JavaScript 场景。 避免声明全局变量和全局函数以污染全局范围。 编写立即调用的函数表达式（IIFE）并将所有自定义代码放在其中。
|
* **不要动全局环境**：这适用于 Vanilla JavaScript 场景。避免通过声明全局变量和全局函数来污染全局范围。编写一个立即调用的函数表达式 (IIFE) 并将所有自定义代码放入其中。
|
||||||
|
|
||||||
## HTML
|
## HTML
|
||||||
|
|
||||||
您是否使用正确的属性编写语义化的 HTML？
|
您是否使用正确的属性编写语义 HTML？
|
||||||
|
|
||||||
- **语义标签**: 为标题使用标题标签，为交互元素使用按钮标签，为连续元素使用列表标签等。 不要为所有内容使用`<div>`！
|
* **语义标签**：使用标题标签表示标题，使用按钮标签表示交互元素，使用列表标签表示顺序元素，等等。不要对所有内容都使用 `<div>`！
|
||||||
- **标题层次**: 确保标题标签具有层次结构，并且 DOM 中没有多个`<h1>`。
|
* **标题层次结构**：确保标题标签具有层次结构，并且 DOM 中只有一个 `<h1>`。
|
||||||
- **交互元素**: 使用`<button>`将要求交互的元素包含其中。 不要将单击处理程序添加到`<div>`和`<span>`中。
|
* **交互元素**：对需要交互的元素使用 `<button>`。 避免向 `<div>` 和 `<span>` 添加点击处理程序。
|
||||||
|
|
||||||
### 表单
|
### 表单
|
||||||
|
|
||||||
表单本身很复杂，值得有自己的部分。
|
表单本身很复杂，值得单独讨论。
|
||||||
|
|
||||||
- **链接标签和输入**: 使用`id`和`for`链接`<label>`中的`<input>`以防止用户意外点击文本。
|
* **链接标签和输入**：`<input>` 应该使用 `id` 和 `for` 链接到 `<label>`。
|
||||||
- **在表单中包装输入**: 将`<input>`包装在`<form>`中，以便单击按钮和按 Enter 将提交表单。 如果使用 Ajax 进行网络请求，则记得添加`event.preventDefault()`。
|
* **将输入包装在表单中**：`<input>` 应该包装在 `<form>` 中，以便单击按钮和按 Enter 键将提交表单。 如果网络请求是使用 Ajax 发出的，请记住添加 `event.preventDefault()`。
|
||||||
- **输入应具有适当的类型**: `<input>`应具有适当的类型，例如电子邮件、密码、数字等。
|
* **输入应具有适当的类型**：`<input>` 应该具有适当的 `type`，如 `email`、`password`、`number` 等。
|
||||||
- **利用本机 HTML 表单验证**: 在可能的情况下，结合使用`required`属性和其他属性，如`pattern`、`min`、`max`等，以使用本机 HTML 表单验证。
|
* **利用原生 HTML 表单验证**：如果可能，使用 `required` 属性与其他属性（如 `pattern`、`min`、`max` 等）结合使用。
|
||||||
|
|
||||||
## CSS/样式
|
## CSS/样式
|
||||||
|
|
||||||
您的 CSS 是以可扩展且易于理解的方式编写的吗？
|
您的 CSS 是否以可扩展且易于理解的方式编写？
|
||||||
|
|
||||||
- **编写 Vanilla CSS**: 学会在没有 processor 的情况下编写 CSS，如[Sass](https://sass-lang.com/)和[Less](https://lesscss.org/)。 并不是所有环境都允许使用处理器，而且面试问题可能很小，不会真正受益于 CSS 预处理器提供的功能。 CSS 处理器最有用的功能是使用变量，这可以通过 CSS 自定义属性（变量）本机提供。
|
* **编写 Vanilla CSS**：学习编写 CSS，而不依赖于 [Sass](https://sass-lang.com/) 和 [Less](https://lesscss.org/) 等预处理器。 并非所有环境都允许使用处理器，并且面试问题可能很小，实际上并没有从 CSS 预处理器带来的功能中受益。 CSS 处理器最有用的功能是使用变量，该变量可通过 CSS 自定义属性（变量）以原生方式使用。
|
||||||
- **采用 CSS 命名约定**: 在编写类时考虑采用 CSS 命名方法论，例如[块元素修饰符](https://getbem.com)。
|
* **采用 CSS 命名约定**：在编写类时，考虑采用 CSS 命名方法，例如 [Block Element Modifier](https://getbem.com)。
|
||||||
- **在组件中避免使用`#id`选择器**: 当构建可重用的 UI 组件（例如按钮、选项卡、菜单、模态框等）时，请避免在 HTML 中使用`#id`选择器，因为`id`是全局唯一的，但是您可以多个组件实例。
|
* **避免在组件中使用 `#id` 选择器**：在构建旨在重用的 UI 组件（例如按钮、选项卡、菜单、模态等）时，避免在 HTML 中使用 `#id` 选择器，因为 `id` 旨在全局唯一，但您可以拥有该组件的多个实例。
|
||||||
- **组织您的 CSS**: 阅读有关[在大型项目中组织 CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)和如何具有[可扩展和模块化的 CSS 架构](http://smacss.com/)的文章。
|
* **组织您的 CSS**：阅读有关如何[在大型项目中组织您的 CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) 以及如何拥有[CSS 的可扩展和模块化架构](http://smacss.com/)。
|
||||||
|
|
||||||
## 用户体验
|
## 用户体验
|
||||||
|
|
||||||
您的 UI 提供了出色的用户体验吗？
|
您的 UI 是否提供了出色的用户体验？
|
||||||
|
|
||||||
- **适用于移动设备**: 检查您是否需要使 UI 在移动设备上正常工作。
|
* **移动友好性**：检查您是否需要使您的 UI 在移动设备上运行良好。
|
||||||
- CSS 媒体查询可用于在移动设备上显示不同的布局。
|
* CSS 媒体查询可用于在移动设备上呈现不同的布局。
|
||||||
- 使交互元素（如按钮）足够大，以便按下（建议至少为 44 x 44 px），并且间距足够宽。
|
* 使按钮等交互元素足够大以供按压（建议至少 44 x 44 像素）并充分间隔。
|
||||||
- **错误状态**: 及时清晰地反映错误-表单验证错误、网络请求错误等。
|
* **错误状态**：及时、清晰地反映错误 — 表单验证错误、网络请求错误。
|
||||||
- **处理不同尺寸的图片**: 使您的 UI 适用于呈现所有大小/维度的图片并保留原始纵横比的情况。
|
* **处理不同尺寸的图像渲染**：使您的 UI 适用于渲染所有尺寸/尺寸的图像，同时保留原始纵横比。
|
||||||
- 使用 CSS`background-image`和`background-position: contain`，以使图片适合在您定义的区域内。 如果可以将图片剪切（例如渐变背景），请使用`background-position: cover`。
|
* 将 CSS `background-image` 与 `background-position: contain` 结合使用，使图像适合您定义的区域。 如果可以裁剪图像（例如用于渐变背景），请使用 `background-position: cover`。
|
||||||
- `<img>`标记具有类似的`object-fit`属性和`contain`和`cover`值。
|
* `<img>` 标签具有类似的 `object-fit` 属性，具有 `contain` 和 `cover` 值。
|
||||||
- **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
|
* **乐观更新**：高级技术，即使网络请求仍在等待，也会反映成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
|
||||||
|
|
||||||
## 网络
|
## 网络
|
||||||
|
|
||||||
您的 UI 处理网络请求和条件的不可预测性情况吗？
|
您的 UI 是否处理网络请求和条件的不可预测性？
|
||||||
|
|
||||||
- **反映网络请求状态**: 如果 UI 涉及进行网络请求，请清楚地显示请求的挂起/成功/失败状态。
|
* **反映网络请求状态**：如果 UI 涉及发出网络请求，请清楚地显示请求的待处理/成功/失败状态
|
||||||
- **正在挂起**: 禁用字段/按钮，显示旋转器。
|
* **待处理**：禁用字段/按钮，显示微调器。
|
||||||
- **错误**: 显示错误消息。
|
* **错误**：显示错误消息。
|
||||||
- **成功**: 更新 UI 和/或显示成功消息。
|
* **成功**：更新 UI 和/或显示成功消息。
|
||||||
- **竞争条件**: 常见的原因是由于并行网络请求，响应顺序不能保证。 稍后发出的请求可能会更早地收到响应。 如果您的 UI 容易受到此类问题的影响，则可以跟踪最新的请求并忽略早期结果。 或者，使您的 UI 不能同时触发多个网络请求，例如通过在单击后禁用触发网络请求的元素等。
|
* **竞争条件**：一个常见的原因是由于并行网络请求，其中响应顺序不能保证。 稍后发出的请求可能会更早地收到响应。 如果您的 UI 容易受到这种情况的影响，您可以跟踪最新的请求并忽略较早请求的结果。 或者，使其 UI 无法一次触发多个网络请求，例如，通过在单击后禁用触发网络请求的元素。
|
||||||
- **避免重复请求**: 提交后应禁用按钮以避免进行重复的网络请求。
|
* **防止重复请求**：提交后应禁用按钮，以避免发出重复的网络请求。
|
||||||
- **合并请求**: 如果 UI 正在进行太多的网络请求，则可以：
|
* **合并请求**：如果 UI 发出了太多网络请求，您可以：
|
||||||
- 节流/去抖动: 限制发出的网络请求数。
|
* **去抖动/节流**：限制触发的网络请求的数量。
|
||||||
- 批量请求: 将请求组合在一起并仅进行一次请求。 这需要服务器端支持这种格式。
|
* **批量请求**：将请求组合在一起，只发出一个请求。 这需要服务器端支持这种格式。
|
||||||
- **缓存**: 如果最近已经使用相同的参数进行了请求，则您可以重用之前的响应并省略网络往返。
|
* **缓存**：如果最近发出了具有相同参数的请求，您是否可以重用之前的响应并节省网络往返？
|
||||||
- **请求超时**: 如果请求在规定的持续时间内没有接收到响应，您可能希望人为地显示请求失败（超时）。
|
* **请求超时**：如果请求在规定的持续时间后未收到响应，您可能希望人为地显示请求已失败（超时）。
|
||||||
- **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
|
* **乐观更新**：高级技术，即使网络请求仍在等待，也会反映成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
|
||||||
|
|
||||||
## 可访问性（a11y）
|
## 可访问性 (a11y)
|
||||||
|
|
||||||
在 UI 中处理可访问性是一个很大的优势，在某些情况下，老年工程师们需要处理可访问性。
|
在 UI 中处理可访问性是一个很大的优势，在某些情况下是高级工程师的要求。
|
||||||
|
|
||||||
- 您能否仅使用键盘使用 UI？
|
* 您是否只能使用键盘使用 UI？
|
||||||
- 您是否可以使用屏幕阅读器使用您的 UI 组件？
|
* 您可以使用屏幕阅读器使用您的 UI 组件吗？
|
||||||
- 您的 UI 组件可以在没有颜色的情况下工作吗？
|
* 您的 UI 组件可以在没有颜色的情况下工作吗？
|
||||||
- 您的 UI 组件可以在没有声音的情况下工作吗？
|
* 您的 UI 组件可以在没有声音的情况下工作吗？
|
||||||
|
|
||||||
来源：[网页的可访问 UI 组件](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
|
来源：[Web 的可访问 UI 组件](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
|
||||||
|
|
||||||
- **屏幕阅读器、ARIA 角色、状态和属性**:
|
* **屏幕阅读器、ARIA 角色、状态和属性**：
|
||||||
- 为不使用自定义 HTML 标记构建的元素添加正确的`aria-role`。
|
* 为未使用自定义 HTML 标签构建的自定义构建元素添加正确的 `aria-role`。
|
||||||
- 使用`aria-label`来描述其中没有文本显示的元素（例如仅图标的按钮）。
|
* 使用 `aria-label` 描述未显示文本的元素（例如，仅限图标的按钮）。
|
||||||
- 通过`aria-describedby`/`aria-errormessage`将错误消息元素链接到负责它们的元素。
|
* 通过 `aria-describedby`/`aria-errormessage` 将错误消息元素与负责它们的元素链接起来。
|
||||||
- **图片“alt”文本**:为`<img>`元素添加`alt`属性，以便屏幕阅读器可以描述图片。
|
* **图像 `alt` 文本**：将 `alt` 属性添加到 `<img>` 元素，以便屏幕阅读器可以描述图像。
|
||||||
- **键盘交互**
|
* **键盘交互**
|
||||||
- 将`tabindex`属性添加到要通过键盘制表符聚焦的元素。
|
* 将 `tabindex` 属性添加到您希望通过键盘制表符聚焦的元素。
|
||||||
- 元素可以通过键盘触发。
|
* 元素可以通过键盘触发。
|
||||||
- 检查焦点顺序是否合理。
|
* 检查焦点顺序是否有意义。
|
||||||
- **视觉问题**
|
* **视觉问题**
|
||||||
- **颜色对比度**: 文本/图片与背景之间的足够颜色对比度。
|
* **颜色对比度**：文本/图像与背景之间有足够的颜色对比度。
|
||||||
- **元素大小**: 字体大小，交互元素大小应足够大，适合其预期的媒介。
|
* **元素大小**：字体大小、交互式元素大小应足够大，以适合其预期介质。
|
||||||
|
|
||||||
Google 的[web.dev]有一个[免费的深入课程](https://web.dev/learn/accessibility/)，其中详细介绍了可访问性的内容，我们强烈推荐。
|
Google 的 web.dev 有一个[关于可访问性的免费深入课程](https://web.dev/learn/accessibility/)，我们强烈推荐。
|
||||||
|
|
||||||
## 边缘情况
|
## 边缘情况
|
||||||
|
|
||||||
在面试期间，可能没有足够的时间处理代码中的所有边缘情况，但是最好向面试官提及它们，以获得额外的答案。
|
在面试中，你可能没有足够的时间来处理代码中的所有边缘情况，但最好在面试中提及它们以获得加分。
|
||||||
|
|
||||||
- **处理长字符串**: UI 中的字符串（例如标题/按钮标签）可能会导致 UI 表现出奇怪的行为，例如溢出并影响周围元素的位置。 长字符串可能是用户输入或翻译的结果。
|
* **处理长字符串**：UI 中的字符串（例如标题/按钮标签）可能导致 UI 行为异常，例如溢出并影响周围元素的位置。长字符串可能是用户输入或翻译的结果。
|
||||||
- **空状态**: 显示一个空状态消息/占位符以指示内容的缺失，例如列表为空时。 什么也不显示可能会使用户认为仍在等待网络请求并且正在获取数据。
|
* **空状态**：显示空状态消息/占位符以指示内容缺失，例如当列表为空时。什么都不显示可能会让用户认为有一个待处理的网络请求，并且数据仍在获取中。
|
||||||
- **列表中的太多项**: 在单个页面上显示太多项目可能会导致糟糕的 UX（用户必须滚动很多）和反应灵敏度和内存消耗的糟糕性能。
|
* **列表中项目过多**：在单个页面上显示太多项目会导致较差的 UX（用户必须滚动很多）以及响应能力和内存消耗方面的性能不佳。
|
||||||
- **分页**: 将长列表分成多个页面。
|
* **分页**：将长列表项分成多个页面。
|
||||||
- [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists):在动态列表中仅呈现可见行的内容，而不是整个列表。
|
* [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists)：仅渲染动态列表中可见的行内容，而不是整个列表。
|
||||||
- 截断多余的内容，并显示一个省略号。 `word-break` CSS 属性非常有用。
|
* 截断多余的内容并显示省略号。`word-break` CSS 属性将派上用场。
|
||||||
- 将内容限制在前 X 个字符/单词，并在“显示更多”按钮后面隐藏多余的内容。
|
* 将内容限制为前 X 个字符/单词，并将多余的内容隐藏在“显示更多”按钮后面。
|
||||||
|
|
||||||
## 性能
|
## 性能
|
||||||
|
|
||||||
- **节流/去抖动**: 节流和去抖动是限制频率的技术，可防止不必要的操作。 此技术可用于不是非常时间敏感的操作，例如网络请求和滚动/调整事件回调。
|
* **节流/防抖**：节流和防抖是限制速率的技术，以防止不必要的操作。此技术可用于对时间要求不高的操作，例如网络请求和滚动/调整大小的事件回调。
|
||||||
- **缓存**: 可以将计算/网络请求的结果缓存在浏览器内存/存储器中，以避免重复操作。
|
* **缓存**：重复计算/网络请求的结果可以在浏览器内存/存储中缓存，而无需重复。
|
||||||
- **按需加载**: 仅在需要时延迟加载数据/组件代码，而不是一次性加载全部。
|
* **按需加载**：仅在需要时延迟加载数据/组件代码，而不是在开始时全部加载。
|
||||||
- **预取/预加载数据**: 在需要数据之前立即预取/预加载数据，以使更新立即显示，从而减少网络延迟。
|
* **预取/预加载数据**：在需要之前预取/预加载数据以减少网络延迟，以便更新立即显示。
|
||||||
- **列表中的太多项**: 参见上面的“边缘情况”下的内容。
|
* **列表中项目过多**：请参阅上面“边缘情况”下的要点。
|
||||||
|
|
||||||
## 安全
|
## 安全
|
||||||
|
|
||||||
- **跨站点脚本（XSS）**: 在渲染内容时，请避免分配给[`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)或 React 的`dangerouslySetInnerHTML`，因为它来自用户会导致跨站点脚本，应将其分配给[`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 或使用实验性的[`Element.setHTML()`](https://webdocs.dev/en-us/docs/web/api/element/sethtml) 方法代替。 请参考[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
|
* **跨站点脚本 (XSS)**：如果内容来自用户，则在将内容呈现到 DOM 时，避免分配给 [`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) 或 React 的 `dangerouslySetInnerHTML` 以防止跨站点脚本，分配给 [`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 或使用实验性的 [`Element.setHTML()`](https://webdocs.dev/en-us/docs/web/api/element/sethtml) 方法。请参阅 [OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
|
||||||
- **“URL 上下文”的输出编码**: 如果用户提供的输入可能用于 URL 查询参数，请使用`encodeURIComponent`来防止意外的值成为 URL 的一部分（例如额外的查询参数）。
|
* **“URL 上下文”的输出编码**：如果用户提供的输入可以在 URL 查询参数中使用，请使用 `encodeURIComponent` 以防止意外值成为 URL 的一部分（例如额外的查询参数）。
|
||||||
- **跨站点请求伪造**: 请参见[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)。
|
* **跨站点请求伪造**：请参阅 [OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)。
|
||||||
|
|
||||||
## 国际化（i18n）
|
## 国际化 (i18n)
|
||||||
|
|
||||||
您的 UI 能够处理多种语言吗？ 添加支持更多语言有多容易？
|
你的 UI 适用于多种语言吗？添加对更多语言的支持有多容易？
|
||||||
|
|
||||||
- **避免硬编码特定语言的标签**: 一些 UI 组件中具有标签字符串（例如，图片轮播具有上一个/下一个按钮的标签）。 允许使用这些标签字符串进行自定义，使它们成为组件的 props/options 的一部分，这很好。
|
* **避免用特定语言硬编码标签**：某些 UI 组件在其内部有标签字符串（例如，图像轮播有 prev/next 按钮的标签）。最好通过将这些标签字符串作为组件 props/options 的一部分来允许自定义它们。
|
||||||
- **UI 可以呈现长字符串**: 参见上面有关呈现长字符串的部分。
|
* **UI 可以呈现长字符串**：请参阅上面关于呈现长字符串的部分。
|
||||||
- **从右到左的语言**: 某些语言（例如，阿拉伯语、希伯来语） 使用[CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)来使你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。
|
* **从右到左的语言**：某些语言（例如阿拉伯语、希伯来语）是从右到左阅读的，UI 必须水平翻转。使用 [CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) 使你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "7c63c7f2",
|
||||||
|
"description": "56b0e13f",
|
||||||
|
"seo_title": "54aa4b47",
|
||||||
|
"seo_description": "3b7ca34f",
|
||||||
|
"social_title": "3172a31e"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"ec2eaf4a",
|
||||||
|
"f4d89882",
|
||||||
|
"d2f221b0",
|
||||||
|
"745ae0cc",
|
||||||
|
"92a02455",
|
||||||
|
"85f7a7dc",
|
||||||
|
"e5db926b",
|
||||||
|
"58935ea5",
|
||||||
|
"a3ac059f",
|
||||||
|
"63dc1953",
|
||||||
|
"1fc86ee7",
|
||||||
|
"84991a73",
|
||||||
|
"a00bd4c0",
|
||||||
|
"1c13dee3",
|
||||||
|
"7e75ddb2",
|
||||||
|
"e0d8bb38",
|
||||||
|
"4c266b7c",
|
||||||
|
"ede597ea",
|
||||||
|
"ed1196e3",
|
||||||
|
"a751801d",
|
||||||
|
"55890346",
|
||||||
|
"d7976b37",
|
||||||
|
"34925827",
|
||||||
|
"bc21213c",
|
||||||
|
"80a38c02",
|
||||||
|
"b7506daa",
|
||||||
|
"5f73eccb",
|
||||||
|
"efbc5f44"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"ec2eaf4a",
|
||||||
|
"f4d89882",
|
||||||
|
"d2f221b0",
|
||||||
|
"745ae0cc",
|
||||||
|
"92a02455",
|
||||||
|
"85f7a7dc",
|
||||||
|
"e5db926b",
|
||||||
|
"58935ea5",
|
||||||
|
"a3ac059f",
|
||||||
|
"63dc1953",
|
||||||
|
"1fc86ee7",
|
||||||
|
"84991a73",
|
||||||
|
"a00bd4c0",
|
||||||
|
"1c13dee3",
|
||||||
|
"7e75ddb2",
|
||||||
|
"e0d8bb38",
|
||||||
|
"4c266b7c",
|
||||||
|
"ede597ea",
|
||||||
|
"ed1196e3",
|
||||||
|
"a751801d",
|
||||||
|
"55890346",
|
||||||
|
"d7976b37",
|
||||||
|
"34925827",
|
||||||
|
"bc21213c",
|
||||||
|
"80a38c02",
|
||||||
|
"b7506daa",
|
||||||
|
"5f73eccb",
|
||||||
|
"efbc5f44"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,117 +1,123 @@
|
||||||
---
|
---
|
||||||
title: 前端面试界面编码问题
|
title: 用户界面编码面试
|
||||||
description: 准备前端/网络开发人员面试中的用户界面问题的指南
|
description: 面试时的最佳实践、需要了解的重要概念以及需要做的关键实践问题
|
||||||
|
seo_title: 用户界面编码问题 | 如何准备
|
||||||
|
seo_description: 准备 UI 面试问题的指南，包括面试最佳实践、要准备的重要概念和最佳实践问题
|
||||||
|
social_title: 破解用户界面问题 | 前端面试手册
|
||||||
---
|
---
|
||||||
|
|
||||||
用户界面编码面试将涉及候选人编写 HTML、CSS 和 JavaScript。 在我们看来，这对于评估前端工程师的技能至关重要，而越来越多的公司正转向要求候选人在面试期间编写用户界面。
|
用户界面编码面试将涉及候选人编写 HTML、CSS 和 JavaScript 来完成。我们认为这对于评估前端工程师的技能至关重要，并且越来越多的公司开始要求候选人在面试期间编写用户界面。
|
||||||
|
|
||||||
要求候选人编码的用户界面可以范围从非常小的 UI 组件到更复杂的客户端产品，例如小型应用程序和游戏。
|
## 用户界面问题的类型
|
||||||
|
|
||||||
## 例子
|
要求候选人编写的用户界面可以从非常小的 UI 组件到更复杂的面向客户的产品，如小型应用程序和游戏。
|
||||||
|
|
||||||
### 用户界面组件/小部件/布局
|
### 用户界面组件/小部件/布局
|
||||||
|
|
||||||
- 用户界面组件/小部件/布局组件：[手风琴](/questions/user-interface/accordion)、[选项卡](/questions/user-interface/tabs)、[星级评分小部件](/questions/user-interface/star-rating)、[推特](/questions/user-interface/tweet)、图片轮播。
|
* 组件：[手风琴](/questions/user-interface/accordion)、[标签页](/questions/user-interface/tabs)、[星级评分小部件](/questions/user-interface/star-rating)、[推文](/questions/user-interface/tweet)、图片轮播
|
||||||
- 小部件：[数字时钟](/questions/user-interface/digital-clock)、[模拟时钟](/questions/user-interface/analog-clock)。
|
* 小部件：[数字时钟](/questions/user-interface/digital-clock)、[模拟时钟](/questions/user-interface/analog-clock)
|
||||||
- 页面部分：[注册表单](/questions/user-interface/signup-form)、[圣杯](/questions/user-interface/holy-grail)
|
* 页面部分：[注册表单](/questions/user-interface/signup-form)、[圣杯](/questions/user-interface/holy-grail)
|
||||||
|
|
||||||
### 应用程序/游戏
|
### 应用程序/游戏
|
||||||
|
|
||||||
针对应用程序/游戏问题的时间通常比组件/小部件更长。 根据问题的复杂程度，您可能需要花上半个小时甚至一个小时来完成问题，特别是如果您被要求构建游戏。
|
应用程序/游戏问题的允许时间通常比组件/小部件问题长。根据问题的复杂程度，您可能需要花费长达半小时甚至一个小时的时间来完成问题，特别是如果您被要求构建游戏。
|
||||||
|
|
||||||
- 应用程序：[待办事项列表](/questions/user-interface/todo-list)、[秒表](/questions/user-interface/stopwatch)、[温度转换器](/questions/user-interface/temperature-converter)。
|
* 应用程序：[待办事项列表](/questions/user-interface/todo-list)、[秒表](/questions/user-interface/stopwatch)、[温度转换器](/questions/user-interface/temperature-converter)
|
||||||
- 游戏：[井字游戏](/questions/user-interface/tic-tac-toe)、[捉地鼠游戏](/questions/user-interface/whack-a-mole)、贪吃蛇、俄罗斯方块、扫雷、四连棋。
|
* 游戏：[井字棋](/questions/user-interface/tic-tac-toe)、[打地鼠](/questions/user-interface/whack-a-mole)、贪吃蛇、俄罗斯方块、扫雷、连连看
|
||||||
|
|
||||||
请注意，大多数游戏将是基于 2D 网格的游戏。 请确保您知道如何在 HTML 和 CSS 中创建网格布局！
|
请注意，大多数游戏将是基于 2D 网格的游戏。确保您知道如何在 HTML 和 CSS 中创建网格布局！
|
||||||
|
|
||||||
## 在用户界面编码面试期间需要做的事情
|
## 在用户界面编码面试中做什么
|
||||||
|
|
||||||
用户界面编码面试与非前端编码面试有许多共性。 一般来说，你应该：
|
用户界面编码面试与非前端编码面试有很大程度的相似性。一般来说，你应该：
|
||||||
|
|
||||||
1. 了解您所编码的平台并熟悉编码环境：
|
1. **找出可用的内容**：找出您正在使用的平台，并熟悉编码环境：
|
||||||
- 是否使用本地 IDE 或在线 IDE。 如果使用本地 IDE，是否使用自己的笔记本电脑？
|
* 您将使用本地 IDE 还是在线 IDE。如果是本地 IDE，您将使用自己的笔记本电脑吗？
|
||||||
- 支持的编辑器快捷键。
|
* 支持的编辑器快捷方式
|
||||||
- 是否可以使用 JavaScript 库/框架或必须使用原生 JavaScript。
|
* 您是否可以使用 JavaScript 库/框架，或者必须使用原始 JavaScript
|
||||||
- 是否可以执行代码并预览用户界面。
|
* 您是否可以执行代码并预览 UI
|
||||||
- 最新支持的 JavaScript 语法和语言特性是什么？
|
* 什么是最新支持的 JavaScript 语法和语言特性？
|
||||||
- 是否可以预先安装依赖项。
|
* 您是否可以事先安装依赖项
|
||||||
2. 在一分钟内进行自我介绍。 除非受到要求，否则不要花费更长时间，否则您可能没有足够的时间来编码。
|
2. **自我介绍**：在一分钟内进行自我介绍。除非被要求，否则不要超过这个时间，否则您可能没有足够的时间来编码。
|
||||||
3. 在收到问题时询问澄清问题。 澄清以下内容：
|
3. **澄清问题**：收到问题后，提出澄清问题。澄清以下内容：
|
||||||
- 是否可以使用最新的 JavaScript 语法？
|
* 您可以使用最新的 JavaScript 语法吗？
|
||||||
- 浏览器支持，因为这将影响您可以使用的浏览器 API。
|
* 浏览器支持，因为这将影响您可以使用哪些浏览器 API
|
||||||
4. 将问题分解为不同的阶段/里程碑。 将此分解通知面试官。 与编码面试不同，用户界面编码面试的重点通常在于组件状态和 API 上，而不是复杂的数据结构和算法。
|
4. **管理复杂性**：将问题分解为相互构建的阶段/里程碑。将此分解传达给您的面试官。与编码面试不同，用户界面编码面试的重点通常在于组件状态和 API，而不是复杂的数据结构和算法
|
||||||
5. 使用这些用例测试您的代码，并确定您的代码是否通过这些用例。
|
5. **开始编码**：编写您的解决方案，并在编码时向您的面试官解释您的代码
|
||||||
- 在添加每个里程碑/功能后，尽可能在浏览器中测试您的代码，而不是仅在最后进行测试。
|
* 在可能的情况下，在添加每个里程碑/功能后在浏览器中测试您的代码，而不仅仅是在最后
|
||||||
- 请参阅[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)，了解需要注意哪些方面在用户界面编码面试期间。
|
* 参考[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)，了解用户界面编码面试期间需要注意的事项列表
|
||||||
6. 在编码后，阅读您的代码一次，尝试找出基本错误，例如拼写错误、在初始化变量之前使用变量、错误使用 API 等。
|
6. **检查您的代码**：编码后，通读您的代码一次，并尝试发现基本错误，例如拼写错误、在使用变量之前初始化它们、不正确地使用 API 等。
|
||||||
7. 概述一些基本的测试用例和一些边缘情况。 使用这些用例测试您的代码，并确定您的代码是否通过这些用例。 如果失败，请调试问题并修复问题。
|
7. **测试**：概述一些基本测试用例和一些边缘情况。使用这些用例测试您的代码，并确定您的代码是否通过了它们。如果失败，请调试问题并修复它们
|
||||||
8. 解释您所做的折衷、您明确未处理的情况以及如何在有更多时间的情况下改进代码。
|
8. **权衡**：解释您所做的任何权衡、您明确未处理的案例以及如果您有更多时间将如何改进代码
|
||||||
9. 面试可能不会在这里结束，面试官可能会对这一问题或其他问题有跟进问题。 要为它们做好准备。
|
9. **后续行动**：面试可能不会在这里结束，面试官可能会就此问题向您提出后续问题或给您另一个问题。为他们做好准备
|
||||||
|
|
||||||
## 如何准备用户界面编码面试
|
## 如何准备用户界面编码面试
|
||||||
|
|
||||||
1. 熟悉“重要概念”下的主题。 [测验部分](/front-end-interview-playbook/quiz)也可能是一个好的开始，因为您可能会在形式上的测验问题中被问及这些概念。
|
1. **核心概念**：熟悉下面 [重要概念](#important-concepts) 部分的主题。 [测验部分](/front-end-interview-playbook/quiz) 也可以作为一个好的开始，因为在编码过程中，你可能会被问到这些概念的测验问题。
|
||||||
2. 最好学习如何在原生 JavaScript 和首选的 UI 框架中构建 UI。 大多数公司将允许使用 JavaScript UI 框架，但某些公司（例如 Google）强制要求仅使用原生 JavaScript。
|
2. **练习编写 UI**：最好学习如何使用 Vanilla JavaScript 和你选择的 UI 框架来构建 UI。 大多数公司都允许使用 JavaScript UI 框架，但有些公司（例如 Google）强制要求你只能使用 Vanilla JavaScript
|
||||||
- **原生 JavaScript**：学习 DOM 操作 API。 您至少应该知道如何创建新的 DOM 元素，在其中添加类/属性，并添加子元素。 如果您来自 [jQuery](https://jquery.com/) 背景，请查看 [You might not need jQuery](https://youmightnotneedjquery.com)，这是一个网站，显示您如何在原生 JavaScript 中实现常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API，实际上并不需要 jQuery。
|
* **Vanilla JavaScript**：学习 DOM 操作 API。 至少你应该知道如何创建新的 DOM 元素，向它们添加类/属性，以及添加子元素。 如果你来自 [jQuery](https://jquery.com/) 背景，请查看 [你可能不需要 jQuery](https://youmightnotneedjquery.com)，这是一个网站，向你展示如何在 Vanilla JavaScript 中完成常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API 已经不再需要 jQuery 了。
|
||||||
- **JavaScript UI 框架**：熟悉首选的 UI 框架。 坚持您最熟悉的框架即可。 没有必要也可能没有足够的时间学习新的框架。 如果您是 JavaScript UI 框架的新手，我们将推荐 [React](https://reactjs.org/)，因为它是目前构建 UI 的最流行的库/框架，是大多数公司在招聘前端工程师时寻找的最受欢迎的语言。
|
* **JavaScript UI 框架**：熟悉你选择的 UI 框架。 坚持使用你最熟悉的框架。 没有必要，也可能没有足够的时间来学习新的框架。 如果你刚接触 JavaScript UI 框架，[React](https://reactjs.org/) 将是我们的推荐，因为它是目前构建 UI 最流行的库/框架，也是大多数公司在招聘前端工程师时所寻找的。
|
||||||
3. 熟悉在面试条件下编写 CSS（不需要编写太多的 CSS 的小问题）：
|
3. **CSS**：熟悉在面试条件下编写 CSS（小问题，不需要编写那么多 CSS）：
|
||||||
- **编写原生 CSS**：学习如何在没有预处理器（例如 Sass/Less）的情况下编写 CSS。 不是所有的编码环境都将允许使用处理器，并且面试问题可能很小，不会真正受益于 CSS 预处理器带来的功能。 CSS 处理器最有用的功能是使用变量，可通过 CSS 自定义属性（CSS 变量）本地提供。
|
* **编写 Vanilla CSS**：学习编写 CSS，不依赖于 Sass/Less 等预处理器。 并非所有编码环境都允许使用处理器，并且面试问题可能很小，实际上并没有从 CSS 预处理器带来的功能中受益。 CSS 处理器最有用的功能是使用变量，这可以通过 CSS 自定义属性（CSS 变量）本地获得。
|
||||||
- **采用 CSS 命名约定**：在编写类时，请考虑采用 CSS 命名方法论，例如 [块元素修饰符](https://getbem.com)。
|
* **采用 CSS 命名约定**：考虑在编写类时采用 CSS 命名方法，例如 [Block Element Modifier](https://getbem.com)。
|
||||||
4. 阅读我们的用户界面编码深入指南：
|
4. **深入研究**：阅读我们的用户界面编码深入研究指南：
|
||||||
- [用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)
|
* [用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)
|
||||||
- [用户界面组件 API 设计原则](/front-end-interview-playbook/user-interface-components-api-design-principles)
|
* [用户界面组件 API 设计原则](/front-end-interview-playbook/user-interface-components-api-design-principles)
|
||||||
5. 选择一个[学习计划](/interviews/get-started)，并练习推荐的[用户界面编码问题](/questions)。
|
5. **更多练习**：尝试 [GFE 75](/interviews/gfe75) 或选择一个 [学习计划](/interviews/study-plans) 并练习为所选学习计划推荐的 [用户界面编码问题](/questions/formats/ui-coding)。
|
||||||
- 在构建 UI 组件和构建应用程序/游戏方面，花费大致相等的时间。 两者同样重要。
|
* 花费大致相等的时间来练习构建 UI 组件和构建应用程序/游戏。 两者同样重要。
|
||||||
|
|
||||||
## 重要概念
|
## 重要概念
|
||||||
|
|
||||||
|
熟悉这些 Web 开发概念：
|
||||||
|
|
||||||
| 类别 | 重要主题 |
|
| 类别 | 重要主题 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| 数据结构 | 数组、映射、栈、树、集合 |
|
| 数据结构 | 数组、映射、堆栈、树、集合 |
|
||||||
| 软件工程 | SOLID 原则、设计模式、模型 - 视图 - 控制器 |
|
| 软件工程 | SOLID 原则、设计模式、模型-视图-控制器 |
|
||||||
| HTML | 语义 HTML、表单验证、表单提交 |
|
| HTML | 语义 HTML、表单验证、表单提交 |
|
||||||
| CSS | 盒模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性（变量） |
|
| CSS | 盒子模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性（变量） |
|
||||||
| JavaScript | 闭包、回调、`Promise`、`async`/`await`、变长参数处理 |
|
| JavaScript | 闭包、回调、`Promise`、`async`/`await`、处理可变参数 |
|
||||||
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
|
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
|
||||||
| 运行时 API | 计时器（`setTimeout()`、`setInterval()`）、网络（Ajax、`fetch()`） |
|
| 运行时 API | 计时器 — `setTimeout()`、`setInterval()`、网络 — Ajax、`fetch()` |
|
||||||
| 可访问性 | ARIA 角色、状态和属性、键盘交互 |
|
| 可访问性 | ARIA 角色、状态和属性、键盘交互 |
|
||||||
|
|
||||||
## 用户界面编码面试评分标准
|
## 用户界面编码面试标准
|
||||||
|
|
||||||
用户界面编码面试与 JavaScript 编码面试具有类似的评分标准，因为两者都涉及前端领域的编码。 然而，用户界面编码问题将更加强调领域专业知识和各种前端主题。
|
用户界面编码面试与 JavaScript 编码面试具有相似的标准，因为两者都涉及在前端领域进行编码。 然而，用户界面编码问题将更加侧重于领域专业知识和各种前端主题。
|
||||||
|
|
||||||
- **问题解决能力**：使用系统性和逻辑性的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
|
* **解决问题**：使用系统和逻辑的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同的方法及其权衡
|
||||||
- **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
|
* **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、设计模式的使用、使用干净的抽象设计解决方案
|
||||||
- **领域专业知识**：了解前端领域及相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、用户体验、可访问性、i18n、网络、性能。
|
* **领域专业知识**：了解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、用户体验、可访问性、i18n、网络、性能
|
||||||
- **交流**：询问澄清细节并清楚地解释自己的方法和考虑因素。
|
* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素
|
||||||
- **验证**：确定各种测试代码的场景，包括边缘情况。 能够诊断和修复出现的任何问题。
|
* **验证**：确定各种场景以测试代码，包括边缘情况。 能够诊断和修复出现的任何问题
|
||||||
|
|
||||||
## 最佳实践问题
|
## 最佳实践问题
|
||||||
|
|
||||||
从经验而言，最佳用户界面面试问题将根据频率和涉及重要概念来确定：
|
根据经验，最适合练习的 UI 面试问题，由频率和涵盖的重要概念决定，是：
|
||||||
|
|
||||||
- [待办事项列表](/questions/user-interface/todo-list)
|
* [待办事项列表](/questions/user-interface/todo-list)
|
||||||
- [注册表单](/questions/user-interface/signup-form)
|
* [注册表单](/questions/user-interface/signup-form)
|
||||||
- [温度转换器](/questions/user-interface/temperature-converter)
|
* [温度转换器](/questions/user-interface/temperature-converter)
|
||||||
- [进度条](/questions/user-interface/progress-bar)
|
* [进度条](/questions/user-interface/progress-bar)
|
||||||
- [模拟时钟](/questions/user-interface/analog-clock)
|
* [模拟时钟](/questions/user-interface/analog-clock)
|
||||||
- [求职信息板](/questions/user-interface/job-board)
|
* [招聘板](/questions/user-interface/job-board)
|
||||||
- [捉地鼠游戏](/questions/user-interface/whack-a-mole)
|
* [数据表](/questions/user-interface/data-table)
|
||||||
- [井字游戏](/questions/user-interface/tic-tac-toe)
|
* [打地鼠](/questions/user-interface/whack-a-mole)
|
||||||
- [选项卡](/questions/user-interface/tabs)
|
* [井字棋](/questions/user-interface/tic-tac-toe)
|
||||||
- 图片轮播
|
* [标签页](/questions/user-interface/tabs)
|
||||||
- 自动完成
|
* [图片轮播](/questions/user-interface/image-carousel)
|
||||||
- 下拉菜单
|
* [模态对话框](/questions/user-interface/modal-dialog)
|
||||||
- 模态框
|
* 自动完成
|
||||||
|
* 下拉菜单
|
||||||
|
|
||||||
GreatFrontEnd 提供[广泛的用户界面编码问题列表](/questions/formats/ui-coding)，您可以在首选的框架中进行练习（目前支持原生 JavaScript 和 [React](https://react.dev/)）。 我们还提供了您可以使用各种 JavaScript UI 框架编写解决方案的测试用例，由前 FAANG 高级工程师编写。 UI 问题不提供自动化测试用例，因为它们往往与实现耦合，并且自动化测试很难准确测试它们。 此外，在面试中，您可能需要自己测试您的 UI。
|
GreatFrontEnd 有一个 [全面的用户界面编码问题列表](/questions/formats/ui-coding)，你可以在你选择的框架中练习（目前支持 Vanilla JavaScript 和 [React](https://react.dev/)）。 我们还提供了手动测试用例，你可以根据这些用例测试你的代码，以验证由前 FAANG 高级工程师编写的各种 JavaScript UI 框架的正确性和解决方案。 UI 问题不提供自动化测试用例，因为它们往往与实现相关联，并且难以通过自动化测试进行准确测试。 此外，在面试期间，你可能需要自己测试你的 UI。
|
||||||
|
|
||||||
GreatFrontEnd 的许多编码问题也分阶段，逐渐变得更加困难。 在面试中，您的面试官可能仅显式要求基本功能。 然而，在完成基本功能之后，您可以采取主动措施，添加更多功能以改进基本版本并处理更多的边缘情况。 阶段划分的一个例子：
|
GreatFrontEnd 的许多编码问题也被分解为阶段，这些阶段会逐渐变得更难。 在面试中，你的面试官可能只会明确要求基本功能。 但是，在你完成基本功能后，你可以主动添加更多功能以改进基本版本并处理更多边缘情况。 一个被分解成阶段的问题的例子：
|
||||||
|
|
||||||
1. [手风琴](/questions/user-interface/accordion)：构建一个基本的手风琴，重点放在渲染和显示/隐藏功能上。
|
1. [手风琴](/questions/user-interface/accordion)：构建一个基本的、侧重于渲染和显示/隐藏功能的手风琴
|
||||||
2. [手风琴 II](/questions/user-interface/accordion-ii)：构建一个可访问性更好的手风琴，具有正确的 ARIA 角色、状态和属性。
|
2. [手风琴 II](/questions/user-interface/accordion-ii)：构建一个具有改进的可访问性的手风琴，该手风琴具有正确的 ARIA 角色、状态和属性
|
||||||
3. [手风琴 III](/questions/user-interface/accordion-iii)：构建一个完全可访问的手风琴，具有 ARIA 规范的键盘支持。
|
3. [手风琴 III](/questions/user-interface/accordion-iii)：构建一个完全可访问的手风琴，该手风琴根据 ARIA 规范具有键盘支持
|
||||||
|
|
||||||
构建基本的手风琴组件可能会让您通过面试，但掌握可访问性方面将有助于您获得更多分数，可能会使您达到高级水平。
|
构建基本的手风琴组件可能让你通过面试，但掌握可访问性方面将帮助你获得更多分数，并可能让你达到高级水平。
|
||||||
|
|
||||||
请注意，我们在某些问题上有意模糊，没有在问题描述中提供完整的要求。 但是，我们将在解决方案中尽可能涵盖尽可能多的内容。 在阅读解决方案时，您可能会感到沮丧，因为您已经错过了一些东西，但是这可以训练您提前考虑并考虑在解决方案上需要注意的可能领域。 在练习期间发现比在实际面试中发现要好。
|
请注意，我们在某些问题中故意含糊不清，并且没有在问题描述中预先呈现完整的需求。 但是，我们将在解决方案中尽可能多地涵盖内容。 在阅读解决方案时，你可能会感到沮丧，因为你错过了一些东西，但这可以训练你提前思考并考虑在处理解决方案时需要注意的可能领域。 最好在练习期间发现，而不是在实际面试期间。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "238a9430"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"952179dc",
|
||||||
|
"9458db02",
|
||||||
|
"458a6f7",
|
||||||
|
"f1701f19"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"952179dc",
|
||||||
|
"9458db02",
|
||||||
|
"458a6f7",
|
||||||
|
"f1701f19"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
title: 您是否熟悉SVG样式？
|
title: 你熟悉 SVG 的样式设置吗？
|
||||||
---
|
---
|
||||||
|
|
||||||
有这么几种方法可以为形状（Shapes）着色（包括在对象上指定属性），使用内联的 CSS、嵌入的 CSS 部分或外部 CSS 文件。 您在网页上找到的大多数 SVG 都使用内联 CSS，但是每种类型都有优劣之处。
|
有几种方法可以为形状着色（包括在对象上指定属性），可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件。 您在网络上找到的大多数 SVG 都使用内联 CSS，但每种类型都有其优点和缺点。
|
||||||
|
|
||||||
可以通过在节点上设置两个属性来做基本着色：`fill` 和 `stroke` 。 `fill`设置对象内的颜色，`stroke`设置对象周围绘制的线的颜色。 你可以使用在 HTML 中的 CSS 颜色命名方案定义它们的颜色，比如说颜色名（像 red 这种）、rgb 值（像 rgb(255,0,0) 这种）、十六进制值、rgba 值，等等。
|
可以通过在节点上设置两个属性来完成基本着色：`fill` 和 `stroke`。 `fill` 设置对象内部的颜色，`stroke` 设置绘制在对象周围的线条的颜色。 您可以使用在 HTML 中使用的相同 CSS 颜色命名方案，无论是颜色名称（即 `red`）、RGB 值（即 `rgb(255,0,0)`）、十六进制值、RGBA 值等。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<rect
|
<rect
|
||||||
|
|
@ -18,4 +18,4 @@ title: 您是否熟悉SVG样式？
|
||||||
stroke-opacity="0.8" />
|
stroke-opacity="0.8" />
|
||||||
```
|
```
|
||||||
|
|
||||||
上述`fill="purple"`是一个 _呈现属性_ 的示例。 有趣的是，与内部样式不同的是，像`style="fill: purple"` (它恰巧也是一个属性)，呈现属性可以被[样式表中定义的 CSS 样式](https://css-tricks.com/presentation-attributes-vs-inline-styles/)所覆盖。 因此，如果你做了类似于`svg { fill: blue; }`的事情，它将覆盖已定义的紫色填充。
|
上面的 `fill="purple"` 是*表现属性*的一个例子。 有趣的是，与 `style="fill: purple"` 这样的内联样式（它也恰好是一个属性）不同，表现属性可以被样式表中定义的 [CSS 样式覆盖](https://css-tricks.com/presentation-attributes-vs-inline-styles/)。 因此，如果您执行类似 `svg { fill: blue; }` 的操作，它将覆盖已定义的紫色填充。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "8d8eae1c"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"55926f6e",
|
||||||
|
"bc76e578",
|
||||||
|
"49603ba8",
|
||||||
|
"a18976f9",
|
||||||
|
"c789e33e",
|
||||||
|
"96db5f42"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"55926f6e",
|
||||||
|
"bc76e578",
|
||||||
|
"49603ba8",
|
||||||
|
"a18976f9",
|
||||||
|
"c789e33e",
|
||||||
|
"96db5f42"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: 你能解释一下将网站编码为响应式与使用移动优先策略之间的区别吗？
|
title: 你能解释一下编写响应式网站与使用移动优先策略的区别吗？
|
||||||
---
|
---
|
||||||
|
|
||||||
这两种办法并非相互排斥。 网站响应意味着某些元素将根据设备的屏幕大小通过调整其大小或其他功能来应对。 通常是视图宽度，通过 CSS 媒体查询，例如，在较小的设备上使字体大小更小。
|
这两种方法并非相互排斥。使网站具有响应性意味着某些元素将通过调整其大小或其他功能来响应，具体取决于设备的屏幕尺寸，通常是视口宽度，例如通过 CSS 媒体查询，例如，在较小的设备上减小字体大小。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
|
|
@ -18,7 +18,7 @@ title: 你能解释一下将网站编码为响应式与使用移动优先策略
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
移动优先的策略也是响应式的，但它允许我们应该默认和定义移动设备的所有样式，只在以后为其他设备添加特定的响应式规则。 沿用上一个示例：
|
移动优先策略也具有响应性，但是它同意我们应该为移动设备设置默认值并定义所有样式，并且稍后仅为其他设备添加特定的响应式规则。 遵循前面的示例：
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.my-class {
|
.my-class {
|
||||||
|
|
@ -34,5 +34,5 @@ title: 你能解释一下将网站编码为响应式与使用移动优先策略
|
||||||
|
|
||||||
移动优先策略具有以下主要优点：
|
移动优先策略具有以下主要优点：
|
||||||
|
|
||||||
- 它在移动设备上的性能更强，因为适用于它们的所有规则都不必与任何媒体查询进行验证。
|
* 它在移动设备上具有更高的性能，因为应用于它们的规则不必针对任何媒体查询进行验证。
|
||||||
- 移动优先的设计更有可能在更大的设备上使用（只是会显得更拉长，但仍然可以使用）。 当然，反过来就不适用了。
|
* 移动优先设计更有可能在更大的设备上使用（只会显得更拉伸，但仍然可用）。 但是，反之则不然。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "77f6b259"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"f259cefe",
|
||||||
|
"92921ca1",
|
||||||
|
"31ea7338",
|
||||||
|
"727abcd0"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"f259cefe",
|
||||||
|
"92921ca1",
|
||||||
|
"31ea7338",
|
||||||
|
"727abcd0"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
---
|
---
|
||||||
title: 你能举例说明除 "screen "以外的媒体查询属性吗？
|
title: 你能举一个除了`screen`之外的`@media`属性的例子吗？
|
||||||
---
|
---
|
||||||
|
|
||||||
有四种类型的媒体查询属性(包括`screen`)：
|
有四种类型的`@media`属性（包括`screen`）：
|
||||||
|
|
||||||
- `all`：适用于所有媒体类型设备
|
* `all`：适用于所有媒体类型设备
|
||||||
- `print`: 适用于打印机
|
* `print`：适用于打印机
|
||||||
- `speech`：用于屏幕阅读器，大声 "读 "出页面。
|
* `speech`：适用于“朗读”页面的屏幕阅读器
|
||||||
- `screen`：用于电脑屏幕、平板电脑、智能手机等。
|
* `screen`：适用于电脑屏幕、平板电脑、智能手机等。
|
||||||
|
|
||||||
下面是 `print` 媒体类型的用法示例：
|
以下是`print`媒体类型用法的示例：
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@media print {
|
@media print {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "d5aa1c8e",
|
||||||
|
"subtitle": "d0dee082"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"a9123b80",
|
||||||
|
"1ee595ed",
|
||||||
|
"4da4c411",
|
||||||
|
"63788dd",
|
||||||
|
"269e6fd2",
|
||||||
|
"71990a7c",
|
||||||
|
"56c7acae",
|
||||||
|
"a740fe82",
|
||||||
|
"e8fe5410",
|
||||||
|
"ba92368c"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"a9123b80",
|
||||||
|
"1ee595ed",
|
||||||
|
"4da4c411",
|
||||||
|
"63788dd",
|
||||||
|
"269e6fd2",
|
||||||
|
"71990a7c",
|
||||||
|
"56c7acae",
|
||||||
|
"a740fe82",
|
||||||
|
"e8fe5410",
|
||||||
|
"ba92368c"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,24 +1,26 @@
|
||||||
---
|
---
|
||||||
title: 为什么一般来说，将CSS`<link>`放在`<head></head>`之间，将JS`<script>`放在`</body>`之前是个好主意？
|
title: >-
|
||||||
subtitle: 您是否知道任何例外情况？
|
为什么将 CSS `<link>` 放置在 `<head></head>` 之间，而 JS `<script>` 放置在 `</body>`
|
||||||
|
之前是一个好主意？
|
||||||
|
subtitle: 你知道任何例外情况吗？
|
||||||
---
|
---
|
||||||
|
|
||||||
简而言之， 这种 CSS `<link>` 和 JavaScript `<script>` 的放置可以更快地呈现页面和更好的整体性能。
|
简而言之，这种 CSS `<link>` 和 JavaScript `<script>` 的放置方式可以更快地渲染页面并获得更好的整体性能。
|
||||||
|
|
||||||
## 将`<link>` 放置在`<head> ` 中
|
## 将 `<link>` 放置在 `<head>` 中
|
||||||
|
|
||||||
将`<link>` 放入`<head>`是建立一个优化网站的正确规范的一部分。 当页面首次加载时，HTML 和 CSS 同时解析； HTML 创建 DOM (文档对象模型) ， CSS 创建 CSSOM (CSS 对象模型)。 两者都需要在网站中创建视觉效果，以优化 "首次有意义的绘制 "时机。 将 CSS `<link>` 放入`<head>`中确保了样式表已加载并准备在浏览器开始渲染页面时使用。
|
将 `<link>` 放在 `<head>` 中是构建优化网站的正确规范的一部分。当页面首次加载时，HTML 和 CSS 会同时被解析；HTML 创建 DOM（文档对象模型），CSS 创建 CSSOM（CSS 对象模型）。两者都需要在网站中创建视觉效果，从而实现快速的“首次有效绘制”计时。将 CSS `<link>` 放置在 `<head>` 中可确保样式表在浏览器开始渲染页面时已加载并可以使用。
|
||||||
|
|
||||||
这种渐进式渲染是网站在其性能评分中衡量的一个指标。 将样式表放在文档的底部是禁止在许多浏览器中进行渐进式渲染的原因。 某些浏览器阻止渲染以避免在其样式改变时需要重新刷新页面元素。 然后，用户会被卡住，面对一个空白页面。 其它时候可能会有无样式内容的闪烁(FOUC)，它会显示一个没有应用样式的网页。
|
这种渐进式渲染是衡量网站性能得分的指标。将样式表放在文档的底部会阻止许多浏览器中的渐进式渲染。某些浏览器会阻止渲染，以避免在样式更改时重新绘制页面元素。然后，用户会卡在查看空白的白页上。其他时候可能会出现未设置样式的闪烁内容 (FOUC)，这会显示未应用任何样式的网页。
|
||||||
|
|
||||||
## 在`</body>`之前放置`<script>`。
|
## 将 `<script>` 放置在 `</body>` 之前
|
||||||
|
|
||||||
`<script>`标签在下载和执行时阻止了 HTML 解析，这可能会拖慢你的页面显示。 将`<script>`放在底部将允许 HTML 首先被解析并显示给用户。
|
`<script>` 标签会阻止 HTML 解析，因为它们正在被下载和执行，这会减慢页面的显示速度。将 `<script>` 放在底部将允许首先解析 HTML 并将其显示给用户。
|
||||||
|
|
||||||
当你的脚本包含`document.write()`时，`<script>`在底部的定位是一个例外，但现在使用`document.write()`并不是一个好的做法。 另外，将 `<script>`放在底部意味着，在解析整个文档之前，浏览器无法开始下载脚本。 这将确保您需要操纵 DOM 元素的代码不会导致错误从而停止整个脚本。 如果你需要把`<script>`放在`<head>`中，请使用`defer`属性，这将达到同样的效果，即在 HTML 被解析后才运行脚本，但浏览器可以提前启动网络请求以下载脚本。
|
将 `<script>` 放置在底部的例外情况是，当您的脚本包含 `document.write()` 时，但如今使用 `document.write()` 并不是一个好习惯。此外，将 `<script>` 放置在底部意味着浏览器在整个文档被解析之前无法开始下载脚本。这确保了需要操作 DOM 元素的代码不会抛出错误并停止整个脚本。如果需要在 `<head>` 中放置 `<script>`，请使用 `defer` 属性，这将实现与仅在 HTML 被解析后运行脚本相同的效果，但浏览器可以更早地启动网络请求以下载脚本。
|
||||||
|
|
||||||
请记住，把脚本放在结尾的`</body>`标签之前，会造成页面在空的缓存中加载更快的错觉（因为脚本不会阻止下载文档的其他部分）。 但是，如果你想要在页面加载时运行一些代码，它只会在整个页面加载后才开始执行。 如果你将那些脚本放入`<head>`标签， 他们会在预设的缓存中开始执行, 所以页面实际上会加载更快。
|
请记住，将脚本放在结束 `</body>` 标签之前会产生页面在空缓存上加载更快的错觉（因为脚本不会阻止下载文档的其余部分）。但是，如果您有一些代码要在页面加载期间运行，它将仅在整个页面加载完成后才开始执行。如果将这些脚本放在 `<head>` 标签中，它们将开始更早地执行 - 因此在已准备好的缓存上，页面实际上看起来会加载得更快。
|
||||||
|
|
||||||
## `<head>` 和 `<body>`标签现在是可选的
|
## `<head>` 和 `<body>` 标签现在是可选的
|
||||||
|
|
||||||
按照 HTML5 的规格，某些 HTML 标签，如`<head>`和`<body>`都是可选的。 谷歌的样式指南甚至建议删除它们以便保存字节。 然而，仍然存在着这样一种现象： 这种做法仍然没有得到广泛采用，性能收益很可能很小，对大多数网站来说不太可能起作用。
|
根据 HTML5 规范，某些 HTML 标签（如 `<head>` 和 `<body>`）是可选的。谷歌的风格指南甚至建议删除它们以节省字节。但是，这种做法尚未得到广泛采用，性能提升可能很小，对于大多数网站来说，它可能无关紧要。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "91b11af2"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"24e0ef76",
|
||||||
|
"d8dd99d0",
|
||||||
|
"4f0541a4",
|
||||||
|
"3aa3e4a9",
|
||||||
|
"210bb734",
|
||||||
|
"34629f90"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"24e0ef76",
|
||||||
|
"d8dd99d0",
|
||||||
|
"4f0541a4",
|
||||||
|
"3aa3e4a9",
|
||||||
|
"210bb734",
|
||||||
|
"34629f90"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
---
|
---
|
||||||
title: 描述块级格式化上下文(BFC)及其工作方式。
|
title: 描述块格式化上下文 (BFC) 及其工作原理。
|
||||||
---
|
---
|
||||||
|
|
||||||
块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域。 浮动、绝对定位的元素、`inline-blocks`、`table-cells`、`table-caption`和 `overflow `值不为 `visible` 的元素（除非该值已被传播到视口）建立新的块格式化上下文。
|
块格式化上下文 (BFC) 是网页视觉 CSS 渲染的一部分，其中会布局块级盒子。浮动、绝对定位的元素、`inline-blocks`、`table-cells`、`table-caption` 以及 `overflow` 值不为 `visible` 的元素（除非该值已传播到视口）会建立新的块格式化上下文。
|
||||||
|
|
||||||
了解如何建立一个块格式化的上下文是很重要的，因为如果不这样做，容器盒子就不会[包含浮动的子元素](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height)。 这类似于外边距重叠，但更严重，因为你会发现整个盒子以奇特的方式重叠。
|
了解如何建立块格式化上下文非常重要，因为如果不这样做，包含框将无法[包含浮动子元素](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height)。这类似于折叠外边距，但更隐蔽，因为您会发现整个盒子以奇怪的方式折叠。
|
||||||
|
|
||||||
想要创建一个 BFC，至少满足下列条件之一：
|
BFC 是满足以下至少一个条件的 HTML 盒子：
|
||||||
|
|
||||||
- `float` 的值不是 `none` 。
|
* `float` 的值不为 `none`。
|
||||||
- `position` 的值既不是`static` 也不是`relative` 。
|
* `position` 的值既不是 `static` 也不是 `relative`。
|
||||||
- `display` 的值是 `table-cell`, `table-caption`, `inline-block`, `flex`, 或 `inline-flex`, `grid`, 或 `inline-grid`。
|
* `display` 的值为 `table-cell`、`table-caption`、`inline-block`、`flex` 或 `inline-flex`、`grid` 或 `inline-grid`。
|
||||||
- `overflow`的值不是\`visible'。
|
* `overflow` 的值不为 `visible`。
|
||||||
|
|
||||||
在 BFC 中，每个盒子的左外边缘都会接触到包含块的左边缘（对于从右到左的格式化，右边缘会接触）。
|
在 BFC 中，每个盒子的左外边缘都与包含块的左边缘接触（对于从右到左的格式，右边缘接触）。
|
||||||
|
|
||||||
BFC 中相邻区块级盒子之间的垂直外间距会被折叠。 在[外边距重叠](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_mark_mark_bolsing)上阅读更多内容。
|
BFC 中相邻块级盒子之间的垂直外边距会折叠。阅读更多关于[折叠外边距](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "1dcaea36"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"ca3164e6",
|
||||||
|
"3110af23",
|
||||||
|
"133bf48b",
|
||||||
|
"d680b63f",
|
||||||
|
"14d36a97",
|
||||||
|
"e42ba96a",
|
||||||
|
"e9d604ec",
|
||||||
|
"cfe2dfc0",
|
||||||
|
"870087a3",
|
||||||
|
"62fd75b6",
|
||||||
|
"ad21c00e"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"ca3164e6",
|
||||||
|
"3110af23",
|
||||||
|
"133bf48b",
|
||||||
|
"d680b63f",
|
||||||
|
"14d36a97",
|
||||||
|
"e42ba96a",
|
||||||
|
"e9d604ec",
|
||||||
|
"cfe2dfc0",
|
||||||
|
"870087a3",
|
||||||
|
"62fd75b6",
|
||||||
|
"ad21c00e"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
---
|
---
|
||||||
title: 描述“浮动”及其工作方式。
|
title: 描述 `float` 及其工作原理。
|
||||||
---
|
---
|
||||||
|
|
||||||
Float 是一个 CSS 定位属性。 浮动元素仍然是文档流的一部分，将影响到其他元素的定位（如： 文本将环绕在浮动元素周围）。不同于`position: absolute` 元素，它们将从文档流中删除。
|
Float 是一个 CSS 定位属性。浮动元素仍然是页面流程的一部分，并将影响其他元素的位置（例如，文本将环绕浮动元素），这与 `position: absolute` 元素不同，后者将从页面流程中移除。
|
||||||
|
|
||||||
CSS `clear` 属性可以放置在 `left`/`right`/`both` 浮动元素之下。
|
CSS `clear` 属性可用于定位在 `left`/`right`/`both` 浮动元素下方。
|
||||||
|
|
||||||
如果父元素只包含浮动元素，它的高度将被折叠为零。 可以通过在容器中的浮动元素之后但在关闭容器之前清除浮动来解决。
|
如果父元素只包含浮动元素，则其高度将折叠为零。可以通过在容器中浮动元素之后但在容器关闭之前清除浮动来修复它。
|
||||||
|
|
||||||
## 清浮动技巧
|
## Clearfix hack
|
||||||
|
|
||||||
`.clearfix` 用一个聪明的 CSS [伪元素]\(/questions/quiz/sign-pseudo-elements-and-discussions-what they-are-used-for) (`::after `) 来清除浮动。 不要在父级设置溢出，而是对它应用一个额外的类 `clearfix` 。 然后应用此 CSS ：
|
`.clearfix` hack 使用巧妙的 CSS [伪元素](/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for) (`::after`) 来清除浮动。与其在父元素上设置 overflow，不如为其应用一个额外的类 `clearfix`。然后应用此 CSS：
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.clearfix::after {
|
.clearfix::after {
|
||||||
|
|
@ -22,12 +22,12 @@ CSS `clear` 属性可以放置在 `left`/`right`/`both` 浮动元素之下。
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
或者，， 给`overflow: auto` 或 `overflow: hidden` 属性到父元素, 它将在子元素中建立一个新的块格式化环境, 它将扩展到包含它的子元素.
|
或者，给父元素 `overflow: auto` 或 `overflow: hidden` 属性，它将在子元素内建立一个新的块格式化上下文，它将扩展以包含其子元素。
|
||||||
|
|
||||||
## 琐事
|
## 琐事
|
||||||
|
|
||||||
在过去的好日子里，Bootstrap 2 等 CSS 框架使用`float`属性来实现其网格系统。 然而，随着这些日子的 CSS Flexbox 和 Grid，已不再需要使用 `float` 属性。
|
在过去的日子里，CSS 框架（如 Bootstrap 2）使用 `float` 属性来实现其网格系统。然而，如今有了 CSS Flexbox 和 Grid，不再需要使用 `float` 属性。
|
||||||
|
|
||||||
## 参考资料
|
## 参考
|
||||||
|
|
||||||
- [清浮动: 网页开发的演变课程](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
|
* [Clearfix: A Lesson In Web Development Evolution](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "1d72583b"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"71867e93",
|
||||||
|
"2731af88",
|
||||||
|
"add698fb",
|
||||||
|
"1346321c",
|
||||||
|
"62fd75b6",
|
||||||
|
"9642fcc5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"71867e93",
|
||||||
|
"2731af88",
|
||||||
|
"add698fb",
|
||||||
|
"1346321c",
|
||||||
|
"62fd75b6",
|
||||||
|
"9642fcc5"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
---
|
---
|
||||||
title: 描述伪元素并讨论其用途。
|
title: 描述伪元素并讨论它们的使用。
|
||||||
---
|
---
|
||||||
|
|
||||||
CSS [伪元素](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements) 是一个添加到选择器中的关键词，使您能够修改所选元素的特定部分的样式。 它们可以用于装饰 (`::first-line`, `::first-letter`) 或添加标签元素(结合`content: ...`) 无需修改标签(`:before`, `:after `)
|
CSS [伪元素](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) 是添加到选择器的关键字，可让您设置所选元素特定部分的样式。它们可用于装饰 (`::first-line`, `::first-letter`) 或将元素添加到标记中（与 `content: ...` 结合使用），而无需修改标记 (`:before`, `:after`)。
|
||||||
|
|
||||||
- `::firstline` 和 `::firstletter` 可以用于装饰文本。
|
* `::first-line` 和 `::first-letter` 可用于装饰文本。
|
||||||
- 用于 `.clearfix` 技巧，如上图所示，添加一个带有`clear: both`的零空间元素。
|
* 在上面显示的 `.clearfix` hack 中使用，以添加一个带有 `clear: both` 的零空间元素。
|
||||||
- Tooltips 中的三角箭头使用 `::before` 和 `::after ` 。 鼓励关注点分离，因为三角形被视为样式的一部分，而不是真正的 DOM。
|
* 工具提示中的三角形箭头使用 `::before` 和 `::after`。 鼓励关注点分离，因为三角形被认为是样式的一部分，而不是真正的 DOM。
|
||||||
|
|
||||||
## 备注
|
## 笔记
|
||||||
|
|
||||||
- 伪元素不同于 [伪类](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-classes)，后者用于根据状态(例如`:hover`, `:focus`, 等等) 修改样式。
|
* 伪元素与 [伪类](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) 不同，伪类用于根据元素的*状态*（例如 `:hover`、`:focus` 等）设置元素的样式。
|
||||||
- 应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为旧的 W3C 视图中没有区分这点。
|
* 应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为这种区别在旧版 W3C 规范中并不明确。
|
||||||
|
|
||||||
## 参考资料
|
## 参考
|
||||||
|
|
||||||
- [伪元素-CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements)
|
* [伪元素 - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "64405d09"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"f8ee234b",
|
||||||
|
"41729b4e",
|
||||||
|
"476c6845",
|
||||||
|
"b2f264"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"f8ee234b",
|
||||||
|
"41729b4e",
|
||||||
|
"476c6845",
|
||||||
|
"b2f264"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
---
|
---
|
||||||
title: 描述您喜欢和不喜欢使用的 CSS 预处理器。
|
title: 描述你喜欢和不喜欢你使用过的 CSS 预处理器的地方。
|
||||||
---
|
---
|
||||||
|
|
||||||
## 喜欢
|
## 优点
|
||||||
|
|
||||||
- 主要是[“使用 CSS preprocessors 的优点/缺点?”](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors) 中提到的优势。
|
* 主要是 ["使用 CSS 预处理器的优点/缺点是什么？"](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors) 中提到的优点。
|
||||||
- Less 是用 JavaScript 写的，它在 Nodejs 中很好用。
|
* 编写的 JavaScript 较少，这与 Node 配合得很好。
|
||||||
|
|
||||||
## 不喜欢
|
## 缺点
|
||||||
|
|
||||||
- Sass 依赖 `node-sass`，它是一个 C++ 写的 LibSass 的绑定。 当在 Node.js 版本间切换时，必须经常重新编译库。
|
* Sass 依赖于 `node-sass`，它是用 C++ 编写的 LibSass 的一个绑定。 在 Node.js 版本之间切换时，必须经常重新编译该库。
|
||||||
- 在 Less 中，变量名前缀是`@`, 它可能与原生的 CSS 关键字混淆, 例如`@media`, `@import` 和 `@font-face` 规则。
|
* 在 Less 中，变量名以 `@` 为前缀，这可能会与 `@media`、`@import` 和 `@font-face` 规则等原生 CSS 关键字混淆。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "1d3f31f1"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"800be0a7",
|
||||||
|
"484452a7",
|
||||||
|
"69b0449b",
|
||||||
|
"e2e457bf",
|
||||||
|
"590313ad"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"800be0a7",
|
||||||
|
"484452a7",
|
||||||
|
"69b0449b",
|
||||||
|
"e2e457bf",
|
||||||
|
"590313ad"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
---
|
---
|
||||||
title: 描述 `z-index` 和堆叠上下文是如何形成的。
|
title: 描述 `z-index` 以及如何形成堆叠上下文。
|
||||||
---
|
---
|
||||||
|
|
||||||
CSS 中的`z-index`属性可以控制重叠元素的垂直堆叠顺序。 `z-index`只影响定位元素(`position`值不是`static`的元素) 及其后代或 flex item。
|
CSS 中的 `z-index` 属性控制重叠元素的垂直堆叠顺序。`z-index` 仅影响已定位的元素（具有 `position` 值不为 `static` 的元素）及其后代或 flex 项目。
|
||||||
|
|
||||||
在没有任何`z-index`值的情况下，元素按照它们在 DOM 中出现的顺序堆叠（同一层次中最低的一个出现在上面）。 具有非`static`定位(及其子位置) 的元素总是会出现在默认`static`位置的元素之上，不论 HTML 层次结构如何。
|
在没有任何 `z-index` 值的情况下，元素按照它们在 DOM 中出现的顺序堆叠（在同一层级中，最下面的元素出现在最上面）。具有非静态定位的元素（及其子元素）将始终出现在具有默认静态定位的元素之上，而不管 HTML 层次结构如何。
|
||||||
|
|
||||||
堆叠上下文是一个包含一组图层的元素。 在一个局部堆叠环境中，其子元素的`z-index`值是相对于该元素而不是根 document 设置的。 该上下文之外的层--即局部堆叠上下文的同级元素--不能位于它的层之间。 如果一个元素 B 位于元素 A 的上面，元素 A 的一个子元素 C 永远不会高于元素 B，即使元素 C 的`z-index`比元素 B 高。
|
堆叠上下文是包含一组层的元素。在局部堆叠上下文中，其子元素的 `z-index` 值是相对于该元素设置的，而不是相对于文档根元素。该上下文之外的层——即局部堆叠上下文的同级元素——不能位于其内的层之间。如果元素 B 位于元素 A 的顶部，而元素 A 的子元素 C 永远不能高于元素 B，即使元素 C 的 `z-index` 比元素 B 高。
|
||||||
|
|
||||||
每个堆叠上下文都是自成一体的--在元素的内容被堆叠后，整个元素被认为是按照父堆叠上下文的堆叠顺序。 少数 CSS 属性会触发一个新的堆叠上下文，如小于 1 的 `opacity` 、`filter` 不是 `none` 和 `transform` 不是 `none` 。
|
每个堆叠上下文都是自包含的 - 在元素的content堆叠后，整个元素被认为在父堆叠上下文的堆叠顺序中。少数 CSS 属性会触发新的堆叠上下文，例如 `opacity` 小于 1、不是 `none` 的 `filter` 以及不是 `none` 的 `transform`。
|
||||||
|
|
||||||
_**注意**：究竟是什么让一个元素有资格创建一个堆叠上下文，在这一长串[规则](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)中列出。_
|
***注意**：确切地说，什么使一个元素能够创建堆叠上下文列在这个长长的 [规则](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context) 集中。*
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "5a100115"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"c7e35191",
|
||||||
|
"e282633b",
|
||||||
|
"b2d36211",
|
||||||
|
"f12108f0",
|
||||||
|
"eb5a3e21",
|
||||||
|
"2cafe9e3",
|
||||||
|
"5bec220b",
|
||||||
|
"e73b66f9",
|
||||||
|
"fa4b8826",
|
||||||
|
"e3f2fe37",
|
||||||
|
"38d12026",
|
||||||
|
"4fc5ac64",
|
||||||
|
"9239e58",
|
||||||
|
"2c5aa487",
|
||||||
|
"113c1a1d",
|
||||||
|
"a3287f96",
|
||||||
|
"d3d0ed7e",
|
||||||
|
"a13bc387",
|
||||||
|
"8558e0de",
|
||||||
|
"de231902",
|
||||||
|
"a0aba26c",
|
||||||
|
"e919e98b",
|
||||||
|
"62fd75b6",
|
||||||
|
"2d317c0d"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"c7e35191",
|
||||||
|
"e282633b",
|
||||||
|
"b2d36211",
|
||||||
|
"f12108f0",
|
||||||
|
"eb5a3e21",
|
||||||
|
"2cafe9e3",
|
||||||
|
"5bec220b",
|
||||||
|
"e73b66f9",
|
||||||
|
"fa4b8826",
|
||||||
|
"e3f2fe37",
|
||||||
|
"38d12026",
|
||||||
|
"4fc5ac64",
|
||||||
|
"9239e58",
|
||||||
|
"2c5aa487",
|
||||||
|
"113c1a1d",
|
||||||
|
"a3287f96",
|
||||||
|
"d3d0ed7e",
|
||||||
|
"a13bc387",
|
||||||
|
"8558e0de",
|
||||||
|
"de231902",
|
||||||
|
"a0aba26c",
|
||||||
|
"e919e98b",
|
||||||
|
"62fd75b6",
|
||||||
|
"2d317c0d"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,54 +1,55 @@
|
||||||
---
|
---
|
||||||
title: 在设计或开发多语言站点时你必须注意什么事？
|
title: 设计或开发多语言网站时，您必须注意哪些事项？
|
||||||
---
|
---
|
||||||
|
|
||||||
设计和开发多语种网站是国际化的一部分(i18n)。
|
设计和开发多语言网站是国际化 (i18n) 的一部分。
|
||||||
|
|
||||||
## 搜索引擎优化
|
## 搜索引擎优化
|
||||||
|
|
||||||
- 使用 `<html>` 标签上的 `lang` 属性。
|
* 在 `<html>` 标签上使用 `lang` 属性。
|
||||||
- 在 URL 中包含区域设置(例如 en_US, zh_CN 等)。
|
* 在 URL 中包含语言区域设置（例如 en\_US、zh\_CN 等）。
|
||||||
- 网页应该使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 来告诉搜索引擎，在指定的 `href` 中有另一个页面具有相同的内容，但是对于另一种语言/本地化。
|
* 网页应使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 告诉搜索引擎在指定的 `href` 处有另一个页面，其内容相同，但针对另一种语言/语言区域设置。
|
||||||
|
* 为不匹配的语言使用后备页面。使用“x-default”值：`<link rel="alternate" href="url_for_fallback" hreflang="x-default" />`。
|
||||||
|
|
||||||
## 了解地域与语言之间的区别
|
## 了解语言区域设置与语言的区别
|
||||||
|
|
||||||
地域设置控制您所在区域的数字、日期和时间显示方式：它可能是一个国家，或国家的一部分，甚至可能不尊重国家边界。
|
语言区域设置控制数字、日期和时间的显示方式，适用于您的地区：这可能是一个国家/地区，或一个国家/地区的一部分，甚至可能不遵守国家/地区的边界。
|
||||||
|
|
||||||
## 语言可能因国家而异。
|
## 语言可能因国家/地区而异
|
||||||
|
|
||||||
某些语言，尤其是广为流传的语言在不同国家有不同的“喜好”（语法规则、拼写、字符）。 重要的是要区分目标国家的语言，而不要假定/强制一个国家的语言版本适用于所有讲该语言的国家。 示例：
|
某些语言，尤其是使用广泛的语言，在不同的国家/地区有不同的“风格”（语法规则、拼写、字符）。区分目标国家/地区的语言非常重要，不要假设/强制所有使用该语言的国家/地区都使用该语言的一个国家/地区的版本。示例：
|
||||||
|
|
||||||
- `en`: `en-USA` (美国英文), `en-GB` (英国英文)
|
* `en`：`en-US`（美式英语）、`en-GB`（英式英语）
|
||||||
- `zh`: `zh-CN`(简体中文), `zh-TW`(繁体中文)
|
* `zh`：`zh-CN`（简体中文）、`zh-TW`（繁体中文）
|
||||||
|
|
||||||
## 预测地域，但不限制
|
## 预测语言区域设置，但不要限制
|
||||||
|
|
||||||
服务器可以通过 HTTP 头部`Accept-Language`和 IP 组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用 VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
|
服务器可以通过 HTTP `Accept-Language` 标头和 IP 地址的组合来确定访问者的语言区域设置/语言。有了这些，服务器可以自动为访问者选择最佳语言区域设置。但是，预测并非万无一失（尤其是当访问者使用 VPN 时），并且应允许访问者轻松更改其国家/地区/语言，而不会遇到麻烦。
|
||||||
|
|
||||||
## 考虑不同语言文本长度的差异
|
## 考虑不同语言的文本长度差异
|
||||||
|
|
||||||
某些内容如果用另一种语言写入，可能会更长。 注意设计中的布局或溢出问题。 最好是避免在文字数量会影响设计的情况下进行设计。 字符数量与标题、标签和按钮等事项有关。 对于自由流动的文本，如正文或评论，它们就不是一个问题。 例如，德语和法语等某些语言往往使用比英语长的语言和句子。 如果您不考虑到这一点，可能会导致布局问题。
|
用另一种语言书写时，某些内容可能会更长。在设计中要注意布局或溢出问题。最好避免设计文本量会破坏设计的场景。字符计数会影响标题、标签和按钮等内容。对于自由流动的文本（如正文或评论），它们的影响较小。例如，某些语言（如德语和法语）往往比英语使用更长的单词和句子，如果不考虑这一点，可能会导致布局问题。
|
||||||
|
|
||||||
## 语言阅读方向
|
## 语言阅读方向
|
||||||
|
|
||||||
英语和法语等语言是从左到右、从上到下写的。 但是，有些语言，例如希伯来语和阿拉伯语是从右到左写的。 这可能会影响您站点的布局和页面上元素的位置， 这样你就必须小心设计你的网站，要考虑到不同的文本方向。
|
英语和法语等语言是从左到右、从上到下书写的。但是，希伯来语和阿拉伯语等某些语言是从右到左书写的。这会影响您网站的布局和页面上元素的位置，因此您必须小心设计您的网站，以适应不同的文本方向。
|
||||||
|
|
||||||
## 不要简单地串联翻译后的字符串
|
## 不要连接翻译后的字符串
|
||||||
|
|
||||||
不要做任何类似`"今天的日期为"+日期`的事情。 在语序不同的语言中，它会出现错误。 使用模板字符串加参数替换每种语言。 例如，分别用英文和中文来看看以下两句：`I will travel on {% date %}`，以及`{% date %} 我会出发` 请注意，由于语言的语法规则，变量的位置不同。
|
不要做类似 `"今天的日期是 " + date` 的事情。它会在单词顺序不同的语言中中断。改为对每种语言使用带有参数替换的模板字符串。例如，分别查看英语和中文的以下两句话：`I will travel on {% date %}` 和 `我会在{% date %}出发`。请注意，由于该语言的语法规则，变量的位置不同。
|
||||||
|
|
||||||
## 格式化日期和货币
|
## 格式化日期和货币
|
||||||
|
|
||||||
日历日期有时以不同的方式呈现。 例如： 美国的“May 31, 2012” vs. 欧洲部分地区的"31 May 2012"。
|
日历日期有时以不同的方式呈现。例如，美国为“2012 年 5 月 31 日”，而欧洲部分地区为“2012 年 5 月 31 日”。
|
||||||
|
|
||||||
## 不在图片中放置文本
|
## 不要将文本放在图片中
|
||||||
|
|
||||||
将文本放在位图中（如 png、gif、jpg 等）并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图片文本翻译成其他语言，需要为每种语言创建单独的图片，这不是设计人员的灵活工作流程。
|
将文本放在基于栅格的图像（例如 png、gif、jpg 等）中不是一种可扩展的方法。将文本放在图像中仍然是一种在任何计算机上显示美观的非系统字体的常用方法。但是，为了支持图像文本翻译成其他语言，需要为每种语言创建单独的图像，这对于设计师来说不是一个可扩展的工作流程。
|
||||||
|
|
||||||
## 要注意色彩的感知方式
|
## 注意颜色是如何被感知的
|
||||||
|
|
||||||
不同语言和文化对颜色的看法不同。 设计应适当使用颜色。
|
颜色在不同的语言和文化中被感知的方式不同。设计应适当使用颜色。
|
||||||
|
|
||||||
## 参考资料
|
## 参考资料
|
||||||
|
|
||||||
- [地域和语言之间的区别](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages/)
|
* [区域设置和语言之间的差异](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "b18dffeb"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"d4b071a5",
|
||||||
|
"2a850f8e",
|
||||||
|
"e25efb62",
|
||||||
|
"f27ecce5",
|
||||||
|
"62cccb59",
|
||||||
|
"c5936478",
|
||||||
|
"151ae001",
|
||||||
|
"aae9915a",
|
||||||
|
"964f80df",
|
||||||
|
"c23c6f0d",
|
||||||
|
"62fd75b6",
|
||||||
|
"2a34d635"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"d4b071a5",
|
||||||
|
"2a850f8e",
|
||||||
|
"e25efb62",
|
||||||
|
"f27ecce5",
|
||||||
|
"62cccb59",
|
||||||
|
"c5936478",
|
||||||
|
"151ae001",
|
||||||
|
"aae9915a",
|
||||||
|
"964f80df",
|
||||||
|
"c23c6f0d",
|
||||||
|
"62fd75b6",
|
||||||
|
"2a34d635"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
---
|
---
|
||||||
title: 解释CSS 图片精灵（雪碧图），以及您如何在页面或网站上实现它们。
|
title: 解释 CSS 精灵，以及如何在页面或网站上实现它们。
|
||||||
---
|
---
|
||||||
|
|
||||||
CSS 图片精灵将多个图片合并为一个更大的图片文件，并使用 CSS `background-image`, `background-position` 和 `background-size` 来选择更大图片的特定部分作为所需图片。
|
CSS 精灵将多个图像组合成一个更大的图像文件，并使用 CSS `background-image`、`background-position` 和 `background-size` 的组合来选择更大图像的特定部分作为所需的图像。
|
||||||
|
|
||||||
它曾经是用于图标的一种常用技术(例如，Gmail 使用图片精灵作为其所有图片)。
|
它曾经是一种常用的图标技术（例如 Gmail 对其所有图像都使用精灵图）。
|
||||||
|
|
||||||
## 优点
|
## 优点
|
||||||
|
|
||||||
- 减少多个图片的 HTTP 请求数量 (每张 spritesheet 只需要一个请求)。 但是使用 HTTP2 加载多个图片已不再是一个问题。
|
* 减少多个图像的 HTTP 请求数量（每个精灵表只需要一个请求）。但使用 HTTP2，加载多个图像不再是一个大问题。
|
||||||
- 预先下载在需要之前不会下载的资产，如只会出现在 `:hover` 伪状态上的图片。 闪烁不会被看到。
|
* 预先下载在需要之前不会下载的资产，例如仅在 `:hover` 伪状态下出现的图像。不会看到闪烁。
|
||||||
|
|
||||||
## 实现方式
|
## 如何实现
|
||||||
|
|
||||||
1. 使用图片精灵生成器将多个图片包装成一个图片并生成相应的 CSS
|
1. 使用精灵图生成器将多个图像打包成一个，并为其生成相应的 CSS。
|
||||||
2. 每个图片都有一个对应的 CSS 类，定义了 `background-image` 和 `background-position` 属性。
|
2. 每个图像都将有一个对应的 CSS 类，其中定义了 `background-image` 和 `background-position` 属性。
|
||||||
3. 要使用此图片，请将相应的类添加到您的元素中。
|
3. 要使用该图像，请将相应的类添加到您的元素中。
|
||||||
|
|
||||||
生成的样式表看起来可能像这样：
|
生成的样式表可能如下所示：
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.icon {
|
.icon {
|
||||||
|
|
@ -35,7 +35,7 @@ CSS 图片精灵将多个图片合并为一个更大的图片文件，并使用
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
并且可以像这样用在 HTML 中：
|
并且可以在 HTML 中这样使用：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<span class="icon icon-cart"></span>
|
<span class="icon icon-cart"></span>
|
||||||
|
|
@ -43,6 +43,6 @@ CSS 图片精灵将多个图片合并为一个更大的图片文件，并使用
|
||||||
<span class="icon icon-arrow"></span>
|
<span class="icon icon-arrow"></span>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 参考资料
|
## 参考
|
||||||
|
|
||||||
- [在 CSS 中实现图片精灵 - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
|
* [在 CSS 中实现图像精灵 - CSS：层叠样式表 | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "7b77d48"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"f83c53b8",
|
||||||
|
"17357834"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"f83c53b8",
|
||||||
|
"17357834"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: 解释浏览器如何决定什么元素与 CSS 选择器匹配。
|
title: 解释浏览器如何确定哪些元素与 CSS 选择器匹配。
|
||||||
---
|
---
|
||||||
|
|
||||||
这个问题与[编写高效的 CSS](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css) 的问题有关。 浏览器从最右边（关键选择器）到左边匹配选择器。 浏览器根据关键选择器过滤出 DOM 中的元素，并向上遍历其父元素以确定匹配。 选择器链长度越短，浏览器就能越快确定该元素是否与选择器匹配。
|
这个问题与关于 [编写高效 CSS](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css) 的问题相关。浏览器从最右侧（关键选择器）到左侧匹配选择器。浏览器根据关键选择器过滤 DOM 中的元素，并向上遍历其父元素以确定匹配项。选择器链的长度越短，浏览器确定该元素是否与选择器匹配的速度就越快。
|
||||||
|
|
||||||
例如，使用选择器`p span`， 浏览器先找到所有 `<span>` 元素，然后沿其父元素遍历到根节点以找到`<p>` 元素。 对于一个特定的`<span>`，只要它找到一个`<p>`，它就知道这个`<span>`符合选择器，并可以停止遍历它的父元素。
|
例如，对于选择器 `p span`，浏览器首先找到所有 `<span>` 元素，并向上遍历其父元素，直到根元素，以找到 `<p>` 元素。对于特定的 `<span>`，一旦找到 `<p>`，它就知道 `<span>` 与选择器匹配，并且可以停止遍历其父元素。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "85f5b685"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"215be92",
|
||||||
|
"7e0d48a8",
|
||||||
|
"8d2822b9",
|
||||||
|
"23fcccfa",
|
||||||
|
"78dda8ab",
|
||||||
|
"734d6fd2",
|
||||||
|
"c551fdfe",
|
||||||
|
"2376421f",
|
||||||
|
"483d14e7",
|
||||||
|
"62fd75b6",
|
||||||
|
"e7cb61ab"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"215be92",
|
||||||
|
"7e0d48a8",
|
||||||
|
"8d2822b9",
|
||||||
|
"23fcccfa",
|
||||||
|
"78dda8ab",
|
||||||
|
"734d6fd2",
|
||||||
|
"c551fdfe",
|
||||||
|
"2376421f",
|
||||||
|
"483d14e7",
|
||||||
|
"62fd75b6",
|
||||||
|
"e7cb61ab"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
---
|
---
|
||||||
title: 解释您对盒模型的理解，以及您如何告诉浏览器在 CSS 中渲染您在不同盒模型中的布局。
|
title: 解释你对盒子模型的理解，以及你将如何在 CSS 中告诉浏览器以不同的盒子模型渲染你的布局。
|
||||||
---
|
---
|
||||||
|
|
||||||
CSS 盒模型描述了为文档树中的元素生成的矩形方形盒，并根据视觉格式模型显示。 每个盒都有一个内容区域(例如文本、图片等) 和可选的 `padding`、`border`和`margin `区域。
|
CSS 盒子模型描述了为文档树中的元素生成的矩形框，并根据视觉格式化模型进行布局。每个框都有一个内容区域（例如文本、图像等）和可选的周围 `padding`、`border` 和 `margin` 区域。
|
||||||
|
|
||||||
CSS 盒模型负责计算：
|
CSS 盒子模型负责计算：
|
||||||
|
|
||||||
- 一个块级元素占用多少空间。
|
* 块级元素占据多少空间。
|
||||||
- 边框和/或外边距是否重叠，或折叠。
|
* 边框和/或边距是否重叠或折叠。
|
||||||
- 盒子的尺寸
|
* 盒子的尺寸。
|
||||||
|
|
||||||
## 盒模型规则
|
## 盒子模型规则
|
||||||
|
|
||||||
- 块级元素的尺寸用`width`、`height `、`padding`和`border`来计算。
|
* 块级元素的尺寸由 `width`、`height`、`padding` 和 `border` 计算。
|
||||||
- 如果没有指定 `height` ，块元素将会像它所包含的内容那么高，加上`padding` (除非有浮点，见[描述浮点及其工作方式]\(/questions/quiz/design-floats-and-how -they-work))。
|
* 如果未指定 `height`，则块级元素的高度将与其包含的内容一样高，再加上 `padding`（除非有浮动，对于浮动，请参阅 [描述浮动及其工作原理](/questions/quiz/describe-floats-and-how-they-work)）。
|
||||||
- 如果没有指定`width`，则非`float` 块级元素将展开以适应其父元素缩减`padding`的宽度， 除非它有一个 `max-width` 属性设置，在这种情况下，它不会大于指定的最大宽度。
|
* 如果未指定 `width`，则非 `float`-ed 块级元素将扩展以适合其父元素的宽度减去 `padding`，除非它设置了 `max-width` 属性，在这种情况下，它将不超过指定的最大宽度。
|
||||||
- 某些块级元素 (例如“table”、“figure”和“input”)具有内在或默认的宽限值，不能扩展到填充其母容器的全宽。
|
* 某些块级元素（例如 `table`、`figure` 和 `input`）具有固有的或默认的宽度值，并且可能不会扩展以填充其父容器的整个宽度。
|
||||||
- 注意：`span` 是一个内联元素，没有默认宽度，所以它不会扩展到合适的宽度。
|
* 注意：`span` 是一个内联级元素，没有默认宽度，因此它不会扩展以适应。
|
||||||
- 元素的`height `是由内容的`height `计算的。
|
* 元素的 `height` 由内容的 `height` 计算。
|
||||||
- 元素的 `width` 是由内容的 `width` 计算的。
|
* 元素的 `width` 由内容的 `width` 计算。
|
||||||
- 默认情况(`box-sizing: content-box`), `padding` 和 `border` 都不是元素`width`和`height`的一部分。
|
* 默认情况下 (`box-sizing: content-box`)，`padding` 和 `border` 不属于元素的 `width` 和 `height`。
|
||||||
|
|
||||||
请注意，`margin`不算在盒子的实际尺寸中。 它影响盒子在页面上所占的总空间，但只影响盒子外的空间。 盒子的区域止于 `border`，它不延伸到`margin`。
|
请注意，`margin` 不计入盒子的实际大小。它会影响盒子在页面上占用的总空间，但仅限于盒子外部的空间。盒子的区域在 `border` 处停止——它不会延伸到 `margin` 中。
|
||||||
|
|
||||||
## 其他
|
## 额外
|
||||||
|
|
||||||
查找`box-sizing`属性，它会影响元素的总高度和宽度。
|
查找 `box-sizing` 属性，该属性会影响元素的总高度和宽度的计算方式。
|
||||||
|
|
||||||
- `box-sizing: content-box`：这是`box-sizing`的默认值，并遵守上面的规则。
|
* `box-sizing: content-box`：这是 `box-sizing` 的默认值，并遵守上述规则。
|
||||||
- `box-sizing: border-box`: `width` 和 `height` 将包括内容、内边距和边框，但不包括外边距。 这是一种更直观的思考盒子的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）在全局范围内设置`* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。 请参阅[关于`box-sizing: border-box`的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) 了解更多信息。
|
* `box-sizing: border-box`：`width` 和 `height` 将包括内容、填充和边框，但不包括边距。这是一种更直观的思考盒子模型的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）全局设置 `* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。有关更多信息，请参阅 [关于 `box-sizing: border-box` 的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages)。
|
||||||
|
|
||||||
## 参考资料
|
## 参考
|
||||||
|
|
||||||
- [盒模型 | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
|
* [盒子模型 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "b61e890f"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"6ed9e52a",
|
||||||
|
"edba959e",
|
||||||
|
"9112fe9e"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"6ed9e52a",
|
||||||
|
"edba959e",
|
||||||
|
"9112fe9e"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
title: 您是否曾经使用过网格系统，如果使用的话，您喜欢什么？
|
title: 你是否使用过网格系统，如果使用过，你更喜欢哪种？
|
||||||
---
|
---
|
||||||
|
|
||||||
在 Flex 开始流行之前（大约在 2014 年），基于`float`的网格系统是最可靠的，因为在现有的替代系统（flex、grid）中，它仍然拥有最多的浏览器支持。 Bootstrap 一直在使用`float`方法，直到 Bootstrap 4 转而采用`flex`方法。
|
在 Flex 变得流行之前（大约在 2014 年），基于 `float` 的网格系统是最可靠的，因为它在现有的替代系统（flex、grid）中仍然拥有最多的浏览器支持。Bootstrap 一直使用 `float` 方法，直到 Bootstrap 4 切换到基于 `flex` 的方法。
|
||||||
|
|
||||||
今天，`flex` 是建立网格系统的推荐方法，它有[体面的浏览器支持 (99.64%)](https://caniuse.com/#search=flex)。
|
如今，`flex` 是构建网格系统的推荐方法，并且具有 [不错的浏览器支持 (99.64%)](https://caniuse.com/#search=flex)。
|
||||||
|
|
||||||
对于喜欢冒险的人来说，他们可以看看[CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/)，它使用闪亮的新`grid`属性。 Grid 是一个二维网格布局系统，而 Flexbox 则是一个一维的系统。
|
对于喜欢冒险的人，他们可以研究 [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/)，它使用全新的 `grid` 属性。Grid 是一个基于二维网格的布局系统，而 Flexbox 是一维的。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "819eaa97",
|
||||||
|
"subtitle": "71be4a3e"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"3e8ef961",
|
||||||
|
"934f6feb",
|
||||||
|
"1200e28",
|
||||||
|
"c042e5ca",
|
||||||
|
"db50a4f8",
|
||||||
|
"f169b34c",
|
||||||
|
"82006716"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"3e8ef961",
|
||||||
|
"934f6feb",
|
||||||
|
"1200e28",
|
||||||
|
"c042e5ca",
|
||||||
|
"db50a4f8",
|
||||||
|
"f169b34c",
|
||||||
|
"82006716"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
---
|
---
|
||||||
title: 您是否曾使用视网膜屏幕工作过？
|
title: 你是否使用过视网膜图形？
|
||||||
subtitle: 如果是这样，你是在什么时候使用的，使用了什么技术？
|
subtitle: 如果是，你是什么时候以及使用了什么技术？
|
||||||
---
|
---
|
||||||
|
|
||||||
视网膜 （_Retina_） 只是一个营销术语，指的是高分辨率屏幕，像素比大于 1。 需要了解的关键是使用像素比值表示这些屏幕正在模拟低分辨率屏幕以显示大小相同的元素。 如今，我们认为所有的移动设备都是事实上的视网膜屏幕。
|
*Retina* 只是一个营销术语，指的是像素比大于 1 的高分辨率屏幕。需要知道的关键是，使用像素比意味着这些显示器正在模拟较低分辨率的屏幕，以便以相同的大小显示元素。如今，我们认为所有移动设备都是 *retina* 默认显示器。
|
||||||
|
|
||||||
浏览器默认根据设备分辨率渲染 DOM 元素，但图片除外。
|
默认情况下，浏览器会根据设备分辨率渲染 DOM 元素，但图像除外。
|
||||||
|
|
||||||
为了有最佳视网膜显示的精彩图形，我们需要尽可能使用高分辨率图片。 然而，使用最高分辨率图片将会对性能产生影响，因为更多的字节需要在网络上发送。
|
为了获得清晰、美观的图形，充分利用视网膜显示器，我们需要尽可能使用高分辨率图像。但是，始终使用最高分辨率的图像会影响性能，因为需要通过网络发送更多字节。
|
||||||
|
|
||||||
为了克服这个问题，我们可以使用 HTML5 中指定的响应式图片。 它需要在浏览器中提供同一图片的不同分辨率文件，并让它决定哪个图片是最佳的图片， 使用 html 属性 `srcset` 和可选的 `sizes` ，比如：
|
为了克服这个问题，我们可以使用 HTML5 中指定的响应式图像。它要求向浏览器提供相同图像的不同分辨率文件，并让它决定哪张图像最好，使用 html 属性 `srcset` 和可选的 `sizes`，例如：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div responsive-background-image>
|
<div responsive-background-image>
|
||||||
|
|
@ -27,6 +27,6 @@ subtitle: 如果是这样，你是在什么时候使用的，使用了什么技
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
必须注意，不支持 HTML5 的 `srcset` (即 IE11) 的浏览器会忽略它，而使用 `src` 。 如果我们真的需要支持 IE11 并且我们想要为性能原因提供此功能，我们可以使用 JavaScript polyfill。 例如：[Picturefill](https://scottjehl.github.io/picturefill/)。
|
重要的是要注意，不支持 HTML5 的 `srcset` 的浏览器（即 IE11）将忽略它并使用 `src`。如果我们真的需要支持 IE11 并且出于性能原因希望提供此功能，我们可以使用 JavaScript polyfill，例如 [Picturefill](https://scottjehl.github.io/picturefill/)。
|
||||||
|
|
||||||
对于图标，尽可能使用 SVG，因为无论分辨率如何，它们都会呈现得非常清晰。
|
对于图标，尽可能使用 SVG，因为它们无论分辨率如何都能非常清晰地渲染。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "5de1782d"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"aa260efc",
|
||||||
|
"78aedf23",
|
||||||
|
"77398113"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"aa260efc",
|
||||||
|
"78aedf23",
|
||||||
|
"77398113"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
title: 你玩过新的CSS Flexbox或Grid规范吗？
|
title: 你玩过新的 CSS Flexbox 或 Grid 规范吗？
|
||||||
---
|
---
|
||||||
|
|
||||||
Flexbox 主要用于 1 维布局，而网格则用于 2 维布局。
|
Flexbox 主要用于一维布局，而 Grid 用于二维布局。
|
||||||
|
|
||||||
Flexbox 解决了 CSS 中的许多常见问题，例如在容器内的元素垂直切入、粘滞脚等。 著名的 CSS 框架，例如 Bootstrap 和 Bulma 是基于 Flexbox，而 Flexbox 仍然是创建布局的经过测试和验证的方式。
|
Flexbox 解决了 CSS 中的许多常见问题，例如在容器内垂直居中元素、粘性页脚等。 著名的 CSS 框架，如 Bootstrap 和 Bulma 都基于 Flexbox，Flexbox 仍然是创建布局的经过测试和验证的方法。
|
||||||
|
|
||||||
Grid 是创建网格布局的最直观的方法，但浏览器支持目前并不广泛。 许多布局问题已经可以通过 Flexbox 解决，因此并没有对 Grid 的巨大需求。
|
到目前为止，Grid 是创建基于网格的布局最直观的方法，但目前浏览器支持范围并不广泛。 许多布局问题已经可以用 Flexbox 解决，因此对 Grid 的需求并不大。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "c3938542"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"d6429d55"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"d6429d55"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: 你是否使用或配置过媒体查询或移动端专用布局/CSS？
|
title: 你是否使用或实现了媒体查询或移动设备特定的布局/CSS？
|
||||||
---
|
---
|
||||||
|
|
||||||
一个例子是，在某个断点之后，将一个堆叠的胶囊导航转变为固定底部的标签导航。
|
一个例子是将堆叠的药丸导航转换为超过某个断点的固定底部标签导航。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "e4a39b2e"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"344c7596",
|
||||||
|
"98fda4d0",
|
||||||
|
"ee3b94b9",
|
||||||
|
"d17d2206",
|
||||||
|
"a7f2e06b",
|
||||||
|
"4d11a8d7"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"344c7596",
|
||||||
|
"98fda4d0",
|
||||||
|
"ee3b94b9",
|
||||||
|
"d17d2206",
|
||||||
|
"a7f2e06b",
|
||||||
|
"4d11a8d7"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
---
|
---
|
||||||
title: 你如何提供一个有多国语言内容的页面？
|
title: 如何使用多种语言提供页面内容？
|
||||||
---
|
---
|
||||||
|
|
||||||
> 假设：问题是关于如何为一个有多种语言内容的页面提供服务，而页面内的内容应该只以一种一致的语言显示。
|
> 假设：这个问题是关于如何提供页面内容，这些内容有多种语言版本，并且页面中的内容应该只以一种一致的语言显示。
|
||||||
|
|
||||||
以不同语言提供页面是国际化（i18n）的一个方面。
|
以不同语言提供页面是国际化 (i18n) 的一个方面。
|
||||||
|
|
||||||
当向服务器发出 HTTP 请求时，请求的用户代理（浏览器等）通常发送有关语言首选项的信息，例如在 `Accept-Language ` 标题中。 然后，服务器可以使用这些信息来返回一个适当语言版本的文件，如果有这样的替代品的话。 返回的 HTML 文档还应该声明`<html>`标签中的`lang`属性，例如`<html lang="en">...</html>`。
|
当向服务器发出 HTTP 请求时，请求用户代理通常会发送有关语言偏好的信息，例如在 `Accept-Language` 标头中。然后，如果存在这种备选方案，服务器可以使用此信息以适当的语言返回文档版本。返回的 HTML 文档还应在 `<html>` 标签中声明 `lang` 属性，例如 `<html lang="en">...</html>`。
|
||||||
|
|
||||||
若要让搜索引擎知道不同语言的内容相同，应该使用带有`rel="alternate"` and `hreflang="..."` 属性的的 `<link>` 标签 。 例如， `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`.
|
为了让搜索引擎知道相同的内容有不同的语言版本，应该使用带有 `rel="alternate"` 和 `hreflang="..."` 属性的 `<link>` 标签。例如 `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`。
|
||||||
|
|
||||||
## 渲染
|
## 渲染
|
||||||
|
|
||||||
- **服务器端渲染：** HTML 标记将包含字符串占位符，特定语言的内容将从代码或翻译服务的配置中获取。 服务器然后动态生成带有特定语言内容的 HTML 页面。
|
* **服务器端渲染：** HTML 标记将包含字符串占位符，特定语言的内容将从代码配置或翻译服务中获取。然后，服务器动态生成具有该特定语言内容的 HTML 页面。
|
||||||
- **客户端渲染：** 将获取相应的地域字符串，并与 JavaScript 合并视图。
|
* **客户端渲染：** 适当的区域设置字符串将被提取并与基于 JavaScript 的视图相结合。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "90c0df6a",
|
||||||
|
"subtitle": "f529aa89"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"d87b3100",
|
||||||
|
"d2b9db62"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"d87b3100",
|
||||||
|
"d2b9db62"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
---
|
---
|
||||||
title: 你如何为功能受限的浏览器提供你的网页？
|
title: 您如何为功能受限的浏览器提供页面？
|
||||||
subtitle: 您使用了什么技术/程序？
|
subtitle: 您使用什么技术/流程？
|
||||||
---
|
---
|
||||||
|
|
||||||
## 技术
|
## 技术
|
||||||
|
|
||||||
- 优雅降级：为现代浏览器建立一个应用程序，同时确保它在旧的浏览器中保持功能的做法。
|
* 优雅降级：为现代浏览器构建应用程序，同时确保它在旧浏览器中仍能运行的实践。
|
||||||
- 渐进增强：构建一个基本用户体验应用程序的做法，但在浏览器支持时添加功能增强。
|
* 渐进增强：为基本用户体验构建应用程序，但在浏览器支持时添加功能增强的实践。
|
||||||
- 使用 [caniuse.com](https://caniuse.com/) 来检查功能支持情况。
|
* 使用 [caniuse.com](https://caniuse.com/) 检查功能支持。
|
||||||
- 自动填充供应商前缀的自动修复程序。
|
* Autoprefixer 用于自动插入供应商前缀。
|
||||||
- 使用 [Modernizr](https://moderationr.com/)来检测功能。
|
* 使用 [Modernizr](https://modernizr.com/) 进行功能检测。
|
||||||
- 使用 CSS 特性查询 [`@support`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
|
* 通过 [\`@support\`\`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) 使用 CSS 功能查询
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "1e6d3537"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"40e2f763",
|
||||||
|
"1b0a4829",
|
||||||
|
"734c5228",
|
||||||
|
"818f740a",
|
||||||
|
"3f919b12"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"40e2f763",
|
||||||
|
"1b0a4829",
|
||||||
|
"734c5228",
|
||||||
|
"818f740a",
|
||||||
|
"3f919b12"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
---
|
---
|
||||||
title: 响应设计与自适应设计有何不同？
|
title: 响应式设计与自适应设计有何不同？
|
||||||
---
|
---
|
||||||
|
|
||||||
响应式设计和自适应设计都试图在不同的设备上优化用户体验，针对不同的视口尺寸、分辨率、使用环境、控制机制等进行调整。
|
响应式设计和自适应设计都试图优化不同设备上的用户体验，针对不同的视口大小、分辨率、使用上下文、控制机制等进行调整。
|
||||||
|
|
||||||
响应式设计以灵活性原则为基础――一个能够在任何设备上看起来都很好的流畅的网站。 响应式网站使用媒体查询、灵活的网格和响应性图片来创造一个基于多种因素的弹性和变化的用户体验。 就像一个球在成长或缩小以适应几个不同的环。
|
响应式设计基于灵活性原则——一个可以在任何设备上看起来都不错的单一流畅网站。响应式网站使用媒体查询、灵活的网格和响应式图像来创建一种用户体验，这种体验会根据多种因素进行调整和改变。就像一个球变大或变小以适应几个不同的圆环。
|
||||||
|
|
||||||
自适应设计更像是渐进式增强的现代定义。 自适应设计不是一个灵活的设计，而是检测设备和其他特征，然后根据一组预定的视口尺寸和其他特征提供适当的特征和布局。 站点检测所使用的设备类型，并为该设备提供预设布局。 你有几个不同尺寸的球，而不是一个球来穿过几个不同尺寸的环，而是有几个不同的球来使用，这取决于环的大小。
|
自适应设计更像是渐进增强的现代定义。自适应设计不是一个灵活的设计，而是检测设备和其他功能，然后根据预定义的一组视口大小和其他特征提供适当的功能和布局。该网站检测所使用的设备类型，并为该设备提供预设的布局。与其让一个球穿过几个不同大小的圆环，不如根据圆环的大小使用几个不同的球。
|
||||||
|
|
||||||
这两种方法都有一些需要加以权衡的问题：
|
这两种方法都有一些需要权衡的问题：
|
||||||
|
|
||||||
- 响应式设计可能是相当具有挑战性的，因为你基本上是在使用一个尽管是响应式的布局来适应所有情况。 如何设置媒体查询断点就是这样一个挑战。 您是否使用标准化断点值？ 或者，您是否使用对您的特定布局有意义的断点？ 如果这种布局改变怎么办？
|
* 响应式设计可能非常具有挑战性，因为您本质上是使用一个单一的（尽管是响应式的）布局来适应所有情况。如何设置媒体查询断点就是一个这样的挑战。您是使用标准化的断点值吗？或者，您是使用对您的特定布局有意义的断点吗？如果该布局发生变化怎么办？
|
||||||
- 自适应设计通常需要用户代理嗅探，或 DPI 检测等，所有这些都被证明是不可靠的。
|
* 自适应设计通常需要用户代理嗅探或 DPI 检测等，所有这些都可能被证明是不可靠的。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "66208b9c"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"a42a31eb"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"a42a31eb"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
title: 您将如何解决特定浏览器特有的样式问题？
|
title: 您将如何解决特定于浏览器的样式问题？
|
||||||
---
|
---
|
||||||
|
|
||||||
- 在确定问题和出问题的浏览器后，使用一个单独的样式表，只在使用该特定浏览器时加载。 这种技术需要服务器端渲染。
|
* 在确定问题和有问题的浏览器后，使用仅在特定浏览器使用时加载的单独样式表。但是，此技术需要服务器端渲染。
|
||||||
- 使用像 Bootstrap 这样的库，已经为您处理这些样式问题。
|
* 使用 Bootstrap 等已经为您处理这些样式问题的库。
|
||||||
- 使用 `autoprefixer` 将供应商前缀自动添加到您的代码中。
|
* 使用 `autoprefixer` 自动将供应商前缀添加到您的代码中。
|
||||||
- 使用 Reset CSS 或 Normalize.css.
|
* 使用 Reset CSS 或 Normalize.css。
|
||||||
- 如果您正在使用 PostCSS (或类似的 CSS 转换库)， 可能有一些插件允许您选择使用现代的 CSS 语法(甚至是 W3C 提议)，这些插件将把您代码中的这些部分转换成对应的与后向兼容的代码，这将适用于您使用的目标。
|
* 如果您正在使用 PostCSS（或类似的 CSS 转译库），可能存在允许您选择使用现代 CSS 语法（甚至 W3C 提案）的插件，这些插件会将代码的这些部分转换为等效的向后兼容代码，这些代码将在您使用的目标中起作用。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "95408e6b"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"72ec4d1d"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"72ec4d1d"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: 将 HTML5 视为一个开放的网络平台。 HTML5 由哪些东西构成？
|
title: 将 HTML5 视为一个开放的 Web 平台。HTML5 的构建块是什么？
|
||||||
---
|
---
|
||||||
|
|
||||||
- **语义**：HTML 标签描述内容。
|
* **语义**: HTML 标签描述内容。
|
||||||
- **样式**：自定义 HTML 标签外观
|
* **样式**: 自定义 HTML 标签的外观
|
||||||
- **连接**：以新的和创新的方式与服务器通信。
|
* **连接性**: 以新的和创新的方式与服务器通信。
|
||||||
- **离线和存储**：允许网页在客户端本地存储数据并更有效地离线操作。
|
* **离线和存储**: 允许网页在客户端本地存储数据，并更有效地离线运行。
|
||||||
- **多媒体**：使视频和音频成为开放网络中的一等公民。
|
* **多媒体**: 使视频和音频成为开放 Web 中的一流公民。
|
||||||
- **2D/3D 图形和特效**: 允许更多不同范围的演示选项。
|
* **2D/3D 图形和效果**: 允许更多样化的演示选项。
|
||||||
- **性能** 和集成：提供更高的速度优化和更好地使用计算机硬件。
|
* **性能** 和集成：提供更高的速度优化和更好的计算机硬件使用。
|
||||||
- **设备访问**：允许使用各种输入和输出设备。
|
* **设备访问**: 允许使用各种输入和输出设备。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "d7fcba8e"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"4b8a7a23",
|
||||||
|
"7a700758"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"4b8a7a23",
|
||||||
|
"7a700758"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
title: 您是否有任何理由想使用 `translate()` 而不是 `absolute` 定位，或反之亦然？ 为什么？
|
title: 你是否想使用 `translate()` 而不是 `absolute` 定位，或者反过来？为什么？
|
||||||
---
|
---
|
||||||
|
|
||||||
`translate()` 是 CSS `transform`属性的一个可能值。 当使用 `translate()`时，该元素仍占用其原有空间(类似\`position: relative')。 但是当改变元素的绝对定位时，这些元素会从页面的流程中被移除，周围元素的定位也会受到影响。 因此必须重新计算页面布局。
|
`translate()` 是 CSS `transform` 属性的一个可能值。使用 `translate()` 时，元素仍然占据其原始空间（有点像 `position: relative`）。但是，当更改元素的绝对定位时，元素将从页面流中移除，并且周围元素的位置将受到影响。因此，将不得不重新计算页面布局。
|
||||||
|
|
||||||
更改 `transform` 或 `opacity` 并不会触发浏览器的回流或重绘，而是在合成层单独计算和绘制。 另外改变绝对定位会触发回流。 使用`transform`浏览器会在GPU层中进行渲染，而`absolute`则在CPU层面进行 。 因此，`translate()`是更有效的，并将导致更短的绘制时间，以实现更平滑的动画。
|
更改 `transform` 或 `opacity` 不会触发浏览器回流或重绘，但会触发合成；另一方面，更改绝对定位会触发“回流”。`transform` 会导致浏览器为该元素创建一个 GPU 层，但更改绝对定位属性会使用 CPU。因此，`translate()` 更有效，并且将导致更短的绘制时间，从而实现更流畅的动画。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "fa5d95e6"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"1d1cfd18",
|
||||||
|
"47b5823a",
|
||||||
|
"e93b74d5",
|
||||||
|
"44c5cf06",
|
||||||
|
"69c7169d"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"1d1cfd18",
|
||||||
|
"47b5823a",
|
||||||
|
"e93b74d5",
|
||||||
|
"44c5cf06",
|
||||||
|
"69c7169d"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
---
|
---
|
||||||
title: '`data-`属性有什么用？'
|
title: data- 属性有什么用？
|
||||||
---
|
---
|
||||||
|
|
||||||
在 JavaScript 框架流行之前，开发者使用`data-`属性在 DOM 本身中存储额外的数据，没有其他的技巧，如非标准属性，DOM上的额外属性。 它是为了在没有更合适的属性或元素时将自定义数据私密存储到页面或应用中。
|
在 JavaScript 框架流行之前，开发人员使用 `data-` 属性在 DOM 本身中存储额外的数据，而无需其他技巧，例如非标准属性、DOM 上的额外属性。它旨在存储页面或应用程序专用的自定义数据，当没有更合适的属性或元素时。
|
||||||
|
|
||||||
“data-”属性的另一个常用例子是存储第三方库或框架使用的信息。 例如，Bootstrap 库使用数据属性使`<button>`s 在页面的其他地方触发 modal 的动作（[example](https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes)）。
|
`data-` 属性的另一个常见用例是存储第三方库或框架使用的信息。例如，Bootstrap 库使用数据属性使 `<button>` 在页面上的其他位置触发模态操作 ([示例](https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes))。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
|
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
|
||||||
启动弹窗
|
Launch modal
|
||||||
</button>
|
</button>
|
||||||
...
|
...
|
||||||
<div class="modal fade" id="myModal">弹窗内容</div>
|
<div class="modal fade" id="myModal">Modal contents</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
如今，一般不鼓励使用`data-`属性。 一个原因是用户可以轻松地通过在浏览器中使用“检查元素”来修改数据属性。 数据模型最好存储在 JavaScript 环境中，并通过虚拟 DOM 调和或双向数据绑定（可能通过一个库或一个框架）让它们与 DOM 保持同步。
|
如今，通常不鼓励使用 `data-` 属性。原因之一是用户可以通过在浏览器中使用“检查元素”来轻松修改数据属性。数据模型最好存储在 JavaScript 环境中，并通过虚拟 DOM 协调或双向数据绑定（可能通过库或框架）使它们与 DOM 保持同步。
|
||||||
|
|
||||||
然而，数据属性的一个完全有效的用途，是为**端到端**的测试框架（如 Playwright、Puppeteer、Selenium）添加一个标识符，而不是为主要用于其他目的的测试添加类或 ID 属性。 该元素需要一种被选择的方式，而像`data-test-id="my-element"`这样的东西是一种有效的方式，而不至于扭曲语义标记。
|
但是，数据属性的一个完全有效的用途是为 **端到端** 测试框架（例如 Playwright、Puppeteer、Selenium）添加一个标识符，而无需仅为主要用于其他目的的测试添加类或 ID 属性。该元素需要一种被选择的方式，而类似 `data-test-id="my-element"` 的方式是一种有效的方式，可以在不使语义标记复杂化的前提下实现。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "bd4d46b5"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"6d0b1708",
|
||||||
|
"3962b7fd",
|
||||||
|
"52953744"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"6d0b1708",
|
||||||
|
"3962b7fd",
|
||||||
|
"52953744"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
title: 编写高效的CSS有哪些 "麻烦"？
|
title: 编写高效 CSS 时需要注意哪些“陷阱”？
|
||||||
---
|
---
|
||||||
|
|
||||||
首先，要明白浏览器是从最右边（关键选择器）到左边匹配选择器的。 浏览器根据关键选择器过滤出 DOM 中的元素，并向上遍历其父元素以确定匹配。 选择器链长度越短，浏览器就能越快确定该元素是否与选择器匹配。 因此避免具有标签和通用选择器的关键选择器。 它们与大量的元素相匹配，浏览器将不得不做更多的工作来确定父代是否匹配。
|
首先，了解浏览器从最右侧（关键选择器）到左侧匹配选择器。 浏览器根据关键选择器过滤 DOM 中的元素，并遍历其父元素以确定匹配项。 选择器链的长度越短，浏览器确定该元素是否与选择器匹配的速度就越快。 因此，避免使用标签和通用选择器作为关键选择器。 它们匹配大量元素，浏览器将不得不做更多的工作来确定父元素是否匹配。
|
||||||
|
|
||||||
[BEM（块状元素修饰符）](https://bem.info/)方法论建议所有的东西都有一个单一的类，而且，在你需要层次的地方，也会被烘托到类的名称中，这自然使得选择器高效且易于覆盖。
|
[BEM (Block Element Modifier)](https://bem.info/) 方法建议所有内容都使用单个类，并且在需要层次结构时，将其也融入到类的名称中，这自然使选择器高效且易于覆盖。
|
||||||
|
|
||||||
要注意哪些 CSS 属性[触发](https://csstriggers.com/)回流、重绘和合成。 尽可能避免写入改变布局的样式(触发回流)。
|
注意哪些 CSS 属性会[触发](https://csstriggers.com/)回流、重绘和合成。 尽可能避免编写更改布局（触发回流）的样式。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "ef9812e6"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"e25efb62",
|
||||||
|
"c858c20a",
|
||||||
|
"a11dd609",
|
||||||
|
"c7cbc2dc"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"e25efb62",
|
||||||
|
"c858c20a",
|
||||||
|
"a11dd609",
|
||||||
|
"c7cbc2dc"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
---
|
---
|
||||||
title: 使用CSS 预处理器的优点/缺点是什么？
|
title: 使用 CSS 预处理器的优缺点是什么？
|
||||||
---
|
---
|
||||||
|
|
||||||
## 优点
|
## 优点
|
||||||
|
|
||||||
- CSS 更易维护。
|
* CSS 更易于维护。
|
||||||
- 更容易写入嵌套选择器。
|
* 更容易编写嵌套选择器。
|
||||||
- 具有一致性主题的变量。 可以在不同项目之间共享主题文件。 这不一定适用于 CSS 自定义属性(通常称为 CSS 变量)。
|
* 用于一致主题的变量。可以在不同的项目之间共享主题文件。这不一定对 CSS 自定义属性（通常称为 CSS 变量）有用。
|
||||||
- 用于生成重复的 CSS 的 Mixins
|
* Mixins 用于生成重复的 CSS。
|
||||||
- Sass 和 Less 的功能，如循环、List 和 Map 可以使配置变得更加容易和更加详细。
|
* Sass 和 Less 具有循环、列表和映射等功能，可以使配置更容易且更简洁。
|
||||||
- 在开发过程中将你的代码分割成多个文件。 CSS 文件也可以拆分，但这样做将需要一个 HTTP 请求下载每个 CSS 文件。
|
* 在开发过程中将代码拆分为多个文件。CSS 文件也可以拆分，但这样做需要 HTTP 请求来下载每个 CSS 文件。
|
||||||
|
|
||||||
## 缺点
|
## 缺点
|
||||||
|
|
||||||
- 需要预处理工具。 重新编译时间可能较慢。
|
* 需要用于预处理的工具。重新编译时间可能很慢。
|
||||||
- 无法写入当前可用的 CSS 例如，通过使用 [postcss-loader](https://github.com/postcss/postcss-loader) 与 [webpack](https://github.com/postcss/postcss-loader) 你可以写入潜在的未来兼容的 CSS, 允许你使用诸如 CSS 变量而不是 Sass 变量。 因此，你正在学习新的语法，如果/当它们成为标准化的时候，可能会得到回报。
|
* 没有编写当前和潜在可用的 CSS。例如，通过将 [postcss-loader](https://github.com/postcss/postcss-loader) 与 [webpack](https://webpack.js.org/) 结合使用，您可以编写潜在的未来兼容的 CSS，允许您使用 CSS 变量而不是 Sass 变量。因此，您正在学习新的语法，如果/当它们标准化时，可能会有所回报。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "57d41a39"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"5411a11e",
|
||||||
|
"21c813d1",
|
||||||
|
"e5ceffe8",
|
||||||
|
"67d122bf",
|
||||||
|
"fd063085",
|
||||||
|
"e8b790d1",
|
||||||
|
"6fde64b1",
|
||||||
|
"6c32beca",
|
||||||
|
"97dad212",
|
||||||
|
"90d8282c",
|
||||||
|
"2242fb37",
|
||||||
|
"f6da281a",
|
||||||
|
"db585158",
|
||||||
|
"82c841d8",
|
||||||
|
"671ba0c2",
|
||||||
|
"5d757602",
|
||||||
|
"29499c33",
|
||||||
|
"fb5294a6",
|
||||||
|
"6c5bd951",
|
||||||
|
"9ae97018",
|
||||||
|
"62fd75b6",
|
||||||
|
"b4a5009d"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"5411a11e",
|
||||||
|
"21c813d1",
|
||||||
|
"e5ceffe8",
|
||||||
|
"67d122bf",
|
||||||
|
"fd063085",
|
||||||
|
"e8b790d1",
|
||||||
|
"6fde64b1",
|
||||||
|
"6c32beca",
|
||||||
|
"97dad212",
|
||||||
|
"90d8282c",
|
||||||
|
"2242fb37",
|
||||||
|
"f6da281a",
|
||||||
|
"db585158",
|
||||||
|
"82c841d8",
|
||||||
|
"671ba0c2",
|
||||||
|
"5d757602",
|
||||||
|
"29499c33",
|
||||||
|
"fb5294a6",
|
||||||
|
"6c5bd951",
|
||||||
|
"9ae97018",
|
||||||
|
"62fd75b6",
|
||||||
|
"b4a5009d"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,40 +1,40 @@
|
||||||
---
|
---
|
||||||
title: 有哪些不同的方法可以在视觉上隐藏内容（并使其仅对屏幕阅读器可用）？
|
title: 有哪些不同的方法可以隐藏内容（使其仅对屏幕阅读器可用）？
|
||||||
---
|
---
|
||||||
|
|
||||||
这些技术与无障碍（a11y）有关。
|
这些技术与可访问性 (a11y) 相关。
|
||||||
|
|
||||||
## 小/零尺寸
|
## 小/零尺寸
|
||||||
|
|
||||||
`width: 1px; height: 1px`和使用 CSS clip 的组合，使该元素在屏幕上根本不占（几乎不占）空间。
|
`width: 1px; height: 1px` 并结合使用 CSS clip 使元素在屏幕上几乎不占用任何空间。
|
||||||
|
|
||||||
不建议使用 "width: 0; height; 0"，因为搜索引擎可能会认为它有恶意的意图，比如关键词的填充，而对其进行惩罚。
|
不建议使用 `width: 0; height; 0`，因为搜索引擎可能会因此受到惩罚，认为它有恶意意图，例如关键词堆砌。
|
||||||
|
|
||||||
## 绝对定位
|
## 绝对定位
|
||||||
|
|
||||||
`position: absolute; left: -99999px` 会将元素放置在屏幕之外。 但是，根据[WebAIM 的文章](https://webaim.org/techniques/css/invisiblecontent/)：
|
`position: absolute; left: -99999px` 将把元素定位到屏幕之外。但是，根据 [WebAIM 的文章](https://webaim.org/techniques/css/invisiblecontent/)：
|
||||||
|
|
||||||
> 导航元素，例如链接和表单控制，不应隐藏在屏幕外。 视力正常的键盘用户仍然可以浏览它们，但对他们来说是不可见的，除非它们被设计成在收到键盘焦点时变得可见。
|
> 可导航元素（例如链接和表单控件）不应隐藏在屏幕外。有视觉的用户仍然可以使用键盘导航它们，但除非对它们进行样式设置以使其在接收到键盘焦点时可见，否则他们将看不到它们。
|
||||||
|
|
||||||
仅当你的内容只包含文本时才使用它。
|
仅当您的内容仅包含文本时才使用此方法。
|
||||||
|
|
||||||
## 文本缩进
|
## 文本缩进
|
||||||
|
|
||||||
`text-indent: -9999px`. 这只适用于`block`元素中的文本。 与上面的绝对定位技术类似，被赋予这种风格的可聚焦元素仍将是可聚焦的，这给使用键盘导航的视力正常的用户造成了混乱。
|
`text-indent: -9999px`。这仅适用于 `block` 元素中的文本。与上面的绝对定位技术类似，给定此样式的可聚焦元素仍然可以聚焦，这会给使用键盘导航的视觉用户造成混淆。
|
||||||
|
|
||||||
## 不正确的方法
|
## 错误的方法
|
||||||
|
|
||||||
以下方式是不正确的，因为它们隐藏了用户**和**屏幕阅读器中的内容， 如果目的是只向屏幕阅读器曝光，则是不正确的。
|
以下方法是错误的，因为它们会向用户 **和** 屏幕阅读器隐藏内容，如果目的是仅向屏幕阅读器公开内容，则这是不正确的。
|
||||||
|
|
||||||
- `display: none`
|
* `display: none`
|
||||||
- `visibility: hidden`
|
* `visibility: hidden`
|
||||||
- `hidden`属性
|
* `hidden` 属性
|
||||||
|
|
||||||
## 实用技术
|
## 实际应用中的技术
|
||||||
|
|
||||||
理想的情况是，建议将上述办法结合起来，以确保它在所有浏览器中正常运作。
|
理想情况下，建议结合上述方法，以确保它在所有浏览器中都能正常工作。
|
||||||
|
|
||||||
与其自己实现从渲染树和 a11y 树中删除一个元素的方法，我们建议你使用以下成熟的 CSS 框架中的一种方法，这些方法已经在许多网站上经过了实战检验。
|
建议您使用成熟 CSS 框架中的以下方法之一，而不是实现您自己的从渲染树和 a11y 树中删除元素的方法，这些方法已经在许多网站上经过了实战测试。
|
||||||
|
|
||||||
### Tailwind CSS
|
### Tailwind CSS
|
||||||
|
|
||||||
|
|
@ -71,4 +71,4 @@ title: 有哪些不同的方法可以在视觉上隐藏内容（并使其仅对
|
||||||
|
|
||||||
## 参考资料
|
## 参考资料
|
||||||
|
|
||||||
- [CSS in Action - 屏幕阅读器用户的隐身内容](https://webaim.org/techniques/css/invisiblecontent/)
|
* [CSS in Action - Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "8701ba06"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"1240899a",
|
||||||
|
"f4f053aa"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"1240899a",
|
||||||
|
"f4f053aa"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
title: 有哪些不同的清浮动技术，哪些适合什么情况？
|
title: 有哪些清除浮动的方法？在什么情况下使用哪种方法？
|
||||||
---
|
---
|
||||||
|
|
||||||
- 空 `div` 法: `<div style="clear:both;"></div>`.
|
* 空 `div` 方法：`<div style="clear:both;"></div>`。
|
||||||
- Clearfix 法：参考上面的`.clearfix` 类。
|
* Clearfix 方法：参考上面的 `.clearfix` 类。
|
||||||
- `overflow: auto` 或 `overflow: hidden` 方法: 父级将创建一个新的块格式化上下文并扩展到包含其浮动子项。
|
* `overflow: auto` 或 `overflow: hidden` 方法：父元素将建立一个新的块级格式化上下文，并扩展以包含其浮动的子元素。
|
||||||
|
|
||||||
在大型项目中，具有实用的`.clearfix`类将非常有用。 如果子元素比父元素的更高，`overflow: hidden` 可能会剪切子元素，不是很理想。
|
在大型项目中，拥有一个实用程序 `.clearfix` 类将非常有帮助。如果子元素比父元素高并且不太理想，`overflow: hidden` 可能会剪切子元素。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "b084da42"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"230b5001",
|
||||||
|
"3816d33f",
|
||||||
|
"f27cf58a",
|
||||||
|
"7a77f514"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"230b5001",
|
||||||
|
"3816d33f",
|
||||||
|
"f27cf58a",
|
||||||
|
"7a77f514"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
title: '`DOCTYPE` 是做什么的？'
|
title: '``DOCTYPE`` 是做什么的？'
|
||||||
---
|
---
|
||||||
|
|
||||||
**DOCTYPE** 是**文档类型**的缩写。 DOCTYPE 始终与**DTD**——**文档类型定义**相关。
|
**DOCTYPE** 是 **Document Type（文档类型）** 的缩写。DOCTYPE 总是与 **DTD** - **Document Type Definition（文档类型定义）** 相关联。
|
||||||
|
|
||||||
DTD 定义了某种类型的文档应该如何结构化(例如，“button”可以包含“span”，但不能包含“div”)，而 DOCTYPE 声明了文档应该遵循的 DTD(例如，该文档遵循 HTML DTD)。
|
DTD 定义了特定类型的文档应该如何构建（例如，`button` 可以包含 `span`，但不能包含 `div`），而 DOCTYPE 声明了文档*应该*遵守的 DTD（例如，此文档遵守 HTML DTD）。
|
||||||
|
|
||||||
对于网页，需要 DOCTYPE 声明。 它用于告诉用户代理人您的文档遵循的 HTML 规格的版本。 一旦用户代理识别了一个正确的 DOCTYPE，它将触发与此 DOCTYPE 相匹配的**无询问模式**来读取文档。 如果用户代理无法识别正确的 DOCTYPE，它将触发**查询模式**。
|
对于网页，DOCTYPE 声明是必需的。它用于告诉用户代理您的文档遵守 HTML 规范的哪个版本。一旦用户代理识别出正确的 DOCTYPE，它将触发 **no-quirks mode（非怪异模式）** 来读取文档。如果用户代理无法识别正确的 DOCTYPE，它将触发 **quirks mode（怪异模式）**。
|
||||||
|
|
||||||
HTML5 标准的 DOCTYPE 声明是 `<!DOCTYPE html>` 。
|
HTML5 标准的 DOCTYPE 声明是 `<!DOCTYPE html>`。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "3df96b96",
|
||||||
|
"subtitle": "8ddc05f6"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"39e759d",
|
||||||
|
"f2ca3944",
|
||||||
|
"1158cc92",
|
||||||
|
"4899e8ee",
|
||||||
|
"1342244a",
|
||||||
|
"e25efb62",
|
||||||
|
"af84bd5d",
|
||||||
|
"62fd75b6",
|
||||||
|
"188daa56"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"39e759d",
|
||||||
|
"f2ca3944",
|
||||||
|
"1158cc92",
|
||||||
|
"4899e8ee",
|
||||||
|
"1342244a",
|
||||||
|
"e25efb62",
|
||||||
|
"af84bd5d",
|
||||||
|
"62fd75b6",
|
||||||
|
"188daa56"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,27 +1,27 @@
|
||||||
---
|
---
|
||||||
title: '`* { box-sizing: border-box; }` 是干什么的？'
|
title: '`* { box-sizing: border-box; }` 是什么作用？'
|
||||||
subtitle: 它有什么好处？
|
subtitle: 它有什么优点？
|
||||||
---
|
---
|
||||||
|
|
||||||
`* { box-sizing: border-box; }`使页面上的每个元素都使用 `box-sizing: border-box` 方法来计算元素`height` 和 `width`。
|
`* { box-sizing: border-box; }` 使页面上的每个元素都使用 `box-sizing: border-box` 方法来计算元素的 `height` 和 `width`。
|
||||||
|
|
||||||
## 有什么区别？
|
## 有什么区别？
|
||||||
|
|
||||||
默认情况下，元素应用了 `box-sizing: content-box`，如果一个元素指定了 `height` 和 `width`，那么只有内容尺寸被考虑在内。 `box-sizing: border-box` 会改变计算元素的 `width` 和 `higit`的计算方式，`border` 和 `padding` 也会被包括在计算中。 一个元素的`height`现在是按照内容的`height`+垂直`padding`+垂直`border`宽度计算的。 元素的 `width` 现在是按照内容的 `width` + 水平`padding` + 水平`border` 来计算的。
|
默认情况下，元素应用了 `box-sizing: content-box`，如果一个元素指定了 `height` 和 `width`，则只计算内容大小。`box-sizing: border-box` 改变了元素的 `width` 和 `height` 的计算方式，`border` 和 `padding` 也被包含在计算中。现在，一个元素的高度由内容的 `height` + 垂直 `padding` + 垂直 `border` 宽度计算。一个元素的宽度现在由内容的 `width` + 水平 `padding` + 水平 `border` 宽度计算。
|
||||||
|
|
||||||
下表显示当属性具有相应的 `box-sizing`时，是否计算包含在元素的高度和宽度：
|
下表指示了当属性具有各自的 `box-sizing` 时，该属性是否包含在元素的 height 和 width 的计算中：
|
||||||
|
|
||||||
| 属性 | `box-sizing: content-box` (默认) | `box-sizing: border-box` |
|
| 属性 | `box-sizing: content-box` (默认) | `box-sizing: border-box` |
|
||||||
| --------- | -------------------------------- | ------------------------ |
|
| --------- | ----------------------------------- | ------------------------ |
|
||||||
| 内容 | 是 | 是 |
|
| content | 是 | 是 |
|
||||||
| `padding` | 否 | 是 |
|
| `padding` | 否 | 是 |
|
||||||
| `border` | 否 | 是 |
|
| `border` | 否 | 是 |
|
||||||
| `margin` | 否 | 否 |
|
| `margin` | 否 | 否 |
|
||||||
|
|
||||||
## 优点
|
## 优点
|
||||||
|
|
||||||
将 `padding` 和 `border` 作为盒子模型的一部分来考虑，更符合设计师对网格中内容的实际想象。 这是一种更直观的思考盒子的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）在全局范围内设置`* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。
|
将 `padding` 和 `border` 考虑为盒子模型的一部分，这与设计师在网格中实际想象内容的方式更吻合。这是一种更直观的思考盒子的方式，因此许多 CSS 框架全局设置 `* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。
|
||||||
|
|
||||||
## 参考资料
|
## 参考
|
||||||
|
|
||||||
- [Box Sizing | CSS-Tricks](https://css-tricks.com/box-sizing/)
|
* [Box Sizing | CSS-Tricks](https://css-tricks.com/box-sizing/)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "9378c0ce",
|
||||||
|
"subtitle": "fe8c830"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"48e199bc"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"48e199bc"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: 您在本地或在生产中使用了哪些现有的 CSS 框架？
|
title: 您在本地或生产中使用了哪些现有的 CSS 框架？
|
||||||
subtitle: 你将如何改变/改进它们？
|
subtitle: 您将如何更改/改进它们？
|
||||||
---
|
---
|
||||||
|
|
||||||
- **Bootstrap**：缓慢的发布周期。 Bootstrap 4 已经在 alpha 上停留近两年。 未来版本的 Bootstrap 应该包含一个 loading 按钮组件，因为它被广泛使用。
|
* **Bootstrap**: 发布周期慢。Bootstrap 4 已经处于 alpha 状态将近 2 年。Bootstrap 的未来版本应该包含一个微调器按钮组件，因为它被广泛使用。
|
||||||
- ** Semantic UI**：源代码结构使得主题定制极难理解。 它的非常规主题系统是一种需要定制的痛苦。 在第三方库中硬编码的配置路径。 不像 Bootstrap 那样为覆盖变量而精心设计。
|
* **Semantic UI**: 源代码结构使得主题定制极难理解。它非传统的主题系统难以定制。供应商库中硬编码的配置路径。不像 Bootstrap 那样，不擅长覆盖变量。
|
||||||
- **Bulma**: 需要许多非语义和多余的类和标记。 非后向兼容。 升级版本会以隐蔽的方式破坏应用程序。
|
* **Bulma**: 需要大量非语义和多余的类和标记。不向后兼容。升级版本会以微妙的方式破坏应用程序。
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"frontmatter": {
|
||||||
|
"title": "cf4a5fe8"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"source": {
|
||||||
|
"locale": "en-US",
|
||||||
|
"hashes": [
|
||||||
|
"5db214c4",
|
||||||
|
"7e17674c",
|
||||||
|
"d30d76b2",
|
||||||
|
"cb872b3c",
|
||||||
|
"c9096de5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"targets": {
|
||||||
|
"zh-CN": [
|
||||||
|
"5db214c4",
|
||||||
|
"7e17674c",
|
||||||
|
"d30d76b2",
|
||||||
|
"cb872b3c",
|
||||||
|
"c9096de5"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
---
|
---
|
||||||
title: CSS 选择器的优先级以及它是如何工作的？
|
title: 什么是 CSS 选择器特异性以及它是如何工作的？
|
||||||
---
|
---
|
||||||
|
|
||||||
浏览器根据 CSS 规则的优先级决定在元素上显示哪种样式。 我们假定浏览器已经确定了匹配某个元素的规则。 在匹配的规则中，每条规则的具体性、四个逗号分开的数值 `a, b, c, d` 是根据以下因素计算出来的：
|
浏览器根据 CSS 规则的特异性来确定在元素上显示哪些样式。我们假设浏览器已经确定了与特定元素匹配的规则。在匹配的规则中，根据以下内容计算每个规则的特异性，四个逗号分隔的值 `a, b, c, d`：
|
||||||
|
|
||||||
1. `a`是指是否正在使用内联样式。 如果属性声明是元素上的内联样式，`a`是 1，否则是 0。
|
1. `a` 是指是否使用了内联样式。如果属性声明是元素上的内联样式，则 `a` 为 1，否则为 0。
|
||||||
2. `b` 是 ID 选择器的数量。
|
2. `b` 是 ID 选择器的数量。
|
||||||
3. `c` 是类、属性和伪类选择器的数量。
|
3. `c` 是类、属性和伪类选择器的数量。
|
||||||
4. `d`是标签和伪元素选择器的数量。
|
4. `d` 是标签和伪元素选择器的数量。
|
||||||
|
|
||||||
由此产生的优先级不是一个数字分数，而是一个数组数值，可以按列进行比较。 在比较选择器以确定哪个选择器具有最高的优先级时，从左到右，比较每一列的最高值。 所以`b`列中的值将覆盖`c`和`d`中的值，不管它们可能是什么。 因此，`0, 1, 0, 0` 的优先级将大于 `0, 0, 10, 10`。
|
结果特异性不是单个数值分数，而是一个可以逐列比较的值数组。当比较选择器以确定哪个选择器的特异性最高时，从左到右查看，并比较每列中的最高值。因此，`b` 列中的值将覆盖 `c` 和 `d` 列中的值，无论它们可能是什么。因此，`0, 1, 0, 0` 的特异性将大于 `0, 0, 10, 10`。
|
||||||
|
|
||||||
在同等优先级的情况下：最新的规则是重要的。 如果你在你的样式表中写了两次相同的规则（不管是内部的还是外部的），那么你的样式表中较低的规则更接近于要作用的元素，它被认为是更优先的，因此将被应用。
|
在特异性相等的情况下：最新的规则是有效的规则。如果您在样式表中编写了相同的规则（无论内部还是外部）两次，那么样式表中较低的规则更接近要设置样式的元素，它被认为是更具体的，因此将被应用。
|
||||||
|
|
||||||
比较好的做法是书写优先级低的 CSS 规则，这样在必要时可以很容易地被覆盖。 在编写 CSS UI 组件库代码时，重要的是它们要有较低的优先级，这样库的使用者就可以覆盖它们，而不必仅仅为了提高优先级而使用太复杂的 CSS 规则，或`!important`。
|
编写低特异性的 CSS 规则是一个更好的做法，这样如果需要，它们可以很容易地被覆盖。在编写 CSS UI 组件库代码时，重要的是它们具有较低的特异性，以便库的用户可以覆盖它们，而无需使用过于复杂的 CSS 规则，仅仅是为了增加特异性或求助于 `!important`。
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue