2018-02-06

前端工作面试问题

本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些，就能帮助你考查候选者是否具备所需要的技能。

备注： 这些问题中很多都是开放性的，可以引发有趣的讨论。这比直接的答案更能体现此人的能力。

目录

1. 常见问题
2. HTML 相关问题
3. CSS 相关问题
4. JS 相关问题
5. 测试相关问题
6. 效能相关问题
7. 网络相关问题
8. 代码相关问题
9. 趣味问题

参与协作

1. 贡献者
2. 如何参与贡献
3. 许可协议

常见问题：

• 你在昨天/本周学到了什么？
• 编写代码的哪些方面能够使你兴奋或感兴趣？
• 你最近遇到过什么技术挑战？你是如何解决的？
• 在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？
• 请谈谈你喜欢的开发环境。
• 你最熟悉哪一套版本控制系统？
• 你能描述当你制作一个网页的工作流程吗？
• 假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?
• 你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?
• 你如何对网站的文件和资源进行优化？
• 浏览器同一时间可以从一个域名下载多少资源？
  • 有什么例外吗？
• 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
• 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
• 请写一个简单的幻灯效果页面。
• 如果今年你打算熟练掌握一项新技术，那会是什么？
• 请谈谈你对网页标准和标准制定机构重要性的理解。
• 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？
• 请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)。
• 请解释 CSS 动画和 JavaScript 动画的优缺点。
• 什么是跨域资源共享 (CORS)？它用于解决什么问题？

HTML 相关问题：

• doctype(文档类型) 的作用是什么？
• 浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
• HTML 和 XHTML 有什么区别？
• 如果页面使用 'application/xhtml+xml' 会有什么问题吗？
• 如果网页内容需要支持多语言，你会怎么做？
• 在设计和开发多语言网站时，有哪些问题你必须要考虑？
• 使用 data- 属性的好处是什么？
• 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
• 请描述 cookies、sessionStorage 和 localStorage 的区别。
• 请解释