57 lines
4.1 KiB
Plaintext
57 lines
4.1 KiB
Plaintext
---
|
||
title: 前端面试测验题——如何准备
|
||
description: 准备测验式前端面试问题的指南——预期情况，需要学习的概念，以及100多个重要的练习题。
|
||
---
|
||
|
||
测验题，也称为问答题，是用于测试您对领域了解的短小封闭式问题。 每个问题不应花费超过一两分钟的时间来回答，不过，您的回答可能会引发进一步的讨论。 因此，重要的是要对您所给出的答案背后的概念有良好的理解，而不是盲目地背诵和复述。
|
||
|
||
## 示例
|
||
|
||
- [解释 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)
|
||
- [`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)
|
||
|
||
除了要求您了解前端基础知识（HTML、CSS、JavaScript），如果您声称了解某些具体框架，面试官也可能就相关问题向您询问（无论是面试时口头提问还是确认您的简历时）：
|
||
|
||
- X 技术解决了哪些问题？
|
||
- X 技术的优点和缺点是什么？
|
||
- X 技术的底层是如何工作的？
|
||
- X 技术与 Y 技术有何区别？
|
||
|
||
## 相关环节
|
||
|
||
通常不会有面试只问测验式问题的环节。 但是，在专注于其他格式（如编码和系统设计）的面试中，面试官可能会向您提问测验式问题。
|
||
|
||
- **招聘专员电话**: 由于测验式问题的封闭性质，甚至非技术人员（如招聘专员）也可以提出测验式问题。 值得庆幸的是，非工程师可能无法评估准确性，并且可能只是将您的答案中的关键字与解决方案进行匹配。 在最糟糕的情况下，只要回复听起来合理并包含正确关键字的内容，您可能仍然能够通过。
|
||
- **在线评估**: 虽然不常见，但有可能您会被要求回答多选题并从中选择正确答案。
|
||
- **编码环节**: 面试官可能会在开始任何编码之前向您询问一些测验式问题以热身。 或者当您编写和解释代码时，面试官可能想进一步了解您刚才提到的某些内容。 因此，最好对您说/做的一切有良好的理解。
|
||
- **系统设计环节**: 就像在编码环节一样，面试官可以就您所说的东西进一步提问。
|
||
- **招聘经理环节**: 招聘经理环节通常不涉及技术，但他们可能会查看您的简历，并就其中提到的技术/项目向您提出相关的测验式问题。
|
||
|
||
正如您所看到的，您几乎可以在任何可能的环节中都会被问及测验式问题。 随时做好准备。
|
||
|
||
## 重要概念
|
||
|
||
| 领域 | 主题 |
|
||
| --- | --- |
|
||
| HTML | 语义化 HTML，块级元素和行内元素，`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`，表单验证/提交 |
|
||
| CSS | 盒模型，选择器，优先级，定位，单位，Flexbox，Grid，媒体查询 |
|
||
| JavaScript | 数据类型，作用域，闭包，`this`，变量声明（`var`、`let`、`const`），数组方法，对象方法，Promise，类，异步/等待 |
|
||
| DOM | DOM 创建/操作/遍历，事件冒泡/捕获，事件委托 |
|
||
| 运行时 API | `fetch`，存储（`localStorage`、`sessionStorage`），定时器（`setTimeout`、`setInterval`） |
|
||
|
||
## 提示
|
||
|
||
有许多要涵盖的概念，可能会让您感到非常压抑。 好消息是，深入学习这些概念将使您成为一名更好的前端工程师，无论您是否正在积极面试。
|
||
|
||
我们不建议记忆测验式问题的答案。 最好真正理解每个问题的解决方案，并在项目中使用它们获得一些实际经验，因为通常通过实践学习更容易。
|
||
|
||
## 练习题
|
||
|
||
GreatFrontEnd 的列表中包含 100 多个常见测验式问题，每个问题都有详细的解决方案。
|
||
|
||
- [JavaScript 测验式问题](/questions/js/quiz)
|
||
- [HTML 测验式问题](/questions/html/quiz)
|
||
- [CSS 测验式问题](/questions/css/quiz)
|