聚美優品前端筆試題，主要包括html、css以及javascript的知識點，個別涉及到html5標簽的考查。下面是問題的列表，來自w3cfuns的一套前端筆試題，然后針對每個問題談談我的理解，有興趣的童鞋也可以做一下，然后大家交流交流。注：每個問題可能會涉及一些基於該問題衍生出的知識點，由於本人初涉前端不久，理解上會有一些偏差和錯誤，歡迎指出，以致修正。
CSS
1. overflow-x 屬於 CSS2 還是 CSS3
css3，可以查找css參考手冊，附上最新版的css手冊
2. 請列舉幾種可以清除浮動的方法（至少兩種）
先來說說浮動的原理和清除浮動的原因：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬於(或脫離了)文檔中的普通流，當一個元素浮動之后，不會影響到塊級框的布局而只會影響行內元素(如span、a、em)的排列，即行內元素浮動后就會表現得像塊級元素一樣。當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（或者可以稱為“高度塌陷”現象）。在實際布局中，往往這並不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。
清除浮動方法：
（1）添加額外(空)標簽
通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>
優點：通俗易懂，容易掌握；
缺點：增加無意義的標簽，有違結構與表現的分離。
（2）父元素設置 overflow：hidden
通過設置父元素overflow值為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；
優點：不存在結構和語義化問題，代碼量極少；
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
（3）父元素也設置浮動
優點：不存在結構和語義化問題，代碼量極少;
缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用。
（4）給父元素添加clearfix類
由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
優點：結構和語義化完全正確,代碼量居中;
缺點：復用方式不當會造成代碼量增加。
clearfix類代碼如下：
//:after會在元素內容——而不是元素后面插入一個偽素，該規則只添加了一個清除的包含句點作為非浮動元素，注意，:after不是偽類，而是偽元素 .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } // 觸發IE6、7下的haslayout .clearfix { *zoom: 1; }
3. display:none 和 visibility:hidden 的區別是什么
相同點：display:none與visibility:hidden都可以用來隱藏某個元素；
不同點：display:none在隱藏元素的時候，將其占位空間也去掉；而visibility:hidden只是隱藏了內容而已，其占位空間仍然保留。
4. 請縮寫以下代碼：
.box {
background-position: 10px 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: red;
background-image: url(box.png);
}
這個沒什么好說的，只要是使用過css背景屬性的人都知道縮寫形式，另外需一提的是color屬性可放在最前面也可以放在最后面。
.box { background: red url(box.png) no-repeat 10px 20px fixed; }
5. 如何讓一段文本中的所有英文單詞的首字母大寫
css的text-transform：none(默認值) | capitalize | uppercase | lowercase | full-width(css3新增)；
取值方面可查看手冊，具體是什么就不多說了。
Javascript
1. 請解釋一下什么是閉包
對於閉包，相信每個人都有自己的見解，並且網上一大推關於閉包的概念，我的理解是能夠訪問到其包含(外部)函數內部變量的函數。
主要有兩個特性：
一個是可以讀取其包含函數內部的變量；另一個就是讓這些變量的值始終保持在內存中。
使用閉包的注意點：
過多使用會造成內存泄露的現象，因為閉包會引用其包含函數作用域的變量對象，使得即使包含函數執行完畢后，其作用域的變量對象不會被銷毀，即其占用的內存無法得到回收，直至閉包執行完畢后才會被銷毀。所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。對於作用域(或者成為執行環境)、作用域鏈、變量對象的概念，大家可參考javascript高級程序設計的第四章節，關於變量、作用域、內存的分析。這就是為什么說理解閉包前首先要理解js中作用域從產生到銷毀過程發生的一系列有趣的事情。
2. call 和 apply 的區別是什么
相同點：都可以在特定作用域(環境)下調用函數；
不同點：傳遞的參數形式不同，call方法的參數必須一個個列舉出來，而apply方法的參數是以一個數組的形式進行傳遞，也支持arguments參數。
3. 如何使用原生 Javascript 代碼深度克隆一個對象（注意區分對象類型）
對於深度克隆，我的理解是：在克隆或擴展一個對象時，當該對象是一個包括子對象的對象，也會遍歷該子對象的屬性並進行復制拷貝。所以深度克隆適用於對象的屬性也是對象的情況。
貼出js代碼：
/** * 深度擴展對象--適用於對象的屬性也是對象的情況 * @param {Object} * @return {Object} */ var deepextend = function (destination, source) { for (var property in source) { var copy = source[property]; // 獲取source屬性值 if (destination === copy) { continue; } // 如果copy是一個對象，則遞歸調用(並傳入copy參數)，直到copy不是一個對象為止 if (typeof copy === 'object') {//$.isObj(copy) destination[property] = arguments.callee(destination[property] || {}, copy); //遞歸調用 // 否則直接把copy賦值給destination對象的屬性(此時與$.extend方法等價) } else { destination[property] = copy; } } return destination; };
例子測試：
var destination = { name: "hcy", age: 22, info: {sex: "man", job: "student"} }; var source = { name: "hc", age: 23, info: {sex: "woman", job: "developer"} }; console.log(deepextend(destination, source)); // 輸出destination的全部屬性 for (var i in destination) { if (typeof destination[i] === "object") { for (var j in destination[i]) { console.log(destination[i] + ":\t" + destination[i][j]); } } else { console.log(i + ":\t" + destination[i]); } }
firebug下測試結果截圖：
4. jQuery 中 $('.class') 和 $('div.class') 在 IE 8 下哪個效率更高，請解釋原因
這題是關於selector的性能問題，$(".class")在查找和遍歷頁面的元素時，會遍歷所有帶有class類的元素，不管是div、p、span或者是其他元素；而$("div.class")首先會查找出div元素，然后在所有的div中查詢帶有class類的相關div，所以在效率方面，當然是div.class選擇器高於.class。這是我個人的理解，相關標准的方案求大神解答。
HTML
1. 以下哪個不是 HTML5 的新標簽：
a. <article>
b. <section>
c. <address>
d. <time>
address不是html5新增的標簽，而是在HTML4.01中就已經存在了，用於可定義一個地址或者文檔作者或擁有者的聯系信息。而article、section、time標簽是html5新增的語義化標簽，具體代表啥含義，咋用法就不多說了，可查看官方文檔或一些html5技術論壇的相關說明。
2. 正確使用 HTML 和 CSS 實現以下效果（中間方框部分表示圖片，右側為文字列表。盡量不要
使用 float 屬性）：
這題比較簡單，只要學過css的相信都不大問題。對於該圖片和文字的布局，可使用定位來解決。外層容器相對定位，里面的圖片和文字列表絕對定位，就可以實現上圖的效果了。貼出代碼：
html結構：
<div class="wrap"> <img src="images/love.jpg" alt="愛的呼喚" width="200" height="200" /> <ul> <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li> <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li> <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li> <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li> <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li> <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li> <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li> <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li> </ul> </div>
css代碼：
body, div, ul, li {margin: 0; padding: 0;} body {font: 12px/1.6 Arial,Helvetica,sans-serif;} ul {list-style-type: none;} a {text-decoration: none; color: #999;} a:hover {text-decoration: underline;color: #666;} .wrap { margin: 30px auto; width: 520px; height: 250px; border: 1px solid #ccc; position: relative; /* 這是關鍵 */ } .wrap img { border: 1px dashed red; position: absolute; /* 這是關鍵 */ left: 20px; top: 20px; } .wrap ul { position: absolute; /* 這是關鍵 */ right: 20px; top: 20px; } .wrap ul li a { display: block; height: 25px; line-height: 25px; }
例子結果截圖：
最后還有兩道簡答題：
簡答
1. jumei.com 和 weibo.com 完整載入后，html 代碼各有多少 KB
2. 最近關注了哪些前端相關的技術/博客/論壇，簡述心得和看法
對於第一題計算頁面全部元素加載完畢后，html代碼的大小。這個問題之前沒有遇到過，所以求大神貼出解決方案？？？
對於第二題，每個人都有不同的答案，對於自己，最近在忙於找實習，接觸了不久之前就比較流行的瀑布流，了解了一些js MVC框架，如backbone、angular、ember，然后也是之前不久開通的這個博客園的博客，希望記錄自己的一些成長經歷和學習的點點滴滴，之前也關注過淘寶的UED、騰訊的Alloy Team，平時閑着的時候會逛逛w3cfuns、blueidea、伯樂在線、html5中國等一些技術論壇，也會在豆瓣和知乎發現和了解一些話題。這就是我最近做的一些事情，相信也是我以后一直堅持下去的事情。。。。
結語：不知不覺已經花了兩個多小時來寫這篇博客，從這套題目中也蔓延出了一些問題和得到一些經驗，希望自己以后多多關注並加以改進。並希望對閱讀的童鞋有所幫助。干巴爹！！！(～ o ～)~zZ