检验你的前端基础——Sit the test

　　前端小学生向大家推荐一个网站：Sit the test。如果你是一名前端工程师或者立志于此，不妨试试此网站上面的测验题。

发现

　　十几天前，我在奇舞周刊的一篇文章中，发现了一个国外的技能测试网站：Sit the test。测试分为HTML Core，CSS Core，CSS Core(practice)和JavaScript Core四部分，每种测试有25道题，限时30分钟。有了国内大牛的博客推荐，让我对测试题的含金量十分信服，当时我迫于证明自己，马上抽出时间挨着做了一遍：

　　做完就傻眼了，25题错7道，好像拿捏不准的全错了。题确确实实只是基础题，但是我没仔细看过W3C Standers，凭项目经验以及看过一些进阶书籍硬是把“基础送分题”变成了“附加题”。

分享

　　让人比较郁闷的是，除了CSS Core(practice)，其它三个测试只给出正确率，具体哪道做错了根本不告诉你，更别说正确答案应该是什么了。并且一个星期内只能参加一次测验，真是神奇极了。熟知测试规则后，我把自己做的题全都截图保存了下来，抽空仔细推敲了一遍。下面我抛砖引玉，将一些确定做错的题拿出来分享给大家。（答案放在最后，我无法将所有题的答案分享出来，因为最近我又进行了一遍测试，发现原题，题的顺序以及选项的顺序都会变）

　　1. Which of the following CSS measurements is the smallest in terms of physical size on a typical desktop display? Assume only default browser styles are in effect.

　　　　A：1ex　　B：1px　　C：1pt　　D：1em

　　2. Your site’s stylesheet contains two rules with exactly the same selector. Which of the following statements correctly describes how this code will apply to a web page?

　　　　A：Both rules apply to all matching elements, with the second rule overriding the first.

　　　　B：The second rule takes precedence, and the browser ignores the first.

　　3. Which of the following CSS color codes denotes a color that contains twice as much red as it does blue?

　　　　A：#7F0BFE　　B：#102005　　C：#AACC55　　D：#221144

　　4. When you specify a percentage value for margin-top on an element, how is this margin’s actual size calculated?

　　　　A：As a percentage of the width of the containing block.

　　　　B：As a percentage of the height of the containing block.

　　5. In a CSS color code such as #f06523.what does it mean if the code is composed of three identical pairs of digits(i.e. #XYXYXY)?

　　　　A：the color code will have the same brightness if inverted.

　　　　B：the color code represents a web-safe color.

　　　　C：the color code represents a shade of gray.

　　　　D：the color code has a complementary color with the digits inverted.

　　6. which of the following best describes the difference between event handlers and event listeners?

　　　　A：Event handler are embedded in HTML attributes;the other are assigned in JavaScript code.

　　　　B：Event handlers are a nonstandard,proprietarty browser feature;the other are standards-compliant.

　　　　C：For a given event type,an element may only have one event handler,but may have multiple event listeners.

　　　　D：IE supports event handlers;other browsers support event listeners.

　　7. Your Web page loads JavaScript code that is run using each of the following techniques:

　　　　①：DOMContentLoaded event listener　　　　　 ②：load event listener

　　　　③：<script> tag immediately before </body>　　④：<script> tag in the document's head

　　  In what order will each of these scripts be executed?

　　　　A：3，4，1，2　　B：2，3，4，1　　C：4，3，1，2　　D：2，4，3，1

　　8. You wish to display text on your website with double-spaced lines by default.Which of the following line-height values is the best way to achieve this?

　　　　A：inherit　　B：200%　　C：2em　　D：2

　　解析：

　　1. 选B。em和ex是相对单位，em具体大小根据相关元素的“font-size”得出，而ex的具体大小根据相关字体的“x-height”得出。“x-height”往往等于相关字体中小写字母"x"的高度。px和pt是绝对单位，在CSS中，1pt=1英寸的七十二分之一，而1px=0.75pt。在低分辨率设备中（例如电脑显示器），1px*1px覆盖了设备的一个点，故此选B，1px。

　　2. 选A。两个一模一样的CSS规则应用在页面上，效果我们都知道，但原理要搞清楚：浏览器并非是忽略掉了第一个声明，而是两个声明都会生效，后者覆盖掉了前者。

　　3. 选C。RGB颜色可以使用16进制来表示。rgb(255,0,0)=#f00=#ff0000=rgb(100%, 0%, 0%);#AACC55转换为rgb表示为rgb(170,204,85),170=85*2，红色是蓝色的两倍。

　　4. 选A。W3C标准中指出：“The percentage is calculated with respect to the width of the generated box's containing block”，并特别强调：“Note that this is true for 'margin-top' and 'margin-bottom' as well”。

　　5. 选C。又是RGB，首先必须明确一个事实，黑白之间的颜色叫灰色，不管它多接近于黑，也不管它多接近于白。当R，G，B三个通道数值一样时，这个颜色的饱和度就为0，代表了黑与白之间的颜色。这个可能是计算机图形学的基础知识。

　　6. 选C。StackOverflow上关于Event handlers vs event listeners的问题有很多，但是都没有给出参考引用，让人不信服。直到我在MDN中看到这句话：

　　When discussing the various methods of listening to events,

• event listener refers to a function or object registered via EventTarget.addEventListener(),
• whereas event handler refers to a function registered via on... attributes or properties.

　　搞清楚定义后，MDN又回答了"Why use addEventListener?"：

　　addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:

1. It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used.
2. It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
3. It works on any DOM element, not just HTML elements.

　　至此，答案已经很明显了。可能还有人会质疑选项B为什么不对。B选项说“on...”这种方式是非标准的浏览器专属特性，而addEventListener是W3C标准API。后半句毋庸置疑，addEventListener是在DOM Level2中引进的。而Event Handlers是在DOM0出现的。参考Cross-Browser.com上的一句话：

　　“There is no formal DOM0 standard. By "DOM0" we are referring to the object model supported by both IE4 and NN4. The DOM0 event interface is still supported by modern browsers.”

　　并没有DOM0标准，仅仅是把它当作W3C DOM1之前“民间标准”的统称。这时候B好像是正确的，但是很遗憾，在W3C HTML5的标准文档中，对Event Handlers进行了规范化定义。HTML5 The definition of 'event handlers' in that specification。

　　至此，本题的疑问已经全部解决。（我对选项B解释的合理性不是很确定，如果你有更好的解释，请在评论中指出）

　　7. 选C。首先必须弄清楚DOMContentLoaded和load的区别。请看StackOverflow上的回答，以及Demo。搞清楚这两个的区别之后，可以写一段代码来验证。

<!Doctype html>

<html>

<head>

<title>Test</title>

<script type="text/javascript">

    window.addEventListener("load", function(event) {

        console.log("2");//load event listener

      });

    document.addEventListener("DOMContentLoaded", function(event) {

        console.log("1");//DOMContentLoaded event listener IE9+等现代浏览器支持

      });

    console.info("4");//<script> tag in the document's head

</script>

</head>

<body>

<script type="text/javascript">

    console.info("3");//<script> tag immediately before </body>

</script>

</body>

</html>

　　打印的顺序正是4，3，1，2。

　　8. 选D。<number> and <percentage>方式设定的line-height值的计算方式都是（value*font-size），也就是说，假使段落字体为14px，那么line-height:200%和line-height:2计算出的结果都是line-height:28px。W3C标准指出，line-height的默认值为“normal”，建议浏览器将此值默认在1.0~1.2之间，并且强调“The value has the same meaning as <number>”。在对<number>的解释中，又特别强调了“The computed value is the same as the specified value”。这在对<percentage>的解释中都是没有的。其实这么书面化的标准对应到浏览器的表现形式上就是，<number>形式的值可以被后代继承，而<percentage>则不能，后代只会继承父亲的计算值。为了防止因为line-height继承导致的文字重叠，应使用<number>。因此D选项，“2”是设置双倍行距的最佳值。

总结

　　假如一个精读过W3C Standers的人来做这套测试题，准确率绝对不会低于90%。而我本人在找实习的过程中，比较大型的互联网企业基本都在关心实习生对前端技能中Core部分的掌握，以及数据结构与算法等计算机基础知识。我一直觉得自己对CSS的使用和认知是精于JavaScript的，但是测试结果确实出乎我的意料。看来CSS边边角角的知识比JavaScript要多一些，而这些知识正是我目前所欠缺的。没有拿到80%以上成绩的小伙伴，和我一起抽出时间认认真真阅读和理解一下W3C标准文档吧。

　　最后，用我的导师说过的一句话来总结全文：基础不牢，地动山摇。

　　望诸君共勉。

　　（完）