前端面试：7个让你受益匪浅的开放式面试题

布满荆棘的人生 2022-03-01 00:05 253阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

今天，给大家讲一下7个很好的开放式面试题。

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

如何保证你的网站或 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 应用团队。

面试官想要知道些什么：

对他们最喜欢的发展方向的见解

他们描述该项目时表现出的热情

他们最喜欢的前端项目的案例

参考答案：

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

**你可能感兴趣的**

*  [黑科技！Fundebug支持网页录屏!][Fundebug 1]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 1]
 *  [不要争了！技术选择没那么重要][Link 2]

[Fundebug]: https://www.fundebug.com/
[Fundebug 1]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 1]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 2]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/