7个开放式的前端面试题

悠悠 2022-03-06 05:30 277阅读 0赞

> 翻译：疯狂的技术宅  
> 原文： [https://www.indeed.com/hire/i...][https_www.indeed.com_hire_i...]

不管你是面试官还是求职者，里面的思路都能让你获益匪浅。

## 如何保证你的网站或 Web 应用的可访问性？ ##

#### 解析： ####

前端开发人员在为最终用户设计体验时需要充分掌控其可用性和可访问性。这个问题让面试官知道求职者对这些标准和最佳实践的了解。

#### 面试官想要知道些什么： ####

*  实施可用性和可访问性标准的第一手经验
 *  保证可访问性的手段
 *  求职者是否曾经在项目中对可用性和可访问性做过实施

#### 参考答案： ####

我在各种浏览器和设备上测试我的 Web 应用，检查在所有设备上的体验是否可用。我还使用流行的屏幕阅读软件和其他辅助解决方案来查看是否所有潜在用户都可以访问它。”

## 你最喜欢 HTML5 的哪些功能，以及如何在前端项目中实现？ ##

#### 解析： ####

前端开发会在 HTML5 上花费大量时间，他们整合 Web 设计并实现各种功能，从而节省开发时间并改进最终产品。

#### 面试官想要知道些什么： ####

*  深入了解 HTML5 功能
 *  能够清楚的解释求职者在过去的项目中是如何使用HTML5的
 *  对 HTML5 的创造性应用

#### 参考答案： ####

与以前的版本相比，我喜欢 HTML5 对多媒体的支持。我使用此功能开发时，会把视频和音频作为用户体验的重要组成部分，而不必担心它无法正确加载或破坏页面。

## 如何对 CSS 和 JavaScript 代码进行组织，以使其他开发人员更容易使用？ ##

#### 解析： ####

前端开发人员经常会处理由以前的员工创建的代码，或作为团队的一员工作。这个问题让面试官了解求职者能不能创建其他员工可以理解的网站或 Web 应用。

#### 面试官想要知道些什么： ####

*  具有组织代码和注释代码的经验
 *  如果没有对代码进行恰当的注释会发生什么后果
 *  愿意让开发团队其他成员更轻松

#### 参考答案： ####

我把站点的每个组件都分拆出了独立的代码。每个代码片段都有注释，以便其他开发人员可以更改它。

## 你能解释一下 CSS float 的概念并举例吗？ ##

#### 解析： ####

该技术问题考察面试者对常见 CSS 元素的理解。这个问题用来筛选求职者，并确保他们不只是能够熟练使用 CSS 的好办法。

#### 面试官想要知道些什么： ####

*  CSS float 的具体定义是什么
 *  求职者是怎样在他们的代码中使用此元素的
 *  是否能够向任何人解释这一技术概念

#### 参考答案： ####

CSS float 告诉浏览器将特定元素放在容器的右侧或左侧。当我开发基于用户分辨率动态调整大小的页面时，使用float。”

## 你是怎样处理特定浏览器的渲染问题的？你是否发现某个浏览器比其他浏览器更具挑战性？ ##

#### 解析： ####

基于每个浏览器的渲染的方式，前端开发人员必须将特定于浏览器的 hack 引入Web 应用和页面。对于求职者来说，这个常见的过程应该是比较熟悉的。

#### 面试官想要知道些什么： ####

*  针对特定浏览器的解决方法示例
 *  了解浏览器如何呈现应用和页面
 *  了解特定浏览器的特点

#### 参考答案： ####

我经常需要修改 Microsoft Edge 网页上的 DIV 位置。对于我来说，这个浏览器是最有问题的，因为我几乎不会在 Chrome 或 Firefox 上遇到这类问题。

## 你通过哪些途径来了解最新的前端技术？ ##

#### 解析： ####

前端开发中的技术和标准在不断变化。拥有“持续学习”能力的求职者可以通过不断的学习，来获取改进开发过程和改善最终用户体验的方法。

#### 面试官想要知道些什么： ####

*  求职者都读过什么技术书籍
 *  是否参与开源项目或个人有什么开源项目
 *  是否参加继续教育或在线课程

#### 参考答案： ####

我有订阅了几个前端开发方面的杂志，并经常访问 Stack Overflow 论坛。这些资源帮助我了解前端开发的最新技术。

## 你最喜欢的前端项目是什么？为什么？ ##

#### 解析： ####

这个问题可让面试官深入了解前端开发人员的个人偏好。一些求职者可能更倾向网站项目，而其他人更喜欢参与Web 应用团队。

#### 面试官想要知道些什么： ####

*  对他们最喜欢的发展方向的见解
 *  他们描述该项目时表现出的热情
 *  他们最喜欢的前端项目的案例

#### 参考答案： ####

我最近为当地医院开发了一个网络应用。它简化了患者的求医过程，当我知道自己的工作能帮助患者更快地获得所需的帮助时非常开心。

--------------------

### 欢迎继续阅读本专栏其它高赞文章： ###

*  [12个令人惊叹的CSS实验项目][12_CSS]
 *  [世界顶级公司的前端面试都问些什么][Link 1]
 *  [CSS Flexbox 可视化手册][CSS Flexbox]
 *  [过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！][JavaScript]
 *  [从设计者的角度看 React][React]
 *  [CSS粘性定位是怎样工作的][CSS]
 *  [一步步教你用HTML5 SVG实现动画效果][HTML5 SVG]
 *  [程序员30岁前月薪达不到30K，该何去何从][30_30K]
 *  [第三方CSS安全吗？][CSS 1]
 *  [谈谈super(props) 的重要性][super_props_]

--------------------

#### 本文首发微信公众号：jingchengyideng ####

#### 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章 ####

![欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章][4275054415-59770ff1d8013_articlex]

--------------------

[https_www.indeed.com_hire_i...]: https://www.indeed.com/hire/interview-questions/front-end-developer
[12_CSS]: https://segmentfault.com/a/1190000018036227
[Link 1]: https://segmentfault.com/a/1190000017949080
[CSS Flexbox]: https://segmentfault.com/a/1190000018056228
[JavaScript]: https://segmentfault.com/a/1190000018088062
[React]: https://segmentfault.com/a/1190000018141328
[CSS]: https://segmentfault.com/a/1190000018113832
[HTML5 SVG]: https://segmentfault.com/a/1190000017977613
[30_30K]: https://segmentfault.com/a/1190000018224157
[CSS 1]: https://segmentfault.com/a/1190000017982432
[super_props_]: https://segmentfault.com/a/1190000018084870
[4275054415-59770ff1d8013_articlex]: /images/20220306/daa2c7696a0341b8bf0803f0f43f023b.png