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

简介
这是我在 2013 年整理的一套笔试题，用于在面试前快速判断候选人的综合素质，要么快速了断，要么为后续的面谈提供切入点。为满足 “快速” 的要求，题型以选择题为主，确保候选人可以在 30 分钟内做完。
显然，其中有些内容已经过时了。尽管如此，我相信这套题还是有一定的参考价值，今天完全公开。我会在每道题后面附上出题意图、解题思路、参考答案或评分标准。

如何评分
试卷共包含 20 道题，每题 5 分，总分 100 分。候选人得分达到 50 分即可初步判定为中级前端工程师。（其实不需要等总分累计出来，在批卷过程中就能作出判断了，得分是给 HR 看的。）
如果你有兴趣的话，可以遮住答案自己做一遍，然后记一下分。

HTML

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

出题意图：这道题在现在看来已经严重过时了，有点 “回字的几种写法” 的味道。当时是想考察候选人对 HTML 语法演进的了解，答错也没关系。
解题思路：现在已经没 HTML 4.01 和 XHTML 什么事儿了，略过，我们主要来看 HTML5。HTML5 的设计原则是尊重现状、保持良好的向后兼容性，所以以上四种写法都是合法的。

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

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

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

出题意图：如果能答好这一题，说明候选人对 HTML 表单有不错的理解。而表单是 HTML 最基本的交互功能，前端工程师必须深入掌握。
解题思路：
首先，还是从字面意思说起。顾名思义，label 是 “标签” 的意思。
然后谈作用。在 HTML 中，标签用于补充描述表单控件，以提供更好的体验（包括阅读上的体验和交互上的体验）和可访问性（对盲人用户更友好）。

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

出题意图：这道题略过时。试图考察候选人对 HTML 规范演进的了解，以及 “语义” 的概念。
评分标准：只要能把纯粹表达样式的标签挑出来就行了，不需要完全正确。其实我自己也不能完全记清楚；而且在 HTML5 中像这样原本只表达样式的标签又被赋于了新的语义。

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

出题意图：考察候选人对表单的关注、对 HTML5 规范的了解。
参考答案：number、email、tel、url、range、color 等。
评分标准：每正确写出一项即可得 1 分，封顶 5 分。

CSS

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

出题意图：考察常规实践、对 CSS 规范的了解。
解题思路：
先说最常见、最普通的：通过标签的 href 属性引入一个外部的 CSS 文件，同时标签需要包含 rel="stylesheet" 属性。（能清晰完整答出这一点，可以得 3 分。）
再说冷门一些的：在 </code> 标签中使用 <code>@import</code> 指令也可以引入一个外部的 CSS 文件。</li><li>最后扩散一下：通过 JS 生成上述标签也可以达到相同效果。</li></ul></blockquote>2、当应用了 <code>p {margin: 10px 0;}</code> 这条样式之后，两个相邻段落的垂直距离是多少？（选择）<ul><li>A. <code>0px</code></li><li>B. <code>10px</code></li><li>C. <code>20px</code></li><li>D. <code>40px</code></li></ul><blockquote>出题意图：考察 CSS 实践中常见的 “外边距重叠” 现象。这道题忽略了一些前提（比如文本方向、<code>p</code> 身上的是否存在其它样式等），但候选人应该可以领会这道题的考点。参考答案：B</blockquote>3、CSS Sprites 有哪些优点和缺点？（简答）<blockquote>出题意图：这是一道主观题，考察候选人在实践中的经验和思考。如果候选人在这里一个字都没有写，在排除耍大牌的可能性之后，可以直接送走。参考答案：<ul><li>优点：把对多张图片的请求合为一次，减少请求数，有益于前端性能；有预加载效果，有益于用户体验。</li><li>缺点：合并图片的制作成本和维护成本较高。</li></ul></blockquote>4、当不再需要支持 IE6/7 时，我们可以放心地使用哪些 CSS 技术？（简答）<blockquote>出题意图：这道题稍显过时，但在当时很有现实意义。在国内的用户环境下，前端工程师不得不花费大量的精力跟旧版浏览器缠斗，但切不可局限于此、忽略对新技术的了解和实践。解题思路：IE8 基本支持 CSS 2.1 的所有特性，因此在 IE6/7 下无法使用的 CSS 2.1 特性都可以列举出来。比如 <code>:before</code> 和 <code>:after</code> 伪元素、<code>display: table-cell</code>、<code>outline</code> 等。此外，IE8 甚至支持 CSS3 的 <code>box-sizing</code> 属性。</blockquote>5、CSS3 的新增功能有哪些？（选择）<ul><li>A. Web Font</li><li>B. Media Query</li><li>C. Local Storage</li><li>D. 960 Grid System</li><li>E. CSS Reset</li><li>F. Data URI</li><li>G. <code>:before</code> / <code>:after</code> Pseudo Element</li></ul><blockquote>出题意图：考察候选人对 CSS3 的了解。喜欢在简历上堆名词？没问题，先来给这些词分分类吧。解题思路：其实也没啥思路，如果持续关注 CSS 规范，这道题并不难。不要求完全答对，但如果把 “实践”（比如 960 Grid System 和 CSS Reset）跟 “规范” 混淆就不应该了。</blockquote><h2>JavaScript</h2>1、如何用 JavaScript 获取 ID 为 <code>abc</code> 的 DOM 元素？（请写代码）<blockquote>出题意图：最最基本的 DOM 操作了吧。答不上来可以直接送走了。评分标准：同时写出 DOM 原生 API 和基于类库的方法可以拿满 5 分。</blockquote>2、jQuery 提供的与 Ajax 相关的 API 有哪些？特点分别是什么？（简答）<blockquote>出题意图：考察对 jQuery 的熟悉程度。解题思路：jQuery 最常用的 Ajax API 可以为分三类，一是基础型（<code>$.ajax()</code>），二是方法型（<code>$.get()</code>、<code>$.post()</code>），三是捷径型（<code>$elem.load()</code>、<code>$.getJSON()</code>）。这三种类型是一个渐进的关系，应用场景越来越窄，功能越来越聚集，参数越来越简单。评分标准：能写正确出三个 API 就可以拿 3 分。</blockquote>3、在页面中加载外部的 JavaScript 文件，有哪些方式？（简答）<blockquote>出题意图：和 CSS 部分的那一题类似，考察常规实践。解题思路：<ul><li>先说最常见、最普通的：通过 <code><script></code> 标签的 <code>src</code> 属性引入一个外部的 JS 文件即可。</li><li>再说由 JS 加载 JS 文件的方法：通过 DOM 操作或 <code>document.write()</code> 生成上述标签也可以达到相同效果。</li><li>最后别忘了提一下类库的解决方案：可以是各种 JS loader，也可以是最简单的 jQuery API <code>$.getScript()</code>。</li></ul>评分标准：写出第一条就可以拿 3 分。</blockquote>4、在 HTML5 提供的 JavaScript API 中，你觉得最有用的是哪些？（简答）<blockquote>出题意图：现在来看这道题稍有些过时，当时主要想考察候选人对新技术的了解。参考答案：本地存储、Web Worker、Canvas、History API、地理位置 API 等。评分标准：能提出任意两项就可以拿 3 分，此后每多一项可再加 1 分，封顶 5 分。</blockquote>5、以下代码存在哪些问题？（简答）<pre><code><a href="javascript:openURL('/about.html');"></a>关于我们 </code></pre><blockquote>出题意图：考察 “语义”、“分离”、“可访问性”、“非侵入式” 等概念。解题思路：这道题同样隐去了一些前提，比如 <code>openURL()</code> 函数是怎么定义的，但其实从命名上可以看出它大致是做什么的，不需要纠结。这道题的核心正是 Web 标准的核心理念——“分离”。参考答案：<ul><li>点击跳转到指定 URL 是链接元素的天生职能，不需要（也不应该）通过 JS 来实现。让合适的技术来做合适的事情。</li><li>当用户的浏览器不支持 JS、禁用了 JS、JS 加载失败时，此连接的功能不可用。</li><li>不利于搜索引擎爬虫从本页爬向 <code>/about.html</code> 这个页面。</li></ul>评分标准：写出任意两条即可拿满 5 分。</blockquote><h2>Misc</h2>1、以下 HTTP 状态码分别表示什么？（选择） <code>404</code>：＿＿＿ <code>301</code>：＿＿＿ <code>200</code>：＿＿＿ <code>304</code>：＿＿＿ <code>503</code>：＿＿＿ <code>403</code>：＿＿＿<ul><li>A. OK</li><li>B. Not Found</li><li>C. Not Modified</li><li>D. Internal Server Error</li><li>E. Database Error</li><li>F. Forbidden</li><li>G. Moved Permanently</li></ul><blockquote>出题意图：考察候选人对 HTTP 的基本了解。前端工程师必须了解一定的 HTTP 知识，否则无法深入探索前端性能优化领域。参考答案：略。</blockquote>2、CDN 的作用是？（选择）<ul><li>A. 云计算</li><li>B. 内容管理系统</li><li>C. 分布节点就近响应</li><li>D. 静态资源缓存</li><li>E. 搜索引擎优化</li><li>F. 数据库实时备份</li><li>G. 网络通信加密</li></ul><blockquote>出题意图：CDN 是前端性能优化领域的基础知识点。参考答案：C、D。</blockquote>3、微软雅黑字体有哪些特点？（简答）<blockquote>出题意图：考察候选人对视觉设计敏感度、对字体知识的了解。字体是信息传达的基本载体，是前端工程师实现界面的重要元素，关于字体的常识需要掌握。微软雅黑是一款具有特殊意义的中文字体，其自身也具备鲜明的技术特征。参考答案：<ul><li>Windows 系统从 XP 开始自带微软雅黑，因此可用于网页文本显示；它提供了常规和粗体两种字重，可用于标题，也可用于正文。</li><li>对微软的 ClearType 字体渲染技术进行了深入优化，通过 hinting 提升小字号下的渲染效果。</li><li>对 Unicode 提供了良好的支持。</li><li>在字形设计上，字面较满、中宫外扩、无喇叭口等等。</li><li>更多细节可参考这篇文章：<a target="_blank">《Windows XP、ClearType 和微软雅黑字体的那点事》</a>。</li></ul>评分标准：写出任意两条即可拿满 5 分。</blockquote>4、Web 服务器如果需要判断请求是否来自手机，通常通过什么来判断？（选择）<ul><li>A. IP 地址</li><li>B. HTTP 头</li><li>C. 地理位置</li><li>D. 网络通信速率</li><li>E. 被请求资源的 MIME Type</li></ul><blockquote>出题意图：这道题涉及 HTTP 和移动端开发的基础知识。解题思路：HTTP 请求头包含 <code>User-Agent</code> 字段，浏览器通过这个字段来声明自己是谁。通常服务器端是通过这个信息来判断当前请求是否是手机。通过 IP 地址或许可以获得运营商信息，但无法精确滤除通过手机共享流量上网的电脑和通过 Wi-Fi 上网的手机，所以最多只能作为参考信息。</blockquote>5、Google Analytics 通过什么渠道获取网站的访问量等数据？（简答）<blockquote>出题意图：在一般情况下，流量统计分析虽然是产品与运营的工作范畴，但它的部署和调试是需要前端工程师来完成的。参考答案：基本流程是这样的：网站的开发者在页面中放置 GA 脚本；每当这个页面被浏览时，这个脚本都会在客户端运行；这个脚本通过 Cookie 来标记用户，向 GA 服务器上报用户浏览行为；GA 服务器在统计分析客户端上报的数据之后，即可得出 PV/UV 等数据。</blockquote><hr><h4>写在最后</h4>恭喜你答完了，来记一下分数吧。建议把四部分的得分分别统计一下，这样更容易看出自己的技能分布。不妨把你的得分发到评论里，一起来看看各自的战果如何！（题图作者：Antonio Silveira @ Flickr）</div> </div>