web前端開發(fā)面試題匯總

1、web前端開發(fā)面試題匯總1天前653瀏覽2評(píng)論前端面試題匯總HTML&CSS1 .常用那幾種瀏覽器測(cè)試？有哪些核(LayoutEngine)?(Q1)瀏覽器：IE,Chrome,FireFox,SafariOpera。(Q2)核：Trident,Gecko,Presto,Webkit。2 .說(shuō)下行元素和塊級(jí)元素的區(qū)別？行塊元素的兼容性使用？IE8以下行元素：會(huì)在水平方向排列，不能包含塊級(jí)元素，設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)margin上下無(wú)效，padding上下無(wú)效。塊級(jí)元素：各占據(jù)一行，垂直方向排列。從新行開場(chǎng)完畢接著一個(gè)斷行。兼容性：display:

2、inline-block;display:inline;zoom:1;3.去除浮動(dòng)有哪些方式？比擬好的方式是哪一種？1父級(jí)div定義height2結(jié)尾處加空div標(biāo)簽clear:both3父級(jí)div定義偽類：after和zoom。4父級(jí)div定義overflow:hidden。5父級(jí)div定義overflow:autoo6父級(jí)div也浮動(dòng)，需要定義寬度。7父級(jí)div定義display:table8結(jié)尾處加br標(biāo)簽clear:bothr總結(jié)：比擬好的是第3種方式，簡(jiǎn)潔方便。4 .box-sizing常用的屬性有哪些？分別有什么作用？常用的屬性：box-sizing:content-boxbord

3、er-boxinherit;作用：content-box:寬度和高度分別應(yīng)用到元素的容框。在寬度和高度之外繪制元素的邊距和邊框(元素默認(rèn)效果)。border-box元素指定的任何邊距和邊框都將在已設(shè)定的寬度和高度進(jìn)展繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和邊距才能得到容的寬度和高度。5 .Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別？(Q1)告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。(Q2)標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止

4、站點(diǎn)無(wú)法工作。6 .HTML5為什么只需要寫?HTML5不基于SGML,因此不需要對(duì)DTD進(jìn)展引用;但是需要doctype來(lái)規(guī)瀏覽器的行為讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行。而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)展引用，才能告知瀏覽器文檔所使用的文檔類型。7 .頁(yè)面導(dǎo)入樣式時(shí)，使用link和import有什么區(qū)別？1link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS,定義rel連接屬性等作用；而import是CSSS供的，只能用于加載CSS;2頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而import引用的CSS會(huì)等到頁(yè)面被加載完再加載；3import是CSS2.1提出的，只

5、在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題?？傊?，link要優(yōu)于import。8 .介紹一下你對(duì)瀏覽器核的理解？IE瀏覽器的核Trident、Mozilla的GeckoChrome的BlinkWebKit的分支、Opera核原為Presto,現(xiàn)為Blink；核主要分成兩局部：渲染弓I擎(layoutengineerRenderingEngine)口JS弓I擎渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的容HTML、XML、圖像等等、整理訊息例如參加CSS等，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不一樣。所有網(wǎng)頁(yè)瀏覽器、電子

6、客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)容的應(yīng)用程序都需要核。JS引擎那么：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。最開場(chǎng)渲染引擎和JS引擎并沒有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，核就傾向于只指渲染引擎。9 .html5有哪些新特性？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分HTML和HTML5?(Q1)HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。(1膾畫canvas;(2)用于媒介回放的video和audio元素；(3)本地離線存儲(chǔ)localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不喪失；(4)sessionStorage數(shù)據(jù)在瀏

7、覽器關(guān)閉后自動(dòng)刪除；(5)語(yǔ)意化更好的容元素，比方articlefooter、headernav、section;(6宸單控件,calendardatatime、emailurl、search;(7)新的技術(shù)webworker,websocket,Geolocation;(Q2)IE8/IE7/IE6支持通過(guò)document.createElemen方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。也可以直接使用成熟的框架、比方html5shim,10 .簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？用正確的標(biāo)簽做正確的事情。1. html語(yǔ)義

8、化讓頁(yè)面的容構(gòu)造化，構(gòu)造更清晰，便于對(duì)瀏覽器、搜索引擎解析；2. 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；搜索引擎的爬蟲也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;3. 使閱讀源代碼的人對(duì)更容易將分塊，便于閱讀維護(hù)理解。11#常見兼容性問(wèn)題？png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的margin:0;padding:0;林統(tǒng)一。IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。浮動(dòng)ie產(chǎn)生的雙倍距

9、離#boxfloat:left;width:10px;margin:。00100px;這種情況之下IE會(huì)產(chǎn)生20Px的距離，解決方案是在float的標(biāo)簽樣式控制中參加_display:inline等其轉(zhuǎn)化為行屬性。（_這個(gè)符號(hào)只有ie6會(huì)識(shí)別）漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9這一標(biāo)記，將IE游覽器從所有情況中別離出來(lái)。接著，再次使用“+用E8和IE7、IE6別離開來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。css.bbbackground-color:#f1ee18;所有識(shí)另1J/.background-color:#00deff9;/IE6、7、8識(shí)另1J/+background-

10、color:#a200ff;/IE6、7識(shí)另/_background-color:#1e0bd1;/IE6識(shí)別/IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性，也可以使用getAttribute（）獲取自定義屬性；Firefox下，只能使用getAttribute（成取自定義屬性.解決方法:統(tǒng)一通過(guò)getAttribute（成取自定義屬性.IE下,even對(duì)象有x,y屬性，但是沒有pageX,pageYH性；Firefox下,event對(duì)象有pageX,pageYH性，但是沒有x,y屬性.解決方法：條件注釋缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的請(qǐng)求數(shù)。Chrome中文界面下默認(rèn)會(huì)將小于12P

11、x的文本強(qiáng)制按照12px顯示,可通過(guò)參力口CSSH性-webkit-text-size-adjust:none單決.超訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了被點(diǎn)擊訪問(wèn)過(guò)的超樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A:a:link。a:visited。a:hover。a:active。12.HTML5的離線儲(chǔ)存，描述一下cookies,sessionStorag和localStorage的區(qū)別?cookie在瀏覽器和效勞器間來(lái)回傳遞。sessionStorag和localStorag杯會(huì)sessionStorage口localStorage勺存儲(chǔ)空間更大；

12、sessionStorage口localStorageT更多豐富易用的接口；sessionStorage口localStorage自獨(dú)立的存儲(chǔ)空間；CSS一、介紹一下CSS的盒子模型？1有兩種，IE盒子模型、標(biāo)準(zhǔn)W3C盒子模型；IE的content局部包含了border和pading;2盒模型：容（content卜填充（padding）邊界（margin邊框（border）.二、CSS選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？新增偽類有那些？1.id選擇器#myid2.類選擇器.myclassname3標(biāo)簽選才?器div,h1,p4 .相令口選才舉器h1+p5 .子選擇器ulli6

13、.后代選才舉器lia7通配符選擇器*8屬性選擇器arel=external9偽類選擇器a:hover,li:nth-child可繼承的樣式：font-sizefont-familycolor,ULLIDLDDDT;不可繼承的樣式：borderpaddingmarginwidthheight優(yōu)先級(jí)就近原那么，同權(quán)重情況下樣式定義最近者為準(zhǔn)；載入樣式以最后載入的定位為準(zhǔn)；優(yōu)先級(jí)為:!importantidclasstagimportant比聯(lián)優(yōu)先級(jí)高三、CSS3新增偽類舉例p:first-of-type選擇屬于其父元素的首個(gè)元素的每個(gè)元素p:last-of-type選擇屬于其父元素的最后元素的每個(gè)

14、元素。p:only-of-type選擇屬于其父元素唯一的元素的每個(gè)元素。p:only-child選擇屬于其父元素的1t一子元素的每個(gè)元素。p:nth-child(2)選擇屬于其父元素的第二個(gè)子元素的每個(gè)元素。:enableddisabled空制表單控件的禁用狀態(tài)。:checked單項(xiàng)選擇框或復(fù)選框被選中。四、如何居中div?如何居中一個(gè)浮動(dòng)元素？?水平居中：給div設(shè)置一個(gè)寬度，然后添加margin:。autd!性divwidth:200px;margin:。auto;?垂直居中：確定容器的寬高：如寬500高300的層設(shè)置層的外邊距.divWidth:500Pxheight:300px;/高度

15、可以不設(shè)Margin:-150px00-250px;position:relatiVfi對(duì)定位background-color:pink;/方便看效果left:50%;top:50%;五、列出display的俏，說(shuō)明他們的作用。position的值,relative和absolute定位原點(diǎn)是1. block象塊類型元素一樣顯示。none缺省值。象行元素類型一樣顯示。inline-block象行元素一樣顯示，但其容象塊類型元素一樣顯示。list-item象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。2.?absolute生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)展定位。?fix

16、ed老IE不支持生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)展定位。?relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)展定位。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中忽略top,bottom,left,rightz-index聲明inherit規(guī)定從父元素繼承position屬性的值。六、CSS3有哪些新特性#?CSS或現(xiàn)圓角border-radius:8pX,陰影box-shadow:10Px,對(duì)文字加特效text-shadow線性漸變gradient旋轉(zhuǎn)transformtransform:rotate(9deg)scale(0.85,0.90)translate(0px,-30

17、px)skew(-9deg,0deg);做轉(zhuǎn)，縮放，定位，傾斜增加了更多的CSS選擇器多背景rgba七、一個(gè)滿屏品字布局如何設(shè)計(jì)八、為什么要初始化CSS樣式。因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡(jiǎn)單的初始化方法就是：padding:0;margin:0;不建議如淘寶的樣式初始化：body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,le

18、gend,button,input,textarea,th,tdmargin:。；padding:。；body,button,input,select,textareafont:12px/1.5tahoma,arial,5b8b4f53;hi,h2,h3,h4,h5,h6font-size:100%;address,cite,dfn,em,varfont-style:normal;code,kbd,pre,sampfont-family:couriernew,courier,monospace;smallfont-size:12px;ul,ollist-style:none;atext-dec

19、oration:none;a:hovertext-decoration:underline;supvertical-align:text-top;subvertical-align:text-bottom;legendcolor:#000;fieldset,imgborder:。；button,input,select,textareafont-size:100%;tableborder-collapse:collapse;border-spacing:。；九、absolute的containingblock計(jì)算方式跟正常流有什么不同？十、positionK艮display、margincol

20、lapseoverflow、float這些特性相互疊加后會(huì)怎么樣？H一、對(duì)BFC規(guī)的理解？W3CCSS2.1規(guī)中的一個(gè)概念，它決定了元素如何對(duì)其容進(jìn)展定位，以及與其他元素的關(guān)系和相互作用。十二、css定義的權(quán)重以下是權(quán)重的規(guī)那么：標(biāo)簽的權(quán)重為1,class的權(quán)重為10,id的權(quán)重為100,以下例子是演示各種定義的權(quán)重值：/權(quán)重為1/div/權(quán)重為1。.class1。/權(quán)重為10。id1/權(quán)重為100+1=101/id1div/權(quán)重為10+1=11/.class1div/權(quán)重為10+10+1=21/.class1.class2div。如果權(quán)重一樣，那么最后定義的樣式會(huì)起作用，但是應(yīng)該防止這種情況

21、出現(xiàn)十三、解釋下浮動(dòng)和它的工作原理？去除浮動(dòng)的技巧十四、用過(guò)媒體查詢，針對(duì)移動(dòng)端的布局嗎？十五、使用CSS預(yù)處理器嗎？喜歡那個(gè)？SASS十六、如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？多數(shù)顯示器默認(rèn)頻率是60Hz,即1秒刷新60次，所以理論上最小間隔為：1/60*1000ms=16.7ms十七、display:inline-block什么時(shí)候會(huì)顯示間隙，如何解決？移除空格、使用margin負(fù)值、使用font-size:。letter-spacingword-spacingJavaScript介紹js的數(shù)據(jù)類型ECMAScript有5種原始類型primitivetype,即Undef

22、ined、Null、BooleanNumber和String。js有哪些置對(duì)象？數(shù)據(jù)封裝類對(duì)象五種：Object、Array、BooleanNumber和String；其他對(duì)象：Function、ArgumentsMath、Date、RegExpErrorthis對(duì)象的理解this總是指向函數(shù)的直接調(diào)用者所謂當(dāng)前對(duì)象，而非間接調(diào)用者如果有new關(guān)鍵字，this指向new出來(lái)的那個(gè)對(duì)象；在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是IE中的attachEvent中的this總是指向全局對(duì)象Windowoeval是做什么的?把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；應(yīng)該防止使用eval-4平安，非常

23、耗性能2次，一次解析成js語(yǔ)句，一次執(zhí)行。由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval,varobj=eval(+str+)。DOM怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)立和查找節(jié)點(diǎn)創(chuàng)立新節(jié)點(diǎn)創(chuàng)立一個(gè)DOM片段createDocumentFragment()創(chuàng)立一個(gè)具體的元素createElement()創(chuàng)立一個(gè)文本節(jié)點(diǎn)createTextNode()添力口、移除、替換、插入appendChild()removeChild()replaceChild()insertBefore()在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)：？查找通過(guò)標(biāo)簽名稱：getElementsByTagName().通過(guò)元素的

24、Name屬性的值(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)：getElementsByName().通過(guò)元素Id,唯一性：getElementById()null和undefined的區(qū)別？null是一個(gè)表示無(wú)的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0;undefined是一個(gè)表示無(wú)的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。undefined:1變量被聲明了，但沒有賦值時(shí)，就等于undefined2)調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined3對(duì)象沒有賦值的屬T4,該屬性的值為undefined4函數(shù)沒有返回值時(shí)，默認(rèn)返回undefinednull：1作為函數(shù)的參數(shù)，表示該函數(shù)的

25、參數(shù)不是對(duì)象。2作為對(duì)象原型鏈的終點(diǎn)。new操作符具體干了什么呢？1創(chuàng)立一個(gè)空對(duì)象，并且this變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。2屬性和方法被參加到this引用的對(duì)象中。3新創(chuàng)立白對(duì)象由this所引用，并且最后隱式的返回this。JSON的了解？JSON(JavaScriptObjectNotation)!一種輕量級(jí)的數(shù)據(jù)交換格式。它是基于JavaScrip的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單，易于讀寫，占用帶寬小格式：采用鍵值又例如：age:12,name:backcall()和apply()的區(qū)別和作用?apply()8數(shù)有兩個(gè)參數(shù)：第一個(gè)參數(shù)是上下文，第二個(gè)參數(shù)是參數(shù)組成的數(shù)組。如果上下文

26、是null,那么使用全局對(duì)象代替。如：function.apply(this,1,2,3);call()的第一個(gè)參數(shù)是上下文，后續(xù)是實(shí)例傳入的參數(shù)序列。如：function.call(this,1,2,3);如何獲取UA?什么是ua?functionwhatBrowser()document.Browser.Name.value=navigator.appName;document.Browser.Version.value=navigator.appVersion;document.Browser.Code.value=navigator.appCodeName;document.Brows

27、er.Agent.value=navigator.userAgent;其他1.狀態(tài)碼知道哪些？100Continue繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)，已發(fā)送了heade叱后效勞端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息200OK正常返回信息201Created請(qǐng)求成功并且效勞器創(chuàng)立了新的資源202Accepted效勞器已承受請(qǐng)求，但尚未處理301MovedPermanently請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。302Found臨時(shí)性重定向。303SeeOther臨時(shí)性重定向，且總是使用GET請(qǐng)求新的URI。304NotModified自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改正。400BadRequest

28、效勞器無(wú)法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用一樣的容發(fā)起請(qǐng)求。401Unauthorized請(qǐng)求未授權(quán)。403Forbidden制止訪問(wèn)。404NotFound找不到如何與URI相匹配的資源。500InternalServerError最常見的效勞器端錯(cuò)誤。503ServiceUnavailabl嗷勞器端暫時(shí)無(wú)法處理請(qǐng)求可能是過(guò)載或維護(hù)。1. 你有哪些性能優(yōu)化的方法？1減少請(qǐng)求次數(shù)：CSSSprites,JSCSS源碼壓縮、圖片大小控制適宜；網(wǎng)頁(yè)Gzip,CDN托管，data緩存，圖片效勞器。2前端模板JS徽據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)