魔法哥 2013 前端笔试题曝光（附完整解答）

简介

这是我在 2013 年整理的一套笔试题，用于在面试前快速判断候选人的综合素质，要么快速了断，要么为后续的面谈提供切入点。为满足 “快速” 的要求，题型以选择题为主，确保候选人可以在 30 分钟内做完。

显然，其中有些内容已经过时了。尽管如此，我相信这套题还是有一定的参考价值，今天完全公开。我会在每道题后面附上出题意图、解题思路、参考答案或评分标准。

如何评分

试卷共包含 20 道题，每题 5 分，总分 100 分。候选人得分达到 50 分即可初步判定为中级前端工程师。（其实不需要等总分累计出来，在批卷过程中就能作出判断了，得分是给 HR 看的。）

如果你有兴趣的话，可以遮住答案自己做一遍，然后记一下分。

HTML

1、在编写 HTML 4.01 文档时，以下哪几种写法是符合规范的？＿＿＿（选择）
在编写 XHTML 文档时，以下哪几种写法是符合规范的？＿＿＿（选择）
在编写 HTML 5 文档时，以下哪几种写法是符合规范的？＿＿＿（选择）

• A. <input type="text" name="username" />
• B. <input type="text" name="username">
• C. <input type=text name=username>
• D. <INPUT TYPE="text" NAME="username">

出题意图：这道题在现在看来已经严重过时了，有点 “回字的几种写法” 的味道。当时是想考察候选人对 HTML 语法演进的了解，答错也没关系。

解题思路：现在已经没 HTML 4.01 和 XHTML 什么事儿了，略过，我们主要来看 HTML5。HTML5 的设计原则是尊重现状、保持良好的向后兼容性，所以以上四种写法都是合法的。

2、DTD 是什么？有什么作用？（简答）

出题意图：DTD 是 HTML 规范中比较基础的部分，正经学过 HTML 的人应该都能答得上来一两句。

解题思路：

• 首先要说字面的意思，DTD 全称 “Document Type Definition”，即文档类型定义。它源于 XML 规范，用于定义当前文档中的元素、元素的属性、元素之间的结构关系等基本规则。（可惜绝大多数候选人往往说不清楚这一条。）
• 接下来要说一下 DTD 怎么写，现在一般用哪种 DTD。（由于涉及工作实践，大多数人都可以答出这一条。）
• 最后要说 DTD 对浏览器渲染模式的影响。（少部分人能够提及这一点。如果能讲清楚浏览器的 “标准模式” 和 “怪癖模式” 无疑是加分的。）

3、<label> 标签的作用是什么？（简答）

出题意图：如果能答好这一题，说明候选人对 HTML 表单有不错的理解。而表单是 HTML 最基本的交互功能，前端工程师必须深入掌握。

解题思路：

• 首先，还是从字面意思说起。顾名思义，label 是 “标签” 的意思。
• 然后谈作用。在 HTML 中，<label> 标签用于补充描述表单控件，以提供更好的体验（包括阅读上的体验和交互上的体验）和可访问性（对盲人用户更友好）。

4、哪些标签在 HTML 4.01 规范中已经被弃用？（选择）

• A. <em>
• B. <b>
• C. <center>
• D. <iframe>
• E. <font>
• F. <strong>

出题意图：这道题略过时。试图考察候选人对 HTML 规范演进的了解，以及 “语义” 的概念。

评分标准：只要能把纯粹表达样式的标签挑出来就行了，不需要完全正确。其实我自己也不能完全记清楚；而且在 HTML5 中像 <b> 这样原本只表达样式的标签又被赋于了新的语义。

5、在 HTML5 中，表单输入控件（<input> 标签）新增的类型有哪些？（简答）

出题意图：考察候选人对表单的关注、对 HTML5 规范的了解。

参考答案：number、email、tel、url、range、color 等。

评分标准：每正确写出一项即可得 1 分，封顶 5 分。

CSS

1、为 HTML 页面加载外部的 CSS 文件，有哪些方式？（简答）

出题意图：考察常规实践、对 CSS 规范的了解。

解题思路：

• 先说最常见、最普通的：通过 <link> 标签的 href 属性引入一个外部的 CSS 文件，同时 <link> 标签需要包含 rel="stylesheet" 属性。（能清晰完整答出这一点，可以得 3 分。）
• 再说冷门一些的：在 <style> 标签中使用 @import 指令也可以引入一个外部的 CSS 文件。
• 最后扩散一下：通过 JS 生成上述标签也可以达到相同效果。

2、当应用了 p {margin: 10px 0;} 这条样式之后，两个相邻段落的垂直距离是多少？（选择）

• A. 0px
• B. 10px
• C. 20px
• D. 40px

出题意图：考察 CSS 实践中常见的 “外边距重叠” 现象。这道题忽略了一些前提（比如文本方向、p 身上的是否存在其它样式等），但候选人应该可以领会这道题的考点。

参考答案：B

3、CSS Sprites 有哪些优点和缺点？（简答）

出题意图：这是一道主观题，考察候选人在实践中的经验和思考。如果候选人在这里一个字都没有写，在排除耍大牌的可能性之后，可以直接送走。

参考答案：

• 优点：把对多张图片的请求合为一次，减少请求数，有益于前端性能；有预加载效果，有益于用户体验。
• 缺点：合并图片的制作成本和维护成本较高。

4、当不再需要支持 IE6/7 时，我们可以放心地使用哪些 CSS 技术？（简答）

出题意图：这道题稍显过时，但在当时很有现实意义。在国内的用户环境下，前端工程师不得不花费大量的精力跟旧版浏览器缠斗，但切不可局限于此、忽略对新技术的了解和实践。

解题思路：IE8 基本支持 CSS 2.1 的所有特性，因此在 IE6/7 下无法使用的 CSS 2.1 特性都可以列举出来。比如 :before 和 :after 伪元素、display: table-cell、outline 等。此外，IE8 甚至支持 CSS3 的 box-sizing 属性。

5、CSS3 的新增功能有哪些？（选择）

• A. Web Font
• B. Media Query
• C. Local Storage
• D. 960 Grid System
• E. CSS Reset
• F. Data URI
• G. :before / :after Pseudo Element

出题意图：考察候选人对 CSS3 的了解。喜欢在简历上堆名词？没问题，先来给这些词分分类吧。

解题思路：其实也没啥思路，如果持续关注 CSS 规范，这道题并不难。不要求完全答对，但如果把 “实践”（比如 960 Grid System 和 CSS Reset）跟 “规范” 混淆就不应该了。

JavaScript

1、如何用 JavaScript 获取 ID 为 abc 的 DOM 元素？（请写代码）

出题意图：最最基本的 DOM 操作了吧。答不上来可以直接送走了。

评分标准：同时写出 DOM 原生 API 和基于类库的方法可以拿满 5 分。

2、jQuery 提供的与 Ajax 相关的 API 有哪些？特点分别是什么？（简答）

出题意图：考察对 jQuery 的熟悉程度。

解题思路：jQuery 最常用的 Ajax API 可以为分三类，一是基础型（$.ajax()），二是方法型（$.get()、$.post()），三是捷径型（$elem.load()、$.getJSON()）。这三种类型是一个渐进的关系，应用场景越来越窄，功能越来越聚集，参数越来越简单。

评分标准：能写正确出三个 API 就可以拿 3 分。

3、在页面中加载外部的 JavaScript 文件，有哪些方式？（简答）

出题意图：和 CSS 部分的那一题类似，考察常规实践。

解题思路：

• 先说最常见、最普通的：通过 <script> 标签的 src 属性引入一个外部的 JS 文件即可。
• 再说由 JS 加载 JS 文件的方法：通过 DOM 操作或 document.write() 生成上述标签也可以达到相同效果。
• 最后别忘了提一下类库的解决方案：可以是各种 JS loader，也可以是最简单的 jQuery API $.getScript()。

评分标准：写出第一条就可以拿 3 分。

4、在 HTML5 提供的 JavaScript API 中，你觉得最有用的是哪些？（简答）

出题意图：现在来看这道题稍有些过时，当时主要想考察候选人对新技术的了解。

参考答案：本地存储、Web Worker、Canvas、History API、地理位置 API 等。

评分标准：能提出任意两项就可以拿 3 分，此后每多一项可再加 1 分，封顶 5 分。

5、以下代码存在哪些问题？（简答）

<a href="javascript:openURL('/about.html');">关于我们</a>

出题意图：考察 “语义”、“分离”、“可访问性”、“非侵入式” 等概念。

解题思路：这道题同样隐去了一些前提，比如 openURL() 函数是怎么定义的，但其实从命名上可以看出它大致是做什么的，不需要纠结。这道题的核心正是 Web 标准的核心理念——“分离”。

参考答案：

• 点击跳转到指定 URL 是链接元素的天生职能，不需要（也不应该）通过 JS 来实现。让合适的技术来做合适的事情。
• 当用户的浏览器不支持 JS、禁用了 JS、JS 加载失败时，此连接的功能不可用。
• 不利于搜索引擎爬虫从本页爬向 /about.html 这个页面。

评分标准：写出任意两条即可拿满 5 分。

Misc

1、以下 HTTP 状态码分别表示什么？（选择）
404：＿＿＿ 301：＿＿＿
200：＿＿＿ 304：＿＿＿
503：＿＿＿ 403：＿＿＿

• A. OK
• B. Not Found
• C. Not Modified
• D. Internal Server Error
• E. Database Error
• F. Forbidden
• G. Moved Permanently

出题意图：考察候选人对 HTTP 的基本了解。前端工程师必须了解一定的 HTTP 知识，否则无法深入探索前端性能优化领域。

参考答案：略。

2、CDN 的作用是？（选择）

• A. 云计算
• B. 内容管理系统
• C. 分布节点就近响应
• D. 静态资源缓存
• E. 搜索引擎优化
• F. 数据库实时备份
• G. 网络通信加密

出题意图：CDN 是前端性能优化领域的基础知识点。

参考答案：C、D。

3、微软雅黑字体有哪些特点？（简答）

出题意图：考察候选人对视觉设计敏感度、对字体知识的了解。字体是信息传达的基本载体，是前端工程师实现界面的重要元素，关于字体的常识需要掌握。微软雅黑是一款具有特殊意义的中文字体，其自身也具备鲜明的技术特征。

参考答案：

• Windows 系统从 XP 开始自带微软雅黑，因此可用于网页文本显示；它提供了常规和粗体两种字重，可用于标题，也可用于正文。
• 对微软的 ClearType 字体渲染技术进行了深入优化，通过 hinting 提升小字号下的渲染效果。
• 对 Unicode 提供了良好的支持。
• 在字形设计上，字面较满、中宫外扩、无喇叭口等等。
• 更多细节可参考这篇文章：《Windows XP、ClearType 和微软雅黑字体的那点事》。

评分标准：写出任意两条即可拿满 5 分。

4、Web 服务器如果需要判断请求是否来自手机，通常通过什么来判断？（选择）

• A. IP 地址
• B. HTTP 头
• C. 地理位置
• D. 网络通信速率
• E. 被请求资源的 MIME Type

出题意图：这道题涉及 HTTP 和移动端开发的基础知识。

解题思路：HTTP 请求头包含 User-Agent 字段，浏览器通过这个字段来声明自己是谁。通常服务器端是通过这个信息来判断当前请求是否是手机。通过 IP 地址或许可以获得运营商信息，但无法精确滤除通过手机共享流量上网的电脑和通过 Wi-Fi 上网的手机，所以最多只能作为参考信息。

5、Google Analytics 通过什么渠道获取网站的访问量等数据？（简答）

出题意图：在一般情况下，流量统计分析虽然是产品与运营的工作范畴，但它的部署和调试是需要前端工程师来完成的。

参考答案：基本流程是这样的：网站的开发者在页面中放置 GA 脚本；每当这个页面被浏览时，这个脚本都会在客户端运行；这个脚本通过 Cookie 来标记用户，向 GA 服务器上报用户浏览行为；GA 服务器在统计分析客户端上报的数据之后，即可得出 PV/UV 等数据。

写在最后

恭喜你答完了，来记一下分数吧。建议把四部分的得分分别统计一下，这样更容易看出自己的技能分布。

不妨把你的得分发到评论里，一起来看看各自的战果如何！

（题图作者：Antonio Silveira @ Flickr）