11.為什么要初始化CSS樣式。

因?yàn)闉g覽器的兼容問題椭员，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的雨涛，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。

當(dāng)然赶么，初始化樣式會(huì)對(duì)SEO有一定的影響肩豁，但魚和熊掌不可兼得，但力求影響最小的情況下初始化禽绪。

*最簡單的初始化方法就是（不建議）：

{padding:0;margin:0;}

淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

12.對(duì)BFC規(guī)范的理解蓖救？

BFC，塊級(jí)格式化上下文印屁，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的循捺，盒子里面的子元素的樣式不會(huì)影響到外面的元素。在同一個(gè)BFC中的兩個(gè)毗鄰的塊級(jí)盒在垂直方向（和布局方向有關(guān)系）的margin會(huì)發(fā)生折疊雄人。

W3C CSS 2.1規(guī)范中的一個(gè)概念从橘，它決定了元素如何對(duì)其內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用础钠。

13.解釋下CSS sprites恰力，以及你要如何在頁面或網(wǎng)站中使用它。

CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中旗吁，再利用CSS的"background-image"踩萎，"background-repeat"，"background-position"的組合進(jìn)行背景定位很钓，background-position可以用數(shù)字能精確的定位出背景圖片的位置香府。這樣可以減少很多圖片請(qǐng)求的開銷董栽，因?yàn)檎?qǐng)求耗時(shí)比較長；請(qǐng)求雖然可以并發(fā)企孩，但是也有限制锭碳，一般瀏覽器都是6個(gè)。對(duì)于未來而言勿璃，就不需要這樣做了擒抛，因?yàn)橛辛薶ttp2。

14.說說你對(duì)語義化的理解补疑？

1.去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)

2.有利于SEO：和搜索引擎建立良好溝通歧沪，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

3.方便其他設(shè)備解析（如屏幕閱讀器癣丧、盲人閱讀器槽畔、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；

4.便于團(tuán)隊(duì)開發(fā)和維護(hù)胁编，語義化更具可讀性厢钧，是下一步吧網(wǎng)頁的重要?jiǎng)酉颍裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)嬉橙，可以減少差異化早直。

15.Doctype作用?嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

1. 聲明位于文檔中的最前面市框，處于標(biāo)簽之前霞扬。告知瀏覽器以何種模式來渲染文檔。

2.嚴(yán)格模式的排版和JS運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行枫振。

3.在混雜模式中喻圃，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作粪滤。

4. DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)斧拍。

16.你知道多少種Doctype文檔類型？

1.該標(biāo)簽可聲明三種DTD類型杖小，分別表示嚴(yán)格版本肆汹、過渡版本以及基于框架的HTML文檔。

2. HTML 4.01規(guī)定了三種文檔類型：Strict予权、Transitional以及Frameset昂勉。

3. XHTML 1.0規(guī)定了三種XML文檔類型：Strict、Transitional以及Frameset扫腺。

4. Standards（標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁岗照，而Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。

17.HTML與XHTML——二者有什么區(qū)別

1.所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記

2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫

3.所有的XML標(biāo)記都必須合理嵌套

4.所有的屬性必須用引號(hào)""括起來

5.把所有<和&特殊符號(hào)用編碼表示

6.給所有屬性賦一個(gè)值

7.不要在注釋內(nèi)容中使用"--"

8.圖片必須有說明文字

18.html常見兼容性問題？

1. png24位的圖片在iE6瀏覽器上出現(xiàn)背景

解決方案：做成PNG8谴返，也可以引用一段腳本處理.

2.瀏覽器默認(rèn)的margin和padding不同

解決方案：加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一煞肾。

3. IE6雙邊距bug：在IE6下咧织，如果對(duì)元素設(shè)置了浮動(dòng)嗓袱，同時(shí)又設(shè)置了margin-left或margin-right，margin值會(huì)加倍习绢。

#box{ float:left; width:10px; margin:0 0 0 10px;}

這種情況之下IE會(huì)產(chǎn)生20px的距離

解決方案：在float的標(biāo)簽樣式控制中加入_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性渠抹。( _這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

4.漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部闪萄。

首先梧却，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來败去。

接著放航，再次使用"+"將IE8和IE7、IE6分離開來圆裕，這樣IE8已經(jīng)獨(dú)立識(shí)別广鳍。

.bb{

background-color:#f1ee18; /*所有識(shí)別*/

.background-color:#00deff\9; /*IE6、7吓妆、8識(shí)別*/

+background-color:#a200ff; /*IE6赊时、7識(shí)別*/

_background-color:#1e0bd1; /*IE6識(shí)別*/

}

5.IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性行拢，也可以使用getAttribute()獲取自定義屬性祖秒；Firefox下,只能使用getAttribute()獲取自定義屬性

解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性

6. IE下，event對(duì)象有x舟奠、y屬性竭缝，但是沒有pageX、pageY屬性; Firefox下沼瘫，event對(duì)象有pageX抬纸、pageY屬性，但是沒有x晕鹊、y屬性

解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)松却。

7. Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示

解決方法：可通過加入CSS屬性-webkit-text-size-adjust: none;解決

8.超鏈接訪問過后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了

解決方法：改變CSS屬性的排列順序L-V-H-A

a:link {}

a:visited {}

a:hover {}

a:active {}

9.怪異模式問題：漏寫DTD聲明溅话，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁晓锻，但在IE中會(huì)觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩飞几，最好養(yǎng)成書寫DTD聲明的好習(xí)慣⊙舛撸現(xiàn)在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：

10.上下margin重合問題：ie和ff都存在，相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合屑墨，但是margin-top和margin-bottom卻會(huì)發(fā)生重合躁锁。

解決方法：養(yǎng)成良好的代碼編寫習(xí)慣纷铣，同時(shí)采用margin-top或者同時(shí)采用margin-bottom。

11. ie6對(duì)png圖片格式支持不好

解決方案：引用一段腳本處理

19.解釋下浮動(dòng)和它的工作原理战转？清除浮動(dòng)的技巧

浮動(dòng)元素脫離文檔流搜立，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留槐秧。

1.使用空標(biāo)簽清除浮動(dòng)啄踊。

這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽定義css clear:both.弊端就是增加了無意義標(biāo)簽。

2.使用overflow刁标。

給包含浮動(dòng)元素的父標(biāo)簽添加css屬性overflow:auto; zoom:1; zoom:1用于兼容IE6颠通。

3.使用after偽對(duì)象清除浮動(dòng)。

該方法只適用于非IE瀏覽器膀懈。具體寫法可參照以下示例顿锰。使用中需注意以下幾點(diǎn)。一启搂、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置height:0硼控，否則該元素會(huì)比實(shí)際高出若干像素；

20.浮動(dòng)元素引起的問題和解決辦法狐血？

浮動(dòng)元素引起的問題：

1.父元素的高度無法被撐開淀歇，影響與父元素同級(jí)的元素

2.與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后

3.若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)匈织，否則會(huì)影響頁面顯示的結(jié)構(gòu)

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動(dòng)可解決2浪默、3問題，對(duì)于問題1缀匕，添加如下樣式纳决，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動(dòng)的幾種方法：

1.額外標(biāo)簽法，

（缺點(diǎn)：不過這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔乡小。）

2.使用after偽元素

#parent:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

3.浮動(dòng)外部元素

4.設(shè)置overflow為hidden或者auto

21.IE 8以下版本的瀏覽器中的盒模型有什么不同

IE8以下瀏覽器的盒模型中定義的元素的寬高包括內(nèi)邊距和邊框

22.DOM操作——怎樣添加阔加、移除、移動(dòng)满钟、復(fù)制胜榔、創(chuàng)建和查找節(jié)點(diǎn)。

1.創(chuàng)建新節(jié)點(diǎn)

createDocumentFragment() //創(chuàng)建一個(gè)DOM片段

createElement() //創(chuàng)建一個(gè)具體的元素

createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

2.添加湃番、移除夭织、替換、插入

appendChild()

removeChild()

replaceChild()

Insefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)

3.查找

getElementsByTagName() //通過標(biāo)簽名稱

getElementsByName() //通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)吠撮，會(huì)得到一個(gè)數(shù)組尊惰，其中包括id等于name值的)

getElementById() //通過元素Id，唯一性

23.html5有哪些新特性、移除了那些元素弄屡？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題题禀？如何區(qū)分HTML和HTML5？

新特性：

HTML5現(xiàn)在已經(jīng)不是SGML的子集膀捷，主要是關(guān)于圖像迈嘹，位置，存儲(chǔ)担孔，多任務(wù)等功能的增加江锨。

1.拖拽釋放(Drag and drop) API

2.語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）

3.音頻、視頻API(audio,video)

4.畫布(Canvas) API

5.地理(Geolocation) API

6.本地離線存儲(chǔ)localStorage長期存儲(chǔ)數(shù)據(jù)糕篇，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

7. sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

8.表單控件酌心，calendar拌消、date、time安券、email墩崩、url、search

9.新的技術(shù)webworker, websocket, Geolocation

移除的元素：

1.純表現(xiàn)的元素：basefont侯勉，big鹦筹，center，font, s址貌，strike铐拐，tt，u练对；

2.對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame遍蟋，frameset，noframes螟凭；

支持HTML5新標(biāo)簽：

1. IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽虚青，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后螺男，還需要添加標(biāo)簽?zāi)J(rèn)的樣式（當(dāng)然最好的方式是直接使用成熟的框架棒厘、使用最多的是html5shiv框架）：

如何區(qū)分：

DOCTYPE聲明新增的結(jié)構(gòu)元素、功能元素

24.iframe的優(yōu)缺點(diǎn)下隧？

優(yōu)點(diǎn)：

1.解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題

2. Security sandbox

3.并行加載腳本

缺點(diǎn)：

1. iframe會(huì)阻塞主頁面的Onload事件

2.即時(shí)內(nèi)容為空奢人，加載也需要時(shí)間

3.沒有語意

25.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?

調(diào)用localstorge、cookies等本地存儲(chǔ)方式

26.webSocket如何兼容低瀏覽器汪拥？

Adobe Flash Socket达传、ActiveX HTMLFile (IE)、 基于multipart編碼發(fā)送XHR、 基于長輪詢的XHR

27.線程與進(jìn)程的區(qū)別

1.一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程

2.線程的劃分尺度小于進(jìn)程宪赶，使得多線程程序的并發(fā)性高

3.另外宗弯，進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存搂妻，從而極大地提高了程序的運(yùn)行效率

4.線程在執(zhí)行過程中與進(jìn)程還是有區(qū)別的蒙保。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口欲主。但是線程不能夠獨(dú)立執(zhí)行邓厕，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制

5.從邏輯角度來看扁瓢，多線程的意義在于一個(gè)應(yīng)用程序中详恼，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用引几，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配昧互。這就是進(jìn)程和線程的重要區(qū)別

28.你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？

期待的解決方案包括：

1.文件合并

2.文件最小化/文件壓縮

3.使用CDN托管

4.緩存的使用（多個(gè)域名來提供緩存）

5.其他

29.請(qǐng)說出三種減少頁面加載時(shí)間的方法

1.優(yōu)化圖片

2.圖像格式的選擇（GIF：提供的顏色較少伟桅，可用在一些對(duì)顏色要求不高的地方）

3.優(yōu)化CSS（壓縮合并css敞掘，如margin-top, margin-left...)

4.網(wǎng)址后加斜杠（如www.campr.com/目錄，會(huì)判斷這個(gè)目錄是什么文件類型楣铁，或者是目錄玖雁。）

5.標(biāo)明高度和寬度（如果瀏覽器沒有找到這兩個(gè)參數(shù)，它需要一邊下載圖片一邊計(jì)算大小盖腕，如果圖片很多赫冬，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度赊堪，也影響瀏覽體驗(yàn)面殖。

當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時(shí)無法顯示哭廉，頁面上也會(huì)騰出圖片的空位脊僚，然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了遵绰，瀏覽體驗(yàn)也更好了）

6.減少http請(qǐng)求（合并文件辽幌，合并圖片）

30.你都使用哪些工具來測試代碼的性能？

1. Profiler

2. JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）

3. Dromaeo