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