檢驗你的前端基礎——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標準文檔吧。

　　最後，用個人導師說過的一句話來總結全文：基礎不牢，地動山搖。

　　望諸君共勉。

　　（完）