檢驗你的前端基礎——Sit the test

前端國小生向大家推薦一個網站：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标準文檔吧。

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

　　望諸君共勉。

　　（完）