常見面試問題（重點）

1.你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么?

?IE內(nèi)核-ms

?Firefox內(nèi)核-moz

?Safari:webkit內(nèi)核-webkit

?Opera:內(nèi)核-o

?Chrome:webkit內(nèi)核一webkit

2.每個HTML文件里開頭都有個很重要的東西，Doctype,知道這是干什么的

嗎？

答案：＜!DOCTYPE＞聲明位于文檔中的最前面的位置，處于＜html＞標簽之前。

此標簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范還是HTML5。（重

點：告訴瀏覽器按照何種規(guī)范解析頁面）

3.HTML和XHTML的區(qū)別？

XHTML是基于XML語法規(guī)范的HTML語法，比HTML語法要嚴格，比如說

標簽必須成對，例如vbr/＞

4.HTML和XML的區(qū)別

HTML是超文本標記語言，主要用于做網(wǎng)頁

XML是可擴展的標記語言，特點是自定義標簽，主要作為一種數(shù)據(jù)格式做數(shù)據(jù)

交互，或者做配置義件

XML語法：必須有根標簽，標簽區(qū)分大小寫且必須成對出現(xiàn)，屬性必須加雙引

號

5.Quirks（怪異）模式是什么？它和Standards（標準）模式有什么區(qū)別

有兩種情況瀏覽器的盒子模型會按照怪異模式執(zhí)行

1在IE6下不寫v!DOCTYPE＞

2CSS3設(shè)置box-sizing:border-box

盒子模型的區(qū)別是：

怪異模式：設(shè)置高度寬度二內(nèi)容+padding+border

標準模式：設(shè)置高度=內(nèi)容，padding和border會增加高度寬度

6.div+css的布局較table布局有什么優(yōu)點？

a）表格的樣式一般是用html屬性設(shè)置（高度，寬度，邊框線）樣式，div+css

主要是用css控制樣式（優(yōu)點改變樣式只要改css就可以了）

b）Div標簽少，頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡潔

c）DIV和CSS表現(xiàn)（樣式）與結(jié)構(gòu)（標簽）相分離

d）易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前

e）Table必須完全加載完畢才能顯示，而div可以一邊加載一邊顯示

7.img的alt與title有何異同？b：strong與em的異同？

title是圖片或者鏈接鼠標懸停的提示

alt只是圖片的替代文字，圖片不顯示的時候可以顯示

8.你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎？

都是針對于css在瀏覽器高低版本中運行兼容性的問題

漸進增強progressiveenhancement：針對低版本瀏覽器進行構(gòu)建頁面，保證

最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更

好的用戶體驗（先低后高）

優(yōu)雅降級gracefuldegradation：一開始就構(gòu)建完整的功能，然后再針對低版

本瀏覽器進行兼容（先低后高）

9.為什么利用多個域名來存儲網(wǎng)站資源會更有效？

?CDN緩存更方便

?突破瀏覽器并發(fā)限制，瀏覽器對同一個域名的并發(fā)請求個數(shù)有限制

?節(jié)約cookie帶寬，同一個域名cookie數(shù)量和大小也有限制

?節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應速度

10.請談一下你對網(wǎng)頁標準和標準制定機構(gòu)重要性的理解。

（無標準答案）網(wǎng)頁標準和標準制定機構(gòu)都是為了能讓web發(fā)展的更‘健康’，

開發(fā)者遵循統(tǒng)一的標準，降低開發(fā)難度，開發(fā)成本，SEO也會更好做，也不會

因為濫用代碼導致各種BUG、安全問題，最終提高網(wǎng)站易用性。

11.htm15的webstorage和cookie的區(qū)別

a）webstorage存儲容量大cookie存儲受大小和條數(shù)限制

b）cookie每次請求都會自動存儲在請求報頭中發(fā)送給服務(wù)器（浪費帶寬），

webstorage不會

12.webstorage的localStorage和sessionStorage的區(qū)別？

localstorage永久性存儲當前域名的數(shù)據(jù)

sessionStorage是會話級，瀏覽器關(guān)閉就清空

13.GET請求和POST請求的區(qū)別？

a）發(fā)送數(shù)據(jù)方式：get把數(shù)據(jù)追加url后面，post把數(shù)據(jù)放到請求正文中

b）數(shù)據(jù)量：get小，post幾乎無限制

c）安全性：get不安全，post安全

d）中文問題：get不能直接發(fā)中文，post可以

14.簡述一下src與href的區(qū)別？

src的標簽：imgframeiframescript

href的表情：alink

<scriptsrc二”外部JS文件、當瀏覽器解析到該元素時，會暫停其他資源的下

載和處理，直到將該資源加載、編譯、執(zhí)行完畢，將會暫停網(wǎng)頁中的元素加

載，這也是為什么將js腳本放在底部而不是頭部

<linkhref=''common.css"rel="stylesheet''/>當瀏覽器解析到該元素時，就會并

行下載資源并且不會停止對當前文檔的處理

15.知道的網(wǎng)頁制作會用到的圖片格式有哪些？

png-8,png-24,jpeg,gif,svg后期新技術(shù)標準Webp谷歌出品Apngsafari支持

16.在css/js代碼上線之后開發(fā)人員經(jīng)常會優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一

次js請求一般情況下有哪些地方會有緩存處理？

dns緩存，cdn緩存，瀏覽器緩存，服務(wù)器緩存

17.一個頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化

這些圖片的加載，給用戶更好的體驗

懶加載（延遲加載）：一開始圖片不加載，利用判斷滾動條位置，動態(tài)通過

ajax加載圖片

預加載：提前下載圖片，在圖片使用前就下載

如果圖片為css圖片，可以使用CSSsprite（雪碧圖，減少請求次數(shù)）,SVGsprite,

Iconfont（字體圖標）、Base64圖片等技術(shù)。

圖片過大可以先做成縮略圖，然后連接到大圖

18.閉包的理解？

內(nèi)層函數(shù)使用了外層函數(shù)的變量，會導致外層函數(shù)即使調(diào)用結(jié)束，局部變量也不

會在內(nèi)存中釋放，會造成內(nèi)存泄露，最常用的地方就是事件回調(diào)函數(shù)里面使用外

層作用域的數(shù)據(jù)

19.你如何理解HTML結(jié)構(gòu)的語義化？

語義化標簽：headerfooternavsectionarticleasidehlimgtabledivtitle

優(yōu)點：代碼可讀性好，有利于SEO搜索引擎優(yōu)化，符合W3c標準

20.有哪項方式可以對一個D0M設(shè)置它的CSS樣式？

行內(nèi)樣式

內(nèi)聯(lián)樣式

外部樣式表文件

21.CSS都有哪些選擇器？

標簽選擇器（用HTML標簽申明）bodyhl

id選擇器（用DOM的ID申明）#pl

類選擇器（用一個樣式類名申明）.title1

屬性選擇器（用DOM的屬性申明，屬于CSS2,IE6不支持，不常用，不知道就

算了）a[href]

除了前3種基本選擇器，還有一些擴展選擇器，包括

后代選擇器（利用空格間隔，比如div.a{}）

父子選擇器div>a

群組選擇器（利用逗號間隔，比如p,div,#a{}）hl,h2,h3

偽選擇器a:hover

css選擇器的優(yōu)先級是怎么樣定義的？

標簽選擇器：權(quán)重1

類選擇器：權(quán)重10

id選擇器：權(quán)重100

行內(nèi)樣式：權(quán)重1000

;important優(yōu)先級高于一切

例如div.testl.spanli權(quán)重22

同樣的權(quán)重，后面定義的優(yōu)先于前面定義的

22.CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范

圍內(nèi)？

設(shè)置display屬性為none,或者設(shè)置visibility屬性為hidden

區(qū)別：display不占位visibility占位

技巧性：

設(shè)置寬高為0,設(shè)置透明度為0,設(shè)置z-index位置在-1000

23.超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么？如何解決？

定義鏈接的偽類必須按照以下順序：1ink,visited,hover,active

24.什么是CssHack?ie6,7,8的hack(瀏覽器兼容)分別是什么?

答案：針對不同的瀏覽器寫不同的CSScode的過程，就是CSShack。

25.行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)

置嗎？

行內(nèi)元素：多個元素可以在一行排列，不能設(shè)置寬度高度常見aspan

塊級元素：一個元素獨占一行常見pdivhlh2ul

行內(nèi)元素的padding和margin可設(shè)置，但是只能設(shè)置水平位置的padding和margin

垂直的不能設(shè)置

inline-block元素：可以設(shè)置寬度高度，且多個元素可以在一行排列，例如

＜input＞、＜img＞、＜button＞、＜texterea＞、＜label＞

26.什么是外邊距重疊？重疊的結(jié)果是什么？

在CSS當中，相鄰的兩個盒子(可能是兄弟關(guān)系也可能是祖先關(guān)系)的外邊距

可以結(jié)合成一個單獨的外邊距。

一般相鄰div垂直margin會重疊，而水平margin不重疊

27.rgba()和opacity的透明效果有什么不同？

rgba()設(shè)置顏色透明度，opacily設(shè)置元素透明度

rgba()樣式不能不繼承

28.css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？

垂直方向：line-height

水平方向：lelter-spacing

29.px和em,rem的區(qū)別

px和em都是長度單位，區(qū)別是，px的值是固定的，指定是多少就是多少，計

算比較容易.em得值不是固定的，em是以父元素的字號為基準，并且em會繼

承父級元素的字體大小。

瀏覽器的默認字體高都是16pxo所以未經(jīng)調(diào)整的瀏覽器都符合：lem=16px。那么

12px=0.75em,10px=0.625emo

rem同em,但是不能被繼承，默認是以html元素的字號為基準

30.描述一個“resel”的CSS文件并如何使用它。知道normalize.css嗎？你了解

他們的不同之處？

統(tǒng)一不同瀏覽器的元素的默認樣式，normalize.css是一個開源提供的寫好的

reset.css文件

31.Sass、LESS是什么？大家為什么要使用他們？

由于css沒有變量的概念，可以借助sass或者less的工具來模擬變量，便于編寫

維護css代碼

32.知道css有個content屬性嗎？有什么作用？

知道。css的content屬性專匚應用在before/after偽元素上，用于來插入生成內(nèi)

容。清除浮動的一種寫法就是用content實現(xiàn)的

33.JavaScript是一門什么樣的語言，它有哪些特點？

是腳本語言，是解釋性而不是編譯性，弱類型語言，變量不需要明確定義數(shù)據(jù)類

型

34.JavaScript的數(shù)據(jù)類型都有什么？

基本數(shù)據(jù)類型：String,boolean,Number,Undefined,Null

引用數(shù)據(jù)類型：Object(Array,Date,RegExp)Function

判斷數(shù)據(jù)類型typeof,判斷是哪個類instanceof

35.已知ID的Input輸入框，希望獲取這個輸入框的輸入值，怎么做？

文木框?qū)ο?value屬性

36.希望獲取到頁面中所有的checkbox怎么做？

document.getElementsByName(*checkbox的name')

37.注冊事件的三種方式

直接在DOM里綁定事件：<divonclick="lest。”></div>

在JS里通過onclick綁定：xxx.onclick=test

通過事件添加進行綁定：addEventListener(xxx,'click',test)

IE下attachEvent

JS的事件流的兩種情況：

事件冒泡：從事件源開始觸發(fā)到最外層的父元素

事件捕獲(IE不存在)：從最外層的父元素觸發(fā)到事件源

38.什么是Ajax和優(yōu)缺點？

Ajax是通過javascript發(fā)出異步請求，和服務(wù)器端進行數(shù)據(jù)交互

優(yōu)點：提高用戶體驗，實現(xiàn)數(shù)據(jù)局部刷新

缺點：不支持SEO搜索引擎優(yōu)化，沒有歷史記錄要實現(xiàn)ajax下的前后退功能成

本較大，跨域問題限制

39.什么是JSON,相對于XML有什么優(yōu)點？

JSON是一種輕量級的數(shù)據(jù)交換格式，JSON數(shù)據(jù)的書寫格式是：名稱/值對

特殊字符需要轉(zhuǎn)義，例如單引號\u0027

相對于xml的優(yōu)點：存儲相同的數(shù)據(jù)占據(jù)的空間更少

40.變量聲明提升？

在函數(shù)內(nèi)部聲明的變量，默認在執(zhí)行的時候，聲明位置會自動提升到函數(shù)最前面

41.方法通過protolype定義，而不是直接定義到類中有什么優(yōu)點？

在類中定義方法，每次創(chuàng)建交象都會重復聲明存儲方法，而在原型中定義方法,

不管創(chuàng)建多少對象，方法只聲明存儲一次，提高效率

42.call和apply的區(qū)別和作用？

call和apply的唯一區(qū)別就是傳遞參數(shù)一個用參數(shù)列表(call),一個用參數(shù)數(shù)組

(apply)

功能都是改變當前函數(shù)調(diào)用的上下文對象

43.直接在對象的原型上添加方法是否安全？尤其是在Object對象上

如果是團隊協(xié)作，盡量不要再JS對象中添加方法，會造成全局污染

44.函數(shù)聲明與函數(shù)表達式的區(qū)別？

〃ml();〃正確

〃函數(shù)聲明，會自動位置提升

functionml(){

alert(*mr);

}

〃m2();〃找不到函數(shù)

〃函數(shù)表達式，不會自動前置

varm2=function(){

alert('m2');

}

m2();〃正確

45.this在各種情況下代表的含義？

函數(shù)級調(diào)用，this代表全局windows對象

對象級調(diào)用，this代表當前對象

事件回調(diào)函數(shù)中，this代表當前事件源對象

46.原生JS的window.onload與Jquery的$(documenl).ready(funclion(){})有什么

不同？

window.onload在網(wǎng)頁的所有dom加載完畢且所有的外部資源加載也完畢才會觸

發(fā)

$(document).ready(function(){})網(wǎng)頁所有dom加載完畢就觸發(fā)

47.Doclype作用？嚴格模式與混雜模式如何區(qū)分？它們有何意義？

＜!DOCTYPE＞聲明位于文檔中的最前面，處于＜html＞標簽之前。告知瀏覽器

的解析器，用什么文檔類型規(guī)范來解析這個文檔

嚴格模式：以瀏覽器最高(最新)標準執(zhí)行

混雜模式：以兼容低版本瀏覽器的標準執(zhí)行，不寫DOCTYPE,或者DTD

聲明為v!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional〉都會觸

發(fā)混雜模式

48.link和@111^011的區(qū)別是？

link屬于HTML標簽，而@10^011是CSS提供的

而@10^011是CSS提供的語法

頁面被加載的時，link會同時被加載，而@10^0”引用的CSS會等到頁面被

加載完再加載；

link方式的樣式的權(quán)重高于@import的權(quán)重

49.HTML5新增的特性？

語義化標簽，繪畫canvas和SVG圖形，媒體的video和audio元素，本地離線

存儲，新增表單元素，地理定位，拖放功能，應用緩存，WebWorker多線程，消

息推送

50.iframe的缺點？

iframe會阻塞主頁面的Onload事件

iframe和主畫面用的是同一個連接池，會影響主頁面的并發(fā)

51.如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信？

調(diào)用localstorge,cookies等木地存儲方式

52.webSocket如何兼容低瀏覽器做推送？

用ajax輪詢代替，每隔一段毫秒發(fā)送一次請求

53.position的值，relative和absolute定位原點是？

position的四個取值：

static:默認，正常文檔輸出流

absolute：如果父元素設(shè)置了position,相對于父元素定位，否則相對于網(wǎng)頁

原點定位

fixed:相對于視口定位（相對于瀏覽器窗口定位）

relative：相對于本身的原始位置

54.解釋下浮動和它的工作原理？清除浮動的技巧

浮動可以使塊級元素橫向排列，可以使文字產(chǎn)生文字環(huán)繞，是脫離了正常的文檔

輸出流

清除浮動：

下面的元素clear:both;

父元素：overflow:hidden

after動態(tài)設(shè)置content的clear:both;

55.如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）

多數(shù)顯示器默認頻率是60Hz,即1秒刷新60次，所以理論上最小間隔為1/60

*1000ms=16.7ms

56.display:inline-block怎么去掉間隙空白？

父元素font-size:Opx

移除元素代碼之間的空白

父元素lelter-spacing設(shè)置負數(shù)

57.常見后臺開發(fā)語言？

Java適合大型項目

Php適合中小型項目

NodeJs適合高并發(fā)的中小型項目

58.usestrict的作用?

嚴格模式，不允許不規(guī)范的語法執(zhí)行

59.new操作符具體干了什么呢？

創(chuàng)建一個空對象，并且this變量引用該對象，同時還繼承了該函數(shù)的原型

屬性和方法被加入到this引用的對象中

新創(chuàng)建的對象由this所引用，并且最后隱式的返回this

60.Javascript中，有一個函數(shù)，執(zhí)行時對象查找時，永遠不會去查找原型，這個

函數(shù)是？

hasOwnProperty方法

61.js延遲加載的方式有哪些？

<scripl>標簽中加入defer和async使js可以和其他資源并行二載

動態(tài)創(chuàng)建D0M方式(用得最多)

function