1.請(qǐng)描述一下cookies,sessionStorage 蔬胯，localStorage的區(qū)別?
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請(qǐng)求之間保存數(shù)據(jù)怜森。有了本地?cái)?shù)據(jù)申窘，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞蜕乡。
sessionStorage 、localStorage 和 cookie 之間的區(qū)別：
共同點(diǎn)：都是保存在瀏覽器端，且同源的草娜。
區(qū)別:
- cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）痒筒，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞宰闰。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存簿透。
- cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。
- 存儲(chǔ)大小限制也不同啡浊，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie苹祟，所以cookie只適合保存很小的數(shù)據(jù)砂轻，如會(huì)話標(biāo)識(shí)搔涝。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多斜纪，可以達(dá)到5M或更大盒刚。
- 數(shù)據(jù)有效期不同因块，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效寨辩，自然也就不可能持久保持耻警；localStorage：始終有效甘穿，窗口或?yàn)g覽器關(guān)閉也一直保存温兼，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉全释。
- 作用域不同浸船，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面形帮；localStorage 在所有同源窗口中都是共享的君躺；cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者伏钠。Web Storage 的 api 接口使用更方便扎拣。
為什么選擇Web Storage而不是Cookie侣夷？
與Cookie相比，Web Storage存在不少的優(yōu)勢(shì)，概括為以下幾點(diǎn)：
- 存儲(chǔ)空間更大：IE8下每個(gè)獨(dú)立的存儲(chǔ)空間為10M，其他瀏覽器實(shí)現(xiàn)略有不同，但都比Cookie要大很多乏盐。
- 存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器：當(dāng)設(shè)置了Cookie后，Cookie的內(nèi)容會(huì)隨著請(qǐng)求一并發(fā)送的服務(wù)器坡慌，這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)黔酥。而Web Storage中的數(shù)據(jù)則僅僅是存在本地，不會(huì)與服務(wù)器發(fā)生任何交互。
- 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口跪者，使得數(shù)據(jù)操作更為簡(jiǎn)便棵帽。
- 獨(dú)立的存儲(chǔ)空間：每個(gè)域（包括子域）有獨(dú)立的存儲(chǔ)空間，各個(gè)存儲(chǔ)空間是完全獨(dú)立的渣玲，因此不會(huì)造成數(shù)據(jù)混亂逗概。
2.對(duì)于sass和less的了解?
見(jiàn)博客Sass/Scss和Less的區(qū)別
3.如何阻止事件冒泡和事件的默認(rèn)事件?
答案見(jiàn)前端筆試題(一)
4.javascript中的"閉包"是什么?請(qǐng)舉一個(gè)例子.
見(jiàn)我之間文章閉包
5.清除浮動(dòng)的幾種方法?(至少兩種)
答案見(jiàn)前端筆試題(一)
6.css居中你有幾種方式(至少兩種.包括水平居中)
1.水平居中的text-align:center 和 margin:0 auto。這兩種方法都是用來(lái)水平居中的忘衍，前者是針對(duì)父元素進(jìn)行設(shè)置而后者則是對(duì)子元素逾苫。他們起作用的首要條件是子元素必須沒(méi)有被float影響，否則一切都是無(wú)用功枚钓。
2.垂直居中的line-height至于line-height铅搓，他也是作用在父元素上，當(dāng)他的值等于父元素的height值時(shí)秘噪，內(nèi)部的文字就會(huì)自動(dòng)的垂直居中了狸吞。此處僅僅只能是文字勉耀。
3.margin:auto法
css代碼
div{
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML代碼
<div>
</div>
4.負(fù)margin法
CSS代碼
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/
margin-left: -240px; /*width的一半*/
}
HTML代碼
<div class="container">
<div class="inner"></div>
</div>
5.transform法
CSS代碼
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
HTML代碼
<div class="container">
<div class="inner"></div>
</div>
6.彈性盒子法
CSS代碼
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}
HTML代碼
<div class="container">
<div class="inner">
我在容器中水平垂直居中
</div>
</div>
7.前端有哪些性能優(yōu)化的方法?(至少提供三種)
答案見(jiàn)前端筆試題(一)
8.css3有哪些新特性?
1: CSS3選擇器部分
E[att^="val"] 匹配具有att屬性指煎、且值以val開(kāi)頭的E元素
E[att$="val"] 匹配具有att屬性、且值以val結(jié)尾的E元素
E[att*="val"] 匹配具有att屬性便斥、且值中含有val的E元素
E:root 匹配文檔的根元素至壤。在HTML中，根元素永遠(yuǎn)是HTML
E:nth-child(n) 匹配父元素中的第n個(gè)子元素E
E:nth-last-child(n) 匹配父元素中的倒數(shù)第n個(gè)結(jié)構(gòu)子元素E
E:nth-of-type(n) 匹配同類(lèi)型中的第n個(gè)同級(jí)兄弟元素E
E:nth-last-of-type(n) 匹配同類(lèi)型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E
E:last-child 匹配父元素中最后一個(gè)E元素
E:first-of-type 匹配同級(jí)兄弟元素中的第一個(gè)E元素
E:only-child 匹配屬于父元素中唯一子元素的E
E:only-of-type 匹配屬于同類(lèi)型中唯一兄弟元素的E
E:empty 匹配沒(méi)有任何子元素（包括text節(jié)點(diǎn)）的元素E
:target 匹配相關(guān)URL指向的E元素
E:enabled 匹配所有用戶(hù)界面（form表單）中處于可用狀態(tài)的E元素
E:disabled 匹配所有用戶(hù)界面（form表單）中處于不可用狀態(tài)的E元素
E:checked 匹配所有用戶(hù)界面（form表單）中處于選中狀態(tài)的元素E
E::selection 匹配E元素中被用戶(hù)選中或處于高亮狀態(tài)的部分
E:not(s) 匹配所有不匹配簡(jiǎn)單選擇符s的元素E
E ~ F 匹配E元素之后的F元素
2枢纠、 CSS3)特效部分1：圓角像街，陰影，漸變
border-radius
box-shadow
text-shadow
-webkit-gradient
3晋渺、 CSS3特效部分2：背景镰绎，邊框背景
background-origin
background-clip
background-size
multiple backgrounds
border-image
4、 CSS3特效部分3： 變形
rotate
X/Y/Z
scale
translate
transform-origin,transition-property,transition-duration,
transition-timing-function,
transition-delay
skew
matrix
5木西、 CSS3特效部分4：動(dòng)畫(huà)
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
-webkit-animation-direction
9.ajax都有哪些優(yōu)點(diǎn)和缺點(diǎn)?
優(yōu)點(diǎn):
不需要插件
客戶(hù)體驗(yàn)極佳
提升Web程序性能
減輕服務(wù)器和寬帶的負(fù)擔(dān)
缺點(diǎn):
前進(jìn)后退按鈕被破壞
搜索引擎的支持不夠
開(kāi)發(fā)調(diào)試工具缺乏
