前端小學生向大家推薦一個網站：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:
- 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.
- It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)
- 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進行了規范化定義。
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標准文檔吧。
最后，用我的導師說過的一句話來總結全文：基礎不牢，地動山搖。
望諸君共勉。
（完）